Introduce WebSocket in HTML5-

This article mainly introduces WebSocket in HTML5. This article explains what WebSocketAPI is in HTML5, how to use WebSocketAPI in HTML5, and how to use WebSocketAPI with Socket. IO WebSocket, NodeJS, and Socket. i/O joint development and other content. For more information, see Understand HTML5 WebSocket

In HTML5 specifications, my favorite Web technology is the rapidly becoming popular WebSocket API. WebSocket provides a popular technology to replace the Ajax technology we have been using over the past few years. This new API provides a method to effectively push messages from the client to the server using simple syntax. Let's take a look at HTML5 WebSocket API: it can be used on clients and servers. In addition, there is an excellent third-party API called Socket. IO.

1. What is the WebSocket API in HTML5?

WebSocket API is the asynchronous communication method of the Next Generation client-server. This communication replaces a single TCP socket. It uses ws or wss protocol and can be used for any client or server program. WebSocket is currently standardized by W3C. WebSocket has been supported by browsers such as Firefox 4, Chrome 4, Opera 10.70, and Safari 5.

The greatest advantage of WebSocket APIS is that servers and clients 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 requires the client to initiate a request, the WebSocket server and client can push information to each other. XHR is restricted by the domain, webSocket allows cross-origin communication.

Ajax is clever, but it is not designed to be used. WebSocket is created for the specified destination and used to push messages in two directions.

Ii. WebSocket API usage in HTML5

Only focus on the client API, because each server language has its own API. The following code snippet is used to open a connection, create an event listener for the connection, disconnect the connection, send the message to the server, and close the connection.

The Code is as follows:

// Create a Socket instance var socket = new WebSocket ('ws: // localhost: 100'); // open the Socket socket. onopen = function (event) {// send an initialization message socket. send ('I am the client and I \' m listening! '); // Listen to the message socket. onmessage = function (event) {console. log ('client received ed a message', event) ;}; // listen to the Socket closed socket. onclose = function (event) {console. log ('client notified socket has closed ', event) ;}; // close the Socket .... // socket. close ()};

Let's take a look at the above initialization snippet. The parameter is URL, and ws indicates WebSocket protocol. The onopen, onclose, and onmessage Methods connect the event to the Socket instance. Each method provides an event to indicate the status of the Socket.

The onmessage event provides a data attribute that can contain the Body of the message. The Body of a message must be a string that can be serialized or deserialized to transfer more data.

WebSocket syntax is very simple. It is incredibly easy to use WebSockets ...... Unless the client does not support WebSocket. Internet Explorer currently does not support WebSocket communication. If your client does not support WebSocket communication, you can use the following backup solutions:

Flash technology-Flash can provide a simple replacement. Flash is not installed on all clients, and some clients, such as iPhone/iPad, do not support Flash.

AJAX Long-Polling technology-it has been some time in the industry to use AJAX long-polling to simulate WebSocket. It is a feasible technique, but it cannot optimize the sent information. That is to say, it is a solution, but it is not the best technical solution.

Currently, browsers such as IE do not support WebSocket. What should we do if we want to provide WebSocket event processing, return transmission, and use a unified API on the server? Fortunately, Guillermo Rauch creates a Socket. IO technology.

3. WebSocket with Socket. IO

Socket. IO is a WebSocket API created by Guillermo Rauch. Guillermo Rauch is the chief technology officer of LearnBoost and Chief Scientist of LearnBoost labs. Socket. IO uses the detection function to determine whether to establish a WebSocket connection, AJAX long-polling connection, or Flash. Allows you to quickly create real-time applications. Socket. IO also provides a NodeJS API, which looks very similar to the client API.

【