HTML5 WebSocket: the unveiling of the next Web communication revolution, html5websocket

HTML5 WebSocket: the unveiling of the next Web communication revolution, html5websocket

Let's take a look at the changes in HTML 5's current Web communication. HTML 5 Web Socket defines a full-duplex communication channel through a single Socket on the Web, which significantly improves Web communication.

HTML5 WebSocket: unveiling of the next Web communication revolution

 

51CTO: 51CTO has reported many cutting-edge technologies and applications of HTML 5, for example, HTML 5 video and audio elements, HTML 5 Web SQL Database, HTML5 File API, and how to build an HTML 5 page from scratch. These are all HTML 5 upgrades or extensions to the current standard Web development technology. Today, 51CTO will show you another side of HTML 5-HTML 5 Web Socket and its changes to current Web communication.

Recently, rumors about HTML 5 Web Socket are everywhere. It defines a full-duplex communication channel through a single Socket on the Web,HTML 5 Web Socket is not an enhanced version of ordinary HTTP Communication, it represents a huge progress, especially for real-time, event-driven Web Applications.

Ian Hickson, a Google Engineer, said, "The number of data bytes has been sharply reduced to 2 bytes, And the latency has been reduced from 150 milliseconds to 50 milliseconds. In fact, these two factors are enough to interest Google ". By simulating full-duplex connections in a browser, HTML 5 Web Socket significantly improves Web communication.

Let's look at how HTML 5 Web Socket reduces unnecessary network traffic and latency compared with traditional solutions.

Current Web communication-Headache round robin(Polling)

Generally, when a browser accesses a webpage, it sends an HTTP request to the Web server hosting the webpage. The Web server recognizes the request and returns a response. For example, when a browser renders a page, the response may expire, such as stock prices, news reports, ticket sales, traffic models, and medical device readings, if you want to obtain the latest "real-time" information, you can refresh the page manually, but obviously this is not the best solution.

Currently, the real-time Web program is mainly centered on polling and other server push technologies. The most famous is Comnet, which delays the end of HTTP response, comnet-based push is usually implemented using JavaScript combined with Long Polling or stream connection policies.

When polling is used, the browser regularly sends HTTP requests and immediately receives responses. This is the first attempt to deliver real-time information. Obviously, if you know the time interval of message transmission, this is a good method, because you can synchronize client requests when the information on the server is available, but real-time data is often unpredictable and may inevitably generate unnecessary requests, as a result, many connections are opened, but some connections that do not need to be closed are closed.

When long polling is used, the browser sends a request to the server, and the server keeps the request open within the specified period. If a notification is received during this period, the server sends a response containing the message to the client, if no message is received during this period, the server sends a response to terminate the request. The most important thing is to understand that when your information capacity is very high, long polling does not provide any performance improvement compared with traditional polling. In fact, it may be worse, because long polling may get out of control and enter an endless loop.

When a stream is used, the browser sends a complete request, but the server sends a response, saves the open status, and keeps updating it to keep it open (or keep it open for a period of time ), when a message is ready for sending, the response is updated, but the server does not send an end response. Therefore, the connection remains open, and the subsequent message can continue to use this connection. However, the stream is still encapsulated in HTTP, which blocks the content in the buffer zone selected by the firewall and proxy server for response. Therefore, the message transmission time is extended. Many stream Comnet solutions have switched to long polling. In addition, TLS (SSL) connections can be used to shield responses from the buffer zone, but in this case, each connection consumes more server resources.

Eventually, all these methods provide real-time data, including HTTP request and response headers, including many additional and unnecessary header data, and most importantly, full-duplex connections require not only downstream connections from the server to the client. To simulate full-duplex communication over half-duplex HTTP, many current solutions use two connections: One downstream connection and one upstream connection. Maintaining and coordinating these two connections requires a lot of system overhead and increases complexity. In short, HTTP is not designed for real-time and full-duplex communication. 1 shows the complexity of building a Comnet Web application, it uses the publish/subscribe mode from the back-end data source to display real-time data based on half-duplex HTTP.

Figure 1: complexity of the Comnet Program

When you try to scale out those Comet solutions, the situation becomes worse, simulating HTTP-based two-way communication is prone to errors, even if the end user feels something looks like a real-time Web application, however, the cost of such "real-time" experience is very high, and more delay waiting time is required. Unnecessary network traffic and CPU performance will be slowed down.

 

HTML 5 Web Socket--Save

HTML 5 Web Socket is defined in the HTML 5 standard communication section, which represents the next evolution of Web communication: A full-duplex, bidirectional communication channel is implemented through a single Socket. HTML 5 Web Socket provides a real standard that you can use to build scalable real-time Web applications. In addition, because it provides a browser Socket that eliminates many issues with the Comet solution, Web Socket significantly reduces system overhead and complexity.

To establish a Web Socket connection, the client and server must be upgraded from HTTP to WebSocket during the initial handshake, as shown in the following example:

Example 1: WebSocket handshake (Browser request, server response)

1. GET/text HTTP/1.1/r/n
2. Upgrade: WebSocket/r/n
3. Connection: Upgrade/r/n
4. Host: www.websocket.org/r/n
5. .../R/n
6. HTTP/1.1 101 WebSocket Protocol Handshake/r/n
7. Upgrade: WebSocket/r/n
8. Connection: Upgrade/r/n
9. .../R/n

After the connection is established, the WebSocket data frame can be transmitted between the client and the server in full duplex mode. At the same time, both the text and binary frames can be sent in any direction, the minimum frame size is 2 bytes. In a text frame, each frame starts at 0x00 and stops at 0 x FF bytes, and the data is encoded in UTF-8. WebSocket text frames use Terminator, while binary frames use a length prefix.

Note: Although WebSocket supports multiple clients, raw data cannot be transmitted to JavaScript because JavaScript does not support the byte type. Therefore, if the client is JavaScript, binary data is ignored, but it can be passed to clients that support the byte type.

Confrontation between Comet and HTML 5 Web Socket

What people are most concerned about is how HTML 5 Web Socket reduces unnecessary network traffic and latency. We will know how to compare a polling application with a Web Socket application.

For the round-robin example, I created a simple Web application where a Web page uses the traditional publishing/subscription mode to request real-time stock data from the RabbitMQ message proxy, it is implemented by polling a Java Servlet hosted on a Web server. The RabbitMQ message proxy receives data from a fictitious stock price source that constantly updates the price, the webpage connects to and subscribes to a specific stock channel (a topic on the message proxy), and uses XMLHttpRequest to perform polling once every second. When an update is received, perform some calculations and then display the stock data in the table shown in figure 2.

Figure 2: A JavaScript stock market application

Note: The back-end stock source actually produces a large number of stock price updates per second. Therefore, it is better to use the round robin method once per second than the long polling method. Long polling will generate many consecutive round robin, polling will more effectively prevent incoming updates.

All of this looks good, but if you look at it carefully, you will find that such applications have serious problems, for example, using Firefox's Firebug plug-in (allows you to debug webpages and monitor page loading and script execution time), you can see that there is a GET request hitting the server every second. Open Live HTTP Headers (another Firefox plug-in that displays real-time HTTP message header traffic) and reveal that the number of message header overhead associated with each request is astonishing. The following two examples show the HTTP message header data of a request and response.

Example 2: HTTP Request Header

1. GET/PollingStock // PollingStock HTTP/1.1
2. Host: localhost: 8080
3. User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv: 1.9.1.5) Gecko/20091102 Firefox/3.5.5
4. Accept: text/html, application/xhtml + xml, application/xml; q = 0. 9, */*; q = 0. 8
5. Accept-Language: en-us
6. Accept-Encoding: gzip, deflate
7. Accept-Charset: ISO-8859-1, UTF-8; q = 0. 7, *; q = 0. 7
8. Keep-Alive: 300
9. Connection: keep-alive
10. Referer: http://www.example.com/PollingStock/
11. Cookie: showInheritedConstant = false;
    ShowInheritedProtectedConstant = false;
    ShowInheritedProperty = false;
    ShowInheritedProtectedProperty = false;
    ShowInheritedMethod = false;
    ShowInheritedProtectedMethod = false;
    ShowInheritedEvent = false;
    ShowInheritedStyle = false;
    ShowInheritedEffect = false

Example 3: HTTP Response Header

1. HTTP/1.x 200 OK
2. X-Powered-By: servlets/2.5
3. Server: Sun Java System Application Server 9.1 _ 02
4. Content-Type: text/html; charset = UTF-8
5. Content-Length: 21
6. Date: Sat, 07 Nov 2009 00:32:46 GMT

The total overhead of HTTP request and response header information includes 871 bytes, and does not include any data. Of course, this is just an example. Your message header data may be less than 871 bytes, however, I have also seen more than 2000 bytes of message header data. In this example, the stock topic message data is about 20 characters long.

What happens when you deploy such a program on a large scale to users? We use three different use cases to observe the network throughput required for the HTTP request and response header data associated with the polling application.

Case A: 1000 client, polling once per second
Network throughput (871x1000) = 871000 bytes = 6968000 bits/s (6.6 Mbps)

Case B: 10000 client, polling once per second
Network throughput (871x10000) = 8710000 bytes = 69680000 bits/s (66 Mbps)

Case C: 100000 client, polling once per second
Network throughput (871x100000) = 87100000 bytes = 696800000 bits/s (665 Mbps)

This is an unnecessary huge network throughput. In this case, we can use HTML 5 Web Socket. I used HTML 5 Web Socket to reconstruct the application and add an event handler to the webpage, synchronously listen to the stock update messages from the message proxy. Each message is a Web Socket frame with only two bytes overhead (instead of 871 bytes). Let's take a look at the impact on network throughput.

Case A: 1000 client, polling once per second
Network throughput (2x1000) = 2000 bytes = 16000 bits/s (0.015 Mbps)

Case B: 10000 client, polling once per second
Network throughput (2x10000) = 20000 bytes = 160000 bits/s (0.153 Mbps)

Case C: 100000 client, polling once per second
Network throughput (2x100000) = 200000 bytes = 1600000 bits/s (1.526 Mbps)

As you can see in Figure 3, compared with the polling solution, HTML 5 Web Socket reduces unnecessary network traffic.

 

Figure 3: Compare the network throughput between poll and WebSocket applications

How about delay reduction? As you can see in figure 4, the upper part of the figure shows the latency of the half-duplex round-robin solution. Here we assume that it takes 50 milliseconds for the message to be transmitted from the server to the browser. Many extra latencies are introduced in the round-robin mode, when the response is complete, a new request has been sent to the server, which takes 50 milliseconds. During this period, the server cannot send any messages to the browser, resulting in additional server memory consumption.

Figure 4 the lower half shows the latency caused by the Web Socket method. Once the connection is upgraded to the Web Socket, the message transmission will be more timely, and it will still take 50 milliseconds to transmit the message from the server to the browser, however, the Web Socket connection remains open and no longer needs to send requests to the server.

Figure 4: latency comparison between polling and Web Socket applications

HTML5 Web Socket and Kaazing WebSocket Gateway

Currently, only Google's Chrome browser supports HTML 5 Web Socket, but other browsers will also support it. To solve this problem, the Kaazing Web Socket Gateway provides a complete Web Socket Simulation for all old browsers (IE 5.5 +, Firefox 1.5 +, Safari 3.0 +, and Opera 9.5 +, therefore, you can use the HTML 5 Web Socket API now.

Web Socket is amazing, but what can be done after you have a full-duplex Socket connection in your browser? To fully utilize all the functions of HTML 5 Web Socket, Kaazing provides a ByteSocket library for Binary communication and a more advanced library for protocols such as Stomp, AMQP, XMPP, and IRC, they are all built on Web Socket.

For example, if you use a more advanced library for the Stomp or AMQP protocol, you can directly communicate with the backend message proxy such as RabbitMQ by directly connecting to the service, no additional Application Service Logic is required to convert these two-way, full-duplex TCP backend protocols into non-bidirectional, half-duplex HTTP connections, because the browser itself can understand these protocols.

Figure 5: Kaazing Web Socket gateway extends TCP-based messages with better performance

Summary

HTML 5 Web Socket makes a huge step forward in real-time Web application scalability. As you can see in this article, HTML 5 Web Socket can provide 5000: 1 Or-reducing unnecessary HTTP header traffic and communication latency Based on the HTTP header size-, which is not a progressive improvement but a revolutionary leap.

The Kaazing Web Socket gateway enables HTML 5 Web Socket code to run in all browsers. It also provides additional protocol libraries that allow you to take full advantage of the full-duplex Socket connection function provided by HTML 5 Web Socket, directly communicates with the backend service.