WebStocket in HTML5: Time to Give it a Try

WebSocket is a new technology that is part of HTML5. It allows a browser (or an application that uses HTTP/HTTPS) to upgrade a HTTP/HTTPS connection to a full socket to the server so that both parties can send data at any time.

WebSocket Standard

Lost VMs or Containers? Too Many Consoles? Too Slow GUI? Time to learn how to "Google" and manage your VMware and clouds in a fast and secure HTML5 App.

The WebSocket protocol is defined in RFC 6455. The initial handshaking is a HTTP request with upgrade header like the following from the RFC:

GET /chat HTTP/1.1

Host: server.example.com

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==

Origin: http://example.com

Sec-WebSocket-Protocol: chat, superchat

Sec-WebSocket-Version: 13

Notice the header has something more than a normal HTTP request, for example the Upgrade: websocket. Also, the requested protocols include chat and superchat. The server will pick one in response.

If the server supports WebSocket, it responds with something like

HTTP/1.1 101 Switching Protocols

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

Sec-WebSocket-Protocol: chat

Note that the protocol picked by the server is just chat. After the successful handshaking, the socket can be used as normal socket by both parties.

Try Your Browser

All the latest versions of major browsers (IE 10, Chrome, Firefox) currently support WebSocket. To test if your browser supports it, you can simply try out the echo test application (http://www.websocket.org/echo.html) from websocket.org Website. If it does, you’ll see a box saying “This browser supports WebSocket.”

From that page, you can further test if it can really connect to the server. Make sure you try both protocols (ws and wss) there.

Proxy Pass-through

The challenge is mostly the proxy which would drop the ws request sometimes but not the wss request. Why? The ws is based on HTTP and the proxy can see everything in the request therefore it can decide accordingly; the wss is based on HTTPS and the proxy cannot see what’s in the request. So it can safely pass through with wss. I found this is not only true within enterprises, but also in home network or mobile network via your service providers. The downside of using HTTPS is of course performance, especially during initial connection.

Programming WebSocket with JavaScript

JavaScript has built-in support for the WebSocket. The following is a code snippet from the echo test page (to try it out yourself, you want to download all of it there):

websocket = new WebSocket(wsUri);

websocket.onopen = function(evt) { onOpen(evt) };

websocket.onclose = function(evt) { onClose(evt) };

websocket.onmessage = function(evt) { onMessage(evt) };

websocket.onerror = function(evt) { onError(evt) };

…

websocket.send(message);

As you can see, constructing a WebSocket is pretty simple. Same is true for sending a message. On receiving side, it’s based on event model. With the WebSocket object, you can register a new function to react different event, in particular the onmessage() which is called whenever a new message comes in.

To have a complete Web application work with WebSocket, you’ll also need server side support. Will introduce it in a later post. Stay tuned.

This entry was posted in Software Development and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

2 Comments

  1. Posted June 3, 2013 at 11:48 pm | Permalink

    WebStocket in HTML5: Time to Give it a Try (DoubleCloud) http://t.co/DyteC9dQbB

  2. Posted June 3, 2013 at 11:52 pm | Permalink

    WebStocket in HTML5: Time to Give it a Try (DoubleCloud) http://t.co/L5ilTz0enl

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  • NEED HELP?


    My company has created products like vSearch ("Super vCenter"), vijavaNG APIs, EAM APIs, ICE tool. We also help clients with virtualization and cloud computing on customized development, training. Should you, or someone you know, need these products and services, please feel free to contact me: steve __AT__ doublecloud.org.

    Me: Steve Jin, VMware vExpert who authored the VMware VI and vSphere SDK by Prentice Hall, and created the de factor open source vSphere Java API while working at VMware engineering. Companies like Cisco, EMC, NetApp, HP, Dell, VMware, are among the users of the API and other tools I developed for their products, internal IT orchestration, and test automation.