Take you to know WebSocket in HTML5

Get to know HTML5’s WebSocket

In the HTML5 specification, my favorite web technology is the WebSocket API, which is quickly becoming popular. WebSocket provides a welcome alternative to the Ajax technology we've been using for the past few years. This new API provides a way to efficiently push messages from the client to the server using simple syntax. Let’s take a look at HTML5’s WebSocket API: It can be used client-side, server-side. And there is an excellent third-party API called Socket.IO.

1. What is the WebSocket API in HTML5?

WebSocket API is the next generation client-server asynchronous communication method. This communication replaces a single TCP socket, using the ws or wss protocol, and can be used by any client and server program. WebSocket is currently standardized by the W3C. WebSocket is already supported by browsers such as Firefox 4, Chrome 4, Opera 10.70 and Safari 5.

The great thing about WebSocket API is that the server and client can push information to each other at any time within a given time range. WebSocket is not limited to Ajax (or XHR) communication, because Ajax technology requires the client to initiate a request, and the WebSocket server and client can push information to each other;

The clever thing about Ajax technology is that there is no designed way to use it. WebSocket is created for the specified target and used to push messages in both directions.

2. Usage of WebSocket API in HTML5

Only focus on the client-side API, because each server-side language has its own API. The code snippet below opens a connection, creates an event listener for the connection, disconnects the connection, message time, sends the message back to the server, and closes the connection.

The code is as follows:

// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080');
// 打开Socket 
socket.onopen = function(event){
  // 发送一个初始化消息
  socket.send('I am the client and I\'m listening!');
  // 监听消息
  socket.onmessage = function(event){
    console.log('Client received a message',event);
  };
  // 监听Socket的关闭
  socket.onclose = function(event){
    console.log('Client notified socket has closed',event);
  };
  // 关闭Socket.... 
  //socket.close()
};

Let’s take a look at the initialization snippet above. The parameter is the URL, and ws represents the WebSocket protocol. The onopen, onclose, and onmessage methods connect events to the Socket instance. Each method provides an event to represent the state of the Socket.

The onmessage event provides a data attribute, which can contain the Body part of the message. The Body part of the message must be a string that can be serialized/deserialized in order to transfer more data.

The syntax of WebSocket is very simple, and using WebSockets is incredibly easy...unless the client does not support WebSocket. IE browser currently does not support WebSocket communication. If your client does not support WebSocket communication, there are several fallback options for you to use:

Flash technology - Flash can provide a simple replacement. The most obvious disadvantage of using Flash is that not all clients have Flash installed, and some clients, such as iPhone/iPad, do not support Flash.

AJAX Long-Polling Technology - Using AJAX long-polling to simulate WebSocket has been in the industry for some time. It's a viable technique, but it doesn't optimize the message being sent. That is, it is a solution, but not the best technical one.

Since the current browsers such as IE do not support WebSocket, what should we do if we need to provide WebSocket event processing, return transmission, and use a unified API on the server side? Fortunately, Guillermo Rauch created Socket.IO technology.

3. WebSocket with Socket.IO

Socket.IO is a WebSocket API created by Guillermo Rauch, the chief technology officer of LearnBoost and LearnBoost Labs chief scientist. Socket.IO uses the detection function to determine whether to establish a WebSocket connection, an AJAX long-polling connection, or Flash, etc. Real-time applications can be created quickly. Socket.IO also provides a NodeJS API, which looks very much like the client API.

[Related recommendations]

1. Free h5 online video tutorial

2. HTML5 full version manual

3. php.cn original html5 video tutorial

4. An example of how to draw the five-star red flag with h5Canvas