Home > Software Development > WebStocket in HTML5: Time to Give it a Try

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

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.

Categories: Software Development Tags: , ,
  1. June 3rd, 2013 at 23:48 | #1

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

  2. June 3rd, 2013 at 23:52 | #2

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

  1. No trackbacks yet.