Tuesday, May 22, 2012


One major part of HTML5 is connectivity, and WebSocket is the one will change web in terms of communication protocol. Wikipedia defines WebSocket as below:
WebSocket is a web technology providing for bi-directional, full-duplex communications channels over a single TCP connection. The WebSocket API is being standardized by the W3C, and the WebSocket protocol has been standardized by the IETF as RFC 6455.

We are looking for different ways to do server push instead of client polling. This near real time server push mechanism provides better user experience on the web. Comet (long polling) defines push technologies applied to Ajax (XHR) web applications,  XMLSocket flash also provides the ability to create flash socket, BOSH/XMPP is often used in web chat application. Then comes to HTML5 which has Server sent event (one way), and WebSocket (two ways) for client/server bi-directional communication. The old frequent polling mechanism was out-dated which was a short-term solution before we have these new technologies.

WebSocket is becoming popular and broadly adopted on both server side and client side. Java, .NET, PHP, Python and server side Javascript etc all have WebSocket support. Recently I looked at node.js and tried out socket.io, which is pretty awesome to provide a WebSocket server. There are many discussion about Nginx reverse proxy support for WebSocket, so that deployment diagram can have Nginx (serving static resources) in front of Socket.IO (WebSocket). This comparison table has part of the list http://en.wikipedia.org/wiki/Comparison_of_WebSocket_implementations. Btw, Kaazing WebSocket Gateway is very famous due to HTML5 evangelist/trainer Peter Lubber from Kaazing. Another one is Union Platform which supports WebSocket too.

On the client side, there are many WebSocket libraries to support WebSocket programming. Using the native WebSocket API is hard (for now) due to browser support compatibility and the spec is not finalized. Old browsers don't have WebSocket support (fallback to Flash or Long Polling), newer browsers have unsecure WebSocket implementation, latest modern browsers start to implement WebSocket specification, and mobile browsers have different behaviors too. For browser WebSocket support compatibility, check out http://caniuse.com/#search=websocket With this kind of complexity or mess, we see more client libraries built for intermittent solutions. Usually the library has feature support detection, elegant fallback (polyfill), and native WebSocket API usage. Recently I looked at some Javascript libraries (Socket.IO client, SockJS and web-socket-js), and did read web-socket-js code which is use WebSocket API and fallback to Flash (WebSocketMain.swf). If you looked at socket.io, it has more protocol detection and fallback to cover more scenarios.

During the test using web-socket-js, I learnt Flash socket policy file configuration. Starting from Flash Player 9, there is a new strict access policy for Flash applications that make Socket or XMLSocket connections to a remote host. It now requires the presence of a socket policy file on the server. It means you have control to the server which your flash application connects to. There are two ways to deploy socket policy file: one is port 843 (not practical for production and firewall), the other is destination port (usually 80 or 443). In Nginx, we can set up the port 843 or use error page for 400 error as following

server {
    listen 834;
    server_name localhost;
    location / {
        rewrite ^(.*)$ /crossdomain.xml; 

server {
    listen 80;
    server_name localhost;
    location / {
        root   html;
        index  index.html index.htm;
    error_page  400             /crossdomain.xml;

The crossdomain.xml looks like:
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"> 
<allow-access-from domain="*" secure="false" to-ports="*"/>
<site-control permitted-cross-domain-policies="master-only" />

Finally, don't forget to check out WebRTC from google, it enables real-time communication on browser based on HTML5 and Javascript. Google open source it to try to disrupt Microsoft skype and Apple Facetime.

No comments:

Post a Comment