Web sockets will eventually replace Ajax polling

As the next generation web standard, HTML5 has many compelling new features, such as:Canvas, local storage, multimedia programming interface, WebSocket and many more. Among these, WebSocket, known as "TCP of the Web", is attracting the attention of developers.The advent of WebSocket enabled the browser to support Socket, thereby providing a bi-directional channel based on the TCP connection between the browser and the server. Web developers can easily create real-time web applications using WebSocketThe developer's hands have since added a magical weapon. This article first introduces the basic concepts of HTML5 WebSocket and the problems that the specification attempts to solve. Then the basic principles and the programming interface of WebSocket are presented. Next, a simple case is used to demonstrate how to implement a WebSocket application and to show how WebSocket achieves perfect unity in terms of powerful functionality and ease of programming. Finally, the current status, limitations, and future prospects of WebSocket support by mainstream browsers are presented.


The real-time web application dilemma

The information interaction process of a web application typically consists of the client sending a request through the browser. The server receives and verifies the request, processes the request, and returns the result to the client. The client browser then displays the information. This mechanism changes the information. Applications that are not particularly frequent may still be fine, but for applications with high real-time demands, such as online games, online stocks, device monitoring, online news broadcasts, RSS subscription pushs, etc., if the client browser is ready If this information is displayed, it may be out of date on the server side. Therefore, synchronization of client and server information is a key element of real-time web applications and also a problem for web developers. Before the WebSocket specification came out, developers wanted to implement these real-time web applications and had to make some trade-offs. Among them, polling and comet technology are most commonly used, and comet technology is actually an improvement on polling technology. It can be broken down into two implementations, one is the long polling mechanism and the other is called streaming technology. We briefly introduce these technologies below:

Survey:

This is the earliest solution for real-time web applications. The client sends requests to the server at a specific time interval and keeps the client and server in sync with frequent requests. The biggest problem with this synchronization scheme is that when the client initiates a request to the server at a fixed frequency, the server-side data may not be updated, resulting in a lot of unnecessary network transmission. So this is a very inefficient real-time transmission program.

Long survey:

Long polling is an improvement and improvement on timing polling and is used to reduce invalid network transmission. If no data is updated on the server side, the connection will be maintained for a period of time until the data or status changes, or until the time expires. This mechanism reduces the invalid interaction between the client and the server. Of course, if the data on the server changes very frequently, this mechanism does not have any significant performance improvement compared to scheduled queries.

flow:

The streaming technology solution usually uses a hidden window on the client side to send a long connection request to the server. The server responds upon receiving this request and continuously updates the connection status to ensure that the connection between the client and the server is not expired. This mechanism enables the information from the server to be continuously transmitted to the client. There is a small problem with this mechanism in the user experience. It is necessary to develop different solutions for different browsers in order to improve the user experience. At the same time, this mechanism is an excellent test for server-side resources under the condition of a relatively large parallelism.

When you combine these different solutions, you will find that the so-called real-time technologies we currently use are not real-time technologies. They only use Ajax to simulate real-time effects and every time the client and server interact it is an HTTP request and response process, and each HTTP request and response contains full HTTP header information, reducing the amount of data transferred each time and The programming implementation of client and server in these solutions are increased. This is more complicated. In actual applications, developers often need to establish two HTTP connections to simulate two-way communication between the client and the server. A connection is used to handle the data transfer from the client to the server. A connection is used to process the data transfer from the server to the client, which inevitably increases the complexity of the programming and also increases the load on the server, which limits the scalability of the application system.

The rescue of WebSocket

HTML5 WebSocket replaces polling and Comet technology, so that the client browser has the real-time communication functions of the desktop system under the C / S architecture. The browser sends a request to establish a WebSocket connection to the server through JavaScript. After the connection has been established, the client and server can exchange data directly via the TCP connection. Since a WebSocket connection is essentially a TCP connection, it offers great performance advantages in terms of data transmission stability and data transmission volume compared to polling and Comet technologies. The Websocket.org website has conducted a detailed test and comparison of the traditional query method and the WebSocket invocation method. A simple web application is implemented using the query method or the WebSocket method. Here are their test results:

Figure 1. Comparison of network load between polling and WebSocket implementation

This picture clearly shows that the WebSocket solution offers a major performance advantage over the conventional Ajax polling solution with increased data traffic and increased workload. Because of this, we believe that WebSocket is the preferred solution for future real-time web applications.

WebSocket specification
The WebSocket protocol is essentially a TCP-based protocol. To establish a WebSocket connection, the client browser must first initiate an HTTP request to the server. This request differs from the usual HTTP request and contains some additional header information. The additional header information "Upgrade: WebSocket" indicates that this is an application protocol. When the HTTP request is updated, the server parses these additional headers and then generates a response message to return to the client. The WebSocket connection between the client and the server is established and both parties can freely transmit information over this connection channel. The connection will be established.Continue until either the client or the server actively closes the connection.

Let's introduce the WebSocket specification in detail. Since this specification is still in the drafting stage and the version is changing relatively quickly, we choose draft-hixie-thewebsocketprotocol-76 to describe the WebSocket protocol. Since this version is currently better supported in some popular browsers such as Chrome, FireFox, and Opera, the content may vary slightly when you reference the newer version.

A typical WebSocket request and response example looks like this:

Listing 1. WebSocket handshake protocol

These requests are very similar to normal HTTP requests, but some are closely related to the WebSocket protocol. We need to briefly introduce this request and response information. "Upgrade: WebSocket" means that this is a special HTTP request. The purpose of the request is to upgrade the communication protocol between the client and the server from the HTTP protocol to the WebSocket protocol. The information requested from the client to the server contains header information such as "Sec-WebSocket-Key1", "Sec-WebSocket-Key2" and "[8-byte security key]". This is the handshake information that the client browser must provide to the server. The server parses this header information and generates a 16-bit security key based on the information during the handshake process and returns it to the client to indicate that the server has received it. In response to the client's request, agree to establish a WebSocket connection. As soon as the connection is established, the client and server can transmit data over this channel in both directions.

In the actual development process, we first need to create a server that implements the WebSocket specification in order to use the WebSocket interface to create a web application. The server-side implementation is not restricted by the platform or the development language and only needs to conform to the WebSocket specification. Some more sophisticated server-side WebSocket implementations, such as

Kaazing WebSocket Gateway - a Java implemented WebSocket Server
mod_pywebsocket - A WebSocket server implemented in Python
Netty - a network framework implemented by Java that supports WebSocket
node.js - a server-side JavaScript framework that supports WebSocket

If the above WebSocket server implementation cannot meet your business needs, developers can fully implement a server according to the WebSocket specification. In the "WebSocket Actual Combat" section, we will use the C # language on the Microsoft .NET platform to create a simple WebSocket server and then a simple real-time chat system.


WebSocket JavaScript interface

The previous section introduced the WebSocket specification, which mainly introduced the WebSocket handshake protocol. The handshake protocol is usually an issue that we need to consider when creating the server-side implementation of WebSocket and providing WebSocket support for browsers. The WebSocket JavaScript client interface for web developers is very simple. The WebSocket JavaScript interface is defined below:

Listing 2. WebSocket JavaScript definition

The URL attribute represents the network address of the WebSocket server, the protocol is usually "ws", the send method sends data to the server and the close method closes the connection. In addition to these methods, there are some very important events: onopen, onmessage, onerror, and onclose. We borrowed a picture on the Nettuts website to visualize the WebSocket interface:

Figure 2. WebSocket JavaScript interface

The following is simple JavaScript code that shows how to make a WebSocket connection and get data:

Listing 3. Example of JavaScript code for establishing a WebSocket connection

Browser support
The following is the support status of HTML5 WebSocket in mainstream browsers:

The following is an introduction to the actual battle with WebSocket:WebSocket fight


Reference: https: //www.ibm.com/developerworks/cn/web/1112_huangxa_websocket/index.html