Learning Management Platform for Written Tutorial Series.

HTML5 WebSockets

HTML5 WebSockets

Introduction

This tutorial serves as a quick introduction to HTML5 WebSockets. It also compares WebSockets to other similar technologies such as Comet and Ajax.

Topics covered:

  • What is HTML5?
  • What is a Comet/Ajax?
  • What is a web socket?
  • Web socket protocol and API
  • Revolutionary capabilities of HTML5 WebSocket API

By the end of this tutorial, you should know what a WebSocket is, and how it’s different from other similar technologies such as Comet and Ajax.

What is HTML5?

HTML is the acronym for Hyper Text Mark-up Language. It is used to structure and format web pages. The number five (5) refers to revision number. HTML5 was developed to address the limitations of the earlier versions. Some of the limitations of the earlier versions of HTML include;

  1. Lacks of support for multimedia – earlier versions of HTML rely on plug-ins such as flash, silver light, and Java to add multimedia content to web pages. This has the negative effect of performance issues especially on mobile devices. They use a lot of battery power
  2. Lack of off-line storage support
  3. Lack of support for sockets

Since it is a relatively new technology, HTML5 is not supported in all the browsers. Earlier versions of most browsers do not support it. New versions of almost all browsers now support HTML5 either fully or partially. Most browsers on smart phones also support HTML5. The official logo for HTML5 is shown below.

What is a Comet?

The web has evolved from simple static text pages to complex interactive pages with rich multimedia content such as video. Web applications such as those for stock exchange need to update the client browser in real time. Application such as FaceBook chat needs to be able to send instant notifications when a user initiates a chat. How can all these requirements be met without turning to HTML5? The solution is comets.

A comet is a web programming technique that pushes data to the web browser without the web browser requesting for the data. The standard model of the web is the client requests for resources then the server responds with the requested resource.

Comets work by using long held-held HTTP requests. Comets rely on JavaScript to work, if the user has disabled JavaScript in their browsers, then the comet will not be able to work. Comets can be implemented using a number of techniques. The common comet implementations are;

  • Hidden iframe
  • XMLHttpRequest
  • Streaming
  • Ajax with long polling
  • Script tag long polling
  • XMLHttpRequest long polling

Disadvantages of comets

  • Opening and closing the TCP/IP connection has overhead costs
  • Using application that implement comet technology on mobile devices such as smart phones increases the power consumption of the battery. This leads to draining the battery quickly.
  • Comets only work with HTTP protocol. This means you cannot take advantage of protocols such as Advanced Message Queuing Protocol (AMQP) and Simple (or Streaming) Text Oriented Message Protocol (STOMP).
  • High latency
  • Comets are built on top of HTTP. HTTP is a half-duplex protocol. It does not allow bi-directional traffic flow

What is Ajax?

Ajax is the acronym for Asynchronous JavaScript and XML. Ajax is used to send requests to the server, receiving results and only update part of the website without affecting the whole page in the browser.

What is web socket?

Websocket is a low latency bi-directional communication (full duplex) protocol over a single TCP connection that supports over protocols such as HTTP, STOMP, and AMQP etc. It is a feature that was introduced in HTML5. It was developed to solve the disadvantages of technologies such as comet programming listed in the above section. WebSockets create persistence connections to the server that remain open until the client application is closed.

WebSocket protocol and API

WebSocket protocol

The WebSocket protocol as stated above is full duplex protocol over a single TCP connection. The protocol consists of an opening handshake that is interpreted by HTTP as an upgrade request followed by basic message framing, layered over TCP. The protocol uses origin-based security model. The aim of websocket protocol is to provide bi-directional communication between a client and a server without opening multiple connections. A WebSocket supports both UTF-8 strings and binary frames. The websocket protocol runs on port 80 for un-encrypted communication and port 443 for secure communication. The WebSocket protocol was standardized by the IETF as RFC 6455 in 2011

WebSocket Application Programming Interface (API)

The websocket API is what allows web pages to interact with the WebSocket protocol using bi-directional communication with low latency.

Revolutionary capabilities of HTML5 Websocket Protocol/API

  • Business innovation – more and more devices are added to the web. These devices support HTML5. This will make it easy for business to create solutions that delivers information in real-time.
  • Better utilization of resources – hacking HTTP protocol to run real-time applications involves the powerful and many expensive hardware resources such as servers. Websocket make it easier to develop the same applications with fewer resources
  • Reduced IT operations expensive – the decrease in the number of hardware required to run the real-time application means reduced expenses on acquiring and maintaining them.
  • Ability to use other protocols such as STOMP and AMQP – since the protocol is based on TCP protocol and can support other protocols as well; developers can take advantage of other protocols depending on the requirements of the application.

Tutorial History

Tutorial version 1: Date Published 2015-08-20



...