>> How do I look?
>> Sensational.
>> I've had this skill ever since I was a child where I
can just tend to my own gut to wear. I did this.
>> What is it, five months?
>> It's out there. I'll do this
with my wife when we go out in public,
where we stand there, and I'll
just do this, and she's not looking.
Okay. Are we ready? Don't put that in there and cut that out.
>> [MUSIC]
>> Hi, I'm Burke Holland.
>> I'm Anthony Chu.
>> This is five ways to build real-time apps with JavaScript.
>> What's that thing on your head?
>> It's my hair.
>> Okay.
>> So, what exactly do we mean when we say real-time?
What is a real-time application exactly?
>> Yes. On the web, that's an application
where you don't have to refresh the page to get new data.
>> So a chat app maybe would be a real-time application?
>> Yeah or if you're looking for a stock price,
and you're looking at it in the stock price updates.
>> Right. So, I can find out that I've lost all my money
immediately instead of a couple minutes from now.
>> Yeah. Maybe you shouldn't have invested in
these VHS rental companies.
>> It's coming back, man. It's coming back.
Thing number one: long polling.
What exactly is long polling?
>> Yeah. So, I guess before talking about long polling,
we should talk about what polling is.
Polling is an application asking
the server for data on a time interval.
So, maybe every five seconds, every 10 seconds,
I will ask the server, "Do you have data?
Do you have data? Do you have data?"
>> As it's like going on a vacation with your kids,
where they're like, "Are we there yet?
Are we there yet? Are we there yet?"
>> Yeah. Exactly.
>> That would be polling. They're polling me.
>> Yeah, totally.
>> So, what is long polling?
>> So long polling is if the application
makes a request to the web server
and the web server just hangs on to that request,
and then it doesn't actually respond until it has data.
>> So, instead of responding every time it's asked,
it just waits until there's a response to give that isn't,
"We'll get there when we get there."
>> Yeah. So you get the data as soon as
possible instead of waiting five or 10 seconds.
>> Right. So, solution for all you parents out there is to
just not answer the "Are we there yet?"
question until you're there yet.
>> Exactly.
>> That's long polling. Thing number two: SSE.
Isn't that a channel where people watch sports?
>> No, man. That's ESPN.
>> Is it's that thing where you know when
something's going to happen before it happens?
>> No. I think that's ESP.
>> What is ESS?
>> It's SSE, and that's server-sent events.
>> What is the server-sent event?
>> It's a lot like long polling.
You're making a request to the server,
and the server still hang on to that request.
But now every time it has data,
it will send you a message in the response.
They'll never close the response.
>> Okay, versus long polling which closes
the response after there is an event?
>> Yep. Then it's up to the client to re-establish
that connection again with a new response with a new request.
>> I like ESS. It's sounds good.
>> Yeah, or SSE is great.
>> Either way.
>> Yeah.
>> Thing number three: WebSockets.
So, what are WebSockets?
>> Hang on. I don't want that thing on
your head anymore. That looks ridiculous.
>> My hair?
>> Yeah. It's hideous.
>> This is my natural hair.
Thing number three: WebSockets.
WebSockets, Anthony.
>> So, WebSockets is a different protocol than HTTP,
and it allows bidirectional communication
between the client and the server.
So, unlike server-sent events,
where only the server can send messages to the client,
in WebSockets, the server can send messages to a client,
but the client can also send messages to the server.
>> Well, that makes sense. Why do
you think it is they call it a socket?
>> Because it's like plugging something into the wall and
then establish a connection
and then you get data or electricity flowing through it.
>> Did you know that it's also a golf term, socket?
>> No.
>> It means to shank,
as in you shanked the ball.
>> I thought that's the only way to play golf.
>> Well, that's for you.
>> They ask you how you are, and you just have to
say that you're fine and you're not really fine,
but you just can't get into it
because they would never understand.
>> Thing number four are real-time frameworks for WebSockets.
So, give me an example of
a real-time framework for WebSockets and why would I need one?
>> Yeah. So, a couple of popular ones are
Socket IO for NodeJS is probably the most popular one,
and other one that I worked with a lot is SIgnalR for ASP.NET.
The reason you will want to use them,
is instead of coding against
the raw real-time technologies
that we've been talking about before,
you typically want to work at a higher level.
So, what a framework allows you to do
is instead of managing those connections yourself,
you can instead work at a higher level so you can say,
"Send a message to all my connections."
You don't have to figure out what your connections are and go
through them and send a message to them individually.
You say, "Send a message to all the
connections," and the framework will deal with that for you.
Quite often the frameworks will also allow you
to put connections in the arbitrary groups or rooms,
and you can address those rooms or groups individually as a whole,
so you can, for instance,
if you want to put everyone in a certain location, into a group,
you can address everyone that's in a certain state for example.
>> Cool. So, real-time frameworks allow me to write
less code and leverage code
that somebody else has already written which
makes my life a lot easier.
>> Unbelievable.
>> Thing number five: WebSocket frameworks as a service.
What does that mean?
>> Yes. So, instead of writing the application yourself and
hosting the server for all your clients to connect to,
you can just get that as a service.
So, your WebSocket connections
are between the clients and the service,
and all you're in charge of is writing the code.
So, you're working at another layer of
abstraction from the WebSockets.
>> So, I can focus on just writing
the client portion and
the server portion is already taken care of.
>> Yeah. Sometimes the server proportion can be serverless,
and you can actually use serverless to talk to the service
to send WebSocket messages.
>> So everything is like Azure's new SignalR service.
Instead of me writing the SignalR code,
the SignalR is already there.
All I need to do is configure it and rock and roll.
>> Yeah. Exactly.
>> Speaking of rock and roll, you look amazing.
>> I hate myself.
>> I'm Burke Holland.
>> I'm Anthony Chu..
>> This is an eight-dollar wig from Party City.
Now you know five ways to build real-time apps with JavaScript.
>> [MUSIC]