Category Archives: HTML5 Web Socket

HTML5 Web Socket

The HTML 5 specs introduces the Web Socket interface, which is a full-duplex communications channel that works over a single socket and it is exposed thru a JavaScript interface in HTML 5 compliant browsers. The bi-directional abilities of Comet and Ajax, unlike Web Sockets, usually are not native on the browser, and rely on preserving two connections-one for upstream and one for downstream–so as to stream data to and from the browser. Note, that to support streaming over HTTP, Comet requires a long-lived connection, which is often severed by proxies and firewalls. In addition, few Comet solutions support streaming over HTTP, employing a less performant technique called “long-polling” instead.

Web Sockets account for network hazards such as proxies and firewalls, making streaming possible over any connection, and with the ability to support upstream and downstream communications over a single connection, Web Sockets place less burden on your servers, allowing existing machines to support more than twice the number of concurrent connections.

Simple is Better

With the introduction of one succinct interface (see Listing 1), we can now divorce ourselves from the mind-bending hacks all too often associated with Comet and focus on the task at hand, namely your application logic. Furthermore, by moving to a single, streaming channel of communications, we can overcome the inadequacies of techniques such as long-polling and “forever frames,” and as a result further reduce latency.

[Constructor(in DOMString url)]
interface WebSocket {
  readonly attribute DOMString URL;
  // ready state
  const unsigned short CONNECTING = 0;
  const unsigned short OPEN = 1;
  const unsigned short CLOSED = 2;
  readonly attribute int readyState;
  // networking
  attribute EventListener onopen;
  attribute EventListener onmessage;
  attribute EventListener onclosed;
  void postMessage(in DOMString data);
  void disconnect();
};

Utilizing the Web Socket interface couldn’t be simpler. To connect to an end-point, just create a new Web Socket instance, providing the new object with a URL that represents the end-point to which you wish to connect (See listing 2). Note that a ws:// and wss:// prefix indicate a Web Socket and a secure Web Socket connection, respectively. A Web Socket connection is established by upgrading from the HTTP protocol to the Web Socket protocol during the initial handshake between the client and the server, over the same underlying TCP/IP connection. Once established, Web Socket data frames can be sent back and forth between the client and the server in full-duplex mode. The connection itself is exposed via the onmessage and postMessage methods defined by the Web Socket interface.

var myWebSocket = new WebSocket("ws://www.websocket.org");

Before connecting to an end-point and sending a message, you can associate a series of event listeners to handle each phase of the connection life-cycle.

myWebSocket.onopen = function(evt) { alert("Connection open ..."); };
myWebSocket.onmessage = function(evt) { alert( "Received Message:  "  +  evt.data); };
myWebSocket.onclose = function(evt) { alert("Connection closed."); };

To send a message to the server, simply call postMessage and provide the content you wish to deliver. After sending the message, call disconnect to terminate the connection. As you can see, it really couldn’t be much easier.

myWebSocket.postMessage("Hello Web Socket! Goodbye Comet!");
myWebSocket.disconnect();

Firewalls and Proxies? No Problem

One of the more unique features Web Socket provides is its ability to traverse firewalls and proxies, a problem area for many Comet-enabled applications. Comet-style applications typically employ long-polling as a rudimentary line of defense against firewalls and proxies. The technique is effective, but is not well suited for applications that have sub-500 millisecond latency or high throughput requirements. Plugin-based technologies such as Adobe Flash, also provide some level of socket support, but have long been burdened with the very proxy and firewall traversal problems that Web Sockets now resolve.

A Web Socket detects the presence of a proxy server and automatically sets up a tunnel to pass through the proxy. The tunnel is established by issuing an HTTP CONNECT statement to the proxy server, which requests for the proxy server to open a TCP/IP connection to a specific host and port. Once the tunnel is set up, communication can flow unimpeded through the proxy. Since HTTP/S works in a similar fashion, secure Web Sockets over SSL can leverage the same HTTP CONNECT technique. Note that Web Sockets are not supported by modern browsers, however Kaazing provides an implementation of HTML 5 Web Sockets via the company’s Gateway and Enterprise Gateway offerings that enables today’s browsers to take advantage of this emerging technology.

Any RIA, Any Time

In addition, the Web Socket protocol can be used to support a diverse set of clients (e.g. JavaScript, Adobe Flex, JavaFX, Microsoft Silverlight, etc.). However, the HTML 5 specification only defines support for JavaScript, which is limited to text-based protocols. To serve other client-types and support binary protocols you will need to look to vendor offerings. Fortunately, Kaazing offers client-side libraries for other client types such as Adobe Flex and, in the future, Microsoft Silverlight that do support binary types, enabling more than text-based services to reach the browser. In addition, Kaazing’s Gateway JavaScript libraries offer binary support which supports binary types in JavaScript via Base64 encoding. Support for third-party plugins such as Adobe Flex is available through Kaazing’s Enterprise Gateway offering.

Learn more about HTML5 and WebSockets.
Find out how Kaazing Gateway makes Web Sockets even more powerful.
You can also find out more about Kaazing Enterprise Gateway by visiting kaazing.com

Incoming search terms:

  • html5 socket
  • html5 websocket example
  • html5 websocket tutorial
  • websocket html5 tutorial
  • websocket html5 example
  • html5 websocket
  • html5 websockets example
  • websocket tutorial
  • html5 websockets tutorial
  • html5 web socket
Share
10 visitors online now
4 guests, 6 bots, 0 members
Max visitors today: 16 at 01:56 am UTC
This month: 74 at 04-21-2017 07:18 pm UTC
This year: 74 at 04-21-2017 07:18 pm UTC
All time: 513 at 06-01-2016 02:24 pm UTC
Get Adobe Flash player