#FiveThings Ways to Build Real-Time Apps with JavaScript


>>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]

7 Comments

Add a Comment

Your email address will not be published. Required fields are marked *