HTML5 Web Sockets

What are HTML5 Web Sockets?

• HTML5Rocks article on Web Socket Basics
• WIKIPEDIA: Web Sockets
The WebSocket protocol was standardized in 2011 by the IETF as RFC 6455.

The WebSockets API in Web IDL is being standardized by the W3C.

Web Sockets maintain a persistent TCP connection between a client and a server such that both parties can start sending data at any time, without the time-consuming hand-shaking that HTML4.

Web sockets enable a two-way (bi-directional) ongoing conversation between a browser and the server. Data can travel both directions simultaneously. HTML4 is half-duplex.

HTML5 requires no blank transmissions with headers are 2 bytes taking 50ms. HTML4 have a overhead of 300 bytes in its header.

Web Sockets replaces hacks to HTML4 in order to maintain connection with blank data transmissions and takes 150 ms. Because servers cannot initiate requests, the browser has to keep sending requests to the server. These surplus requests add a large overhead in CPU usage on the web server.

HTML4 short polling has clients making requests to the web server every few seconds to see if data has changed. If it has, the web server responds with the new data. Otherwise, it will respond with a blank message.

HTML4 Long polling is implemented makes a single request to the web server and keeps the connection open until the data changes. The web server then sends back a response.

Web Sockets is a feature of HTML5, so these internet browser clients (or later) are needed:

• Internet Explorer 10
• Firefox 6,
• Safari 6,
• Google Chrome 14,
• Opera 12.10

caniuse.com/websockets lists what browser and version passed their HTML5 certification tests.
WARNING: Their list does not include the native Android browser.

Use one of the browsers in two windows (as 2 users) to chat using http://html5demos.com/web-socket

Oracle: Learn how to integrate WebSockets into your applications by Johan Vos

Because we are talking about a protocol, its use is defined in JSR-356 for use in Java EE7. http://www.youtube.com/watch?v=rSfewVdQLT8

Client side

• WIKIPEDIA: HTML5
• html5rocks.com provides info on Google APIs not part of the W3C HTML5 specification.
To establish a WebSocket connection with a ficticous host example.com, JavaScript code such as this is used:

var connection = new WebSocket('wss://server.example.com/echo', ['soap', 'xmpp']);
var connection = new WebSocket('ws://server.example.com/echo', ['soap', 'xmpp']);

The "wss://" protocol replace https, which encrypts.

Web socket support are included in these client-side JavaScript frameworks:

• jquery.socket.js
• atmosphere.js (also supports HTML4 long polling) portable, includes server-side async-io.org. It transparently supports WebSockets, Server Side Events (SSE), Long-Polling, HTTP Streaming (Forever frame) and JSONP. Bravo, Jean-Francois Arncand!

The client sends a WebSocket handshake message such as this:

GET /mychat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Version: 13
Origin: http://example.com

As with HTTP, each line ends with an EOL (end of line) sequence (\r\n).

This handshake is interpreted by HTTP servers as an Upgrade request.

The rest "Sec-WebSocket" items are understood after the upgrade.

The key is a random number base64 encoded by the client.

Server Side

The server responds with HTTP return code 101:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

The Sec-WebSocket-Accept response is formed by the server taking the magic string 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 being appended to the (undecoded) client key, then hashed with SHA-1, then base64 encoded.

Web servers that natively support web sockets:

• Netty 3.3.x
• Jetty 7.x, 8.x
• Glassfish 3.1.2 (Grizzly) (Java-based) from Oracle
• Tomcat 7.0.27 from Apache, which is not backwardly supported by 7.0.29
• Kaazing WebSocket Gateway (Frank Greco, Dir. of Tech.)
• TorqueBox
• Gaucho Resin (their Scott Ferguson is on the JSR-356 Expert Group)
• Lightstreamer provides solid server software with integrated client API.

People from IBM, RedHat, VMWare, Fujitsu, etc. are also in the group.

Sample Java code from by Arun Gupta, Oracle J2EE Evangelist:

import javax.net.websocket.annotations.*;

@WebSocketEndpoint( // Turns a POJO into a WebSocket Endpoint.
	value="/hello",
	encoders={MyMessage.class},
	decoders={MyMessage.class},
) 
public class HelloBean {

	@WebSocketMessage // intercepts WebSocket Message events
	public String sayHello(String name){
		return "Hello " + name;
	}
}

@WebSocketOpen/Close methods intercepts WebSocket Open/Close events.

After connection, web socket client and server are peers.

In addition to SOAP (which makes no sense), also registered as a WebSocket subprotocol name is the WebSocket Application Messaging Protocol (WAMP) http://wamp.ws/why/ uses web sockets with JSON message serialization format to implement higher level messaging patterns such as Publish & Subscribe (PubSub) and Remote Procedure Calls (RPC).

Although no traction:

Multiplexing

per frame deflate and per message Compression.

TOOL: socket.io enables web sockets for the node.js Chrome JavaScript server.

Usefulness

Although web sockets enables real-time games on HTML, other applications can take advantage of its speed because web sockets are transmitted in TCP port 80 to avoid begging the security department to open ports.

Lightstreamer

Commercial versions provide automatic fall-back to clients which cannot handle HTML5.

Lightstreamer.com offers both a no-cost option and licensed option with more features, include support for a wide variety of legacy client and server technologies, both .NET and Java.

I am using LoadRunner to measure the latency and bandwidth between HTML4 with HTML5 and how much their server reduces.

TIP: On their 8MB installers use 7zip instead of WinZip to avoid !! errors.

Testing Web Sockets

Web socket devs have autobahn.ws/testsuite written in Python.

The first vendor of load test tools to support Lightstreamer was Neotys (with a specific module for Neoload), explicitly mentioning it in its feature list.

HP LoadRunner

http://stackoverflow.com/questions/15528183/loadrunner-lightstreamer

http://www.sqaforums.com/showflat.php?Number=685960 used web_set_sockets