Start learning with our library of video tutorials taught by experts. Get started

HTML5 Power Workshop
Watching:

Getting started with web sockets


From:

HTML5 Power Workshop

with Andy Olsen

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
HTML5 Power Workshop
3h 9m Intermediate May 31, 2012

Viewers: in countries Watching now:

In this course, part of his series of titles on HTML5 and CSS3, author and expert Andy Olsen looks at advanced topics like geolocation, mobile development, web sockets, Web SQL, and web workers. You'll also learn how to communicate between pages downloaded from different servers and how to use the new Ajax features in XMLHttpRequest Level 2. After completing this workshop, developers be well equipped to start utilizing the powerful features of HTML5.

Topics include:
  • Using the Communications API
  • Understanding geolocation
  • Getting and watching the current position
  • Using web workers and WebSockets
  • Implementing mobile web user interfaces
  • Managing data in a mobile web application
  • Working offline
  • Using Web SQL
  • Using drag-and-drop
Subjects:
Developer Web Web Design Web Development video2brain
Software:
HTML
Author:
Andy Olsen

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.

There are currently no FAQs about HTML5 Power Workshop.

Share a link to this course
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.
Upgrade now


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.

Upgrade now

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 preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.