Understanding HTML5 WebSocket

Understanding 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 on both client and server sides. And there is an excellent third-party API called Socket.IO.

1. What is WebSocket API?
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 the 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
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 message, sends the message back to the server, and closes the connection.
CODE:

// 创建一个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() 
};

WebSocket is a protocol for full-duplex communication on a single TCP connection that HTML5 began to provide.
In the WebSocket API, the browser and the server only need to perform a handshake action, and then a fast channel is formed between the browser and the server. Data can be transferred directly between the two.

The browser sends a request to the server to establish a WebSocket connection through JavaScript. After the connection is established, the client and the server can directly exchange data through the TCP connection.

After you obtain the Web Socket connection, you can send data to the server through the send() method, and accept the data returned by the server through the onmessage event.

The following API is used to create WebSocket objects.

var socket = new WebSocket(url,[protocol]);
The first parameter url in the above code specifies the URL of the link. The second parameter protocol is optional and specifies acceptable subprotocols.

WebSocket Properties

The following are the properties of the WebSocket object. Suppose we use the above code to create a socket object:
Socket.readyState The read-only property readyState indicates the connection status, which can be the following values:
1. 0-Indicates that the connection has not yet been established.
2. 1-Indicates that the link has been established and can be accessed.
3. 2-Indicates that the connection is being closed.
4. 3-Indicates that the connection has been closed or the connection cannot be opened.
Socket.bufferedAmount Read-only butteredAmount The number of UTF-8 text bytes that have been send() placed in the queue and are waiting for transmission, but have not yet been sent.

WebSocket events
The following are related events of the WebSocket object. Suppose we use the Socket:
event: Open Message Error Close
Incident processing program: Socket.onopen Socket.onMessage Socket.onClose
Description: Connect to create triggering client acceptance services Device data Triggered when a communication error occurs Triggered when the connection is closed

WebSocket method
The following are the relevant methods of the WebSocket object. Suppose we use the above code to create a Socket object:

Method: Socket.send() Socket.close()
Description: Send data using the connection Close the connection

The above is the detailed content of Understanding HTML5 WebSocket. For more information, please follow other related articles on the PHP Chinese website!