HTML5 Server-Push Technologies, Part 2 Blog


    The upcoming HTML5 specification includes a lot of powerful and exiting features which turn web browsers into a fully capable ich internet application (RIA) client platform. Part 1 of this article series presented an overview of the history of the web, and investigated the new HTML5 Server-Sent Eventscommunication standard.

    2.2 WebSockets

    The upcoming HTML5 standard also includes WebSockets. WebSockets enables establishing a bidirectional communication channel. In contrast to Server-Sent Events, the WebSocket protocol is not build on top of HTTP. However, the WebSocket protocol defines the HTTP handshake behaviour to switch an existing HTTP connection to a lower level WebSocket connection. WebSockets does not try to simulate a server push channel over HTTP. It just defines a framing protocol on top of TCP. In this way WebSockets enables two-way communication natively.

    Like the Server-Sent Events specification, WebSockets specifies an API as well as a wire protocol. The WebSockets API specification includes a new HTML element, WebSocket.

    Listing 5. Example JavaScript using the WebSocket interface

     <html> <head> <script type='text/javascript'> var ws = new WebSocket('ws://localhost:8876/Channel', ''); ws.onmessage = function (message) { var messages = document.getElementById('messages'); messages.innerHTML += "<br>[in] " +; }; sendmsg = function() { var message = document.getElementById('message_to_send').value document.getElementById('message_to_send').value = '' ws.send(message); var messages = document.getElementById('messages'); messages.innerHTML += "<br>[out] " + message; }; </script> </head> <body> <form> <input type="text" id="message_to_send" name="msg"/> <input type="button" name="btn" id="sendMsg" value="Send" onclick="javascript:sendmsg();"> <div id="messages"></div> </form> </body> </html>

    A WebSocket will be established by creating a new WebSocket instance. The constructor takes one or two arguments. TheWebSocketURL argument specifies the URL to connect. AWebSocketURL starts with the new scheme typews for a plain WebSocket connection orwss for secured WebSocket connection. Optionally, a second parameter protocol can be set which defines the sub-protocol to be used (over the WebSocket protocol). As with theEventSource element, an onmessage handler can be assigned to a WebSocket, which will be called each time a message is received. Data will be sent by calling thesend() method.

    If a new WebSocket is created, first the underlying user agent will establish an ordinary HTTP(S) connection to the host of the URL. Based on this new HTTP connection, an HTTP upgrade will be performed. The HTTP specification defines the upgrade header field to do this. The upgrade header is intended to provide a simple mechanism for transition from HTTP protocol to other, incompatible protocols. This capability of the HTTP protocol is used by the WebSocket specification to switch the newly created HTTP connection to a WebSocket connection. By adding the optionalWebSocket-Protocol header, a specific sub-protocol is requested.

     REQUEST: GET /Channel HTTP/1.1 Upgrade: WebSocket Connection: Upgrade Host: myServer:8876 Origin: http://myServer:8876 WebSocket-Protocol: RESPONSE: HTTP/1.1 101 Web Socket Protocol Handshake Upgrade: WebSocket Connection: Upgrade WebSocket-Origin: http://myServer:8876 WebSocket-Location: ws://myServer:8876/Channel WebSocket-Protocol:
    Figure 2. WebSocket upgrade handshake

    After receiving the response HTTP header, data will be transmitted according to the WebSocket protocol. This means at this point only WebSocket frames will be transferred over the wire. A frame can be sent at each time in each direction. The WebSocket protocol defines two types of frames: a text frame and abinary frame. Each text frame starts with a 0x00 byte and ends with a 0xFF byte. The text will be transferred UTF8-encoded between the start and the end byte. A text frame requires only 2 additional bytes for packaging purposes. Figure 3 shows a text frame for the string "GetDate" and the string "Sat Mar 13 14:00:25 CET 2010".

     Text frame of "GetDate": 0x00 0x47 0x65 0x74 0x44 0x61 0x74 0x65 0xFF Text frame of "Sat Mar 13 14:00:25 CET 2010": 0x00 0x53 0x61 0x74 0x20 0x4D 0x61 0x72 0x20 0x31 0x33 0x20 0x31 0x34 0x3A 0x30 0x30 0x3A 0x32 0x35 0x20 0x43 0x45 0x54 0x20 0x32 0x30 0x31 0x30 0xFF
    Figure 3. Text frame example

    Binary data can be transferred by using a binary frame. A binary frame starts with 0x80. In contrast to the text frame the binary frame does not use a terminator. The start byte of a binary frame is followed by the length bytes. The number of length bytes is given by the required bytes to encode the length. Figure 4 shows the binary frame for a small number of bytes to transfer which requires one length byte as well as a larger binary frame which requires two length bytes.

     binary frame of 0x00 0x44: 0x80 0x02 0x00 0x44 binary frame of 0x30 0x31 0x32 0x33 0x34 0x35 [