Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Getting started with web sockets

From: HTML5 Power Workshop

Video: Getting started with web sockets

In this lesson, we're going to look at WebSockets. WebSockets is a major improvement on top of HTTP, and it's part of the HTML5 specification. It allows a web browser and a web server to communicate in real time, asynchronously. So for example, a client can open up a WebSocket connection to the web server, could push some data to the web server. The web server can maintain the connection in an open state and it can push data back to the browser whenever it wants.

Getting started with web sockets

In this lesson, we're going to look at WebSockets. WebSockets is a major improvement on top of HTTP, and it's part of the HTML5 specification. It allows a web browser and a web server to communicate in real time, asynchronously. So for example, a client can open up a WebSocket connection to the web server, could push some data to the web server. The web server can maintain the connection in an open state and it can push data back to the browser whenever it wants.

So, WebSockets supports full duplex, in other words two way communication between the browser and the server. So, that they can send data to each other simultaneously in either direction. In order to use WebSockets, you need to have two things. You need to have a browser that supports the WebSocket API in terms of JavaScript. And you also have to have a web server that understand the WebSocket protocol. Because on initial request, to get sent from the client to the server to say, well currently we are talking HTTP.

Can you as the server elevate the protocol to the WebSocket protocol, which suppose this bidirectional communication. So the web server has to be written to stand the initial request, to elevate, to the WebSocket protocol. There are various different web sever toolkits available. And I've got a text file here, WS service.txt just to give you some help. Depending on which platform or which technology you are using, you can use one of these URLs. We can't use Note JS in this demo because its straight forward. If you're using Microsoft WCF, then you can implement the web server that can be connected to by HTTP or TCP or named pipes.

There's also a WebSocket prototype available now in WCF which you can download and install into Visual Studio. And that will allow WCF to expose a web service over the WS protocol. Also, if for PHP, there's a PHP add-on, and for Apache, and Java, and Ruby. So there are various different web server side toolkits that you can install on your machine depending on which platform you want to use. So we're going to use Node JS. I've already downloaded Node JS, obviously, and if you want to use it on your machine. All you need to do is take msi file from your project file folder and run it. It will automatically install node JS.

By default, it goes into the program files folder or the program files x86 if you have Windows 64-bit. And then you can open up the Command Prompt and then just run node from the Command Prompt. One thing you need to do first and I'll do that here to show you what's required. In order to use WebSockets, you have to install the WebSocket module as part of your node JS setup. So the command you need to execute from the Command Prompt is this. S, this will download the WebSocket module from the Internet, and install it locally on your machine, in the sub folder called node modules. And then another sub folder called WebSocket.

So it's in this folder here, and this folder here. This is what's just been downloaded from the Internet. Now, to be honest, I've already set that up as part of the demo. So, you already had that anyway in your project file folder. So, once you've installed WebSockets, what you can then do is to start the web server running. So, the web server in my example is a simple Java script file called Socket Server WS.js, so you need to start that running from the command prompt. So let me do that here.

So you type in node, which will stop the node js engine. And then you give it the name of your JavaScript file you want to execute, so that's socketservewls.js. So my WebSocket server is now running, and it's now listening on port 8888. What I can do now is open up a client that will connect that WebSocket server and send data to it. And the server will be able to send data back to the client asynchronously whenever it wants. So it we'll have a full bidirectional communication between the client and the server.

Before I do that just one other technicality when you implement in a web server this WebSockets. Any client that tries to connect to you using a WebSocket will send an initial request that says well were currently talking HTTP. Would you like as a server to elevate our communicatio to use enhanced WebSocket protocol. So, the web server will receive as part of that request, and then we see the client's origin, such as HTTP and the domain name.

And it's up to the server to decide whether to accept the request from that origin or to reject it. And to illustrate that technique, in my server, I only accept requests that come from local hosts. So for the purposes of this demo, that means that when we run the socket client, we have to run it from local host. Now on my machine, I have Microsoft IIS installed as a web server, therefore I've copied this file in to the Microsoft IIS Web Publishing folder, which is INetPub www root.

So, that means that I can then open up a web browser and I connect a URL such as this. Okay, so local host socketclaim.html. As soon as this webpage opens it immediately tries to open a WebSocket connection to the web server. The web server will look at the name from the client, local host, and it will say, yes, accept that. And then, the server will start sending back responses every one second to say, how many clients are currently connected to the web server? That's the way that I've implemented the server in this example. So I'll press Enter here to load the page in the browser. It's created a WebSocket.

The WebSocket is connected to the server. The server accepted the request and it starts sending back messages to the client. So, the server is asynchronously now pushing data back to my webpage here. In the server, I just go back to the Command Prompt, the server has some console statements just to show what's happening. So you can see here, we have various different messages being sent back and forth. It's sending these messages for example, back to local host.

I can also send data from the client to the server, so for example, wales. I'll send that to the server. What the server does is to bounce that message straight right back to me. You can just see it there at the bottom of the page. And in my command window, you can see that the server did receive the message from the client, and it sent it back to the client as well. Now, I can have any number of clients I want to connecting to the server, so I'll just open up.

What I'll do in my, in my browser, I'll take the URL, and I'll open up another window, and put the same URL in again. So we now have two clients, talking to the server, and the server keeps a track of all the connections in an array, and then every one second it sends a message back to each client. So, the client can talk to the server, and the server can talk to any number of clients that it has open. I'll close this window here, so one client is now going to disconnect. And then, back here in the first window, you can see that it realizes that there's only one client connected.

And if I close this client, then you can see here that the server knows when a client disconnects. So that's the end of this lesson. We've seen how WebSockets work in practice. We have a web server, implemented using Node JS that can accept requests in this example from local hosts. And then, the client and the server can communicate asynchronously in either direction to give us some quite powerful communication framework.

Show transcript

This video is part of

Image for HTML5 Power Workshop
HTML5 Power Workshop

22 video lessons · 4425 viewers

Andy Olsen
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5 Power Workshop.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.