Start learning with our library of video tutorials taught by experts. Get started
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.
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.
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.
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.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.