First recognized html5 WebSocket

1. WebSocket Concept

WebSocket is a network technology provided by HTML5 for full-duplex communication between the Client and the Server.

Duplex refers to two communication devices that allow two-way data transmission.

After the Client and Server establish a connection through WebSocket Protocol, both parties can transmit data to each other and both parties can close the connection.

2. HTTP Concept

HTTP Protocol is a stateless Protocol. After the Client and Server establish a connection through HTTP Protocol, the "request-response" mode is used for communication.

2.1 Client initiates a request

2.2 Server receives requests

2.3 establish a connection after three handshakes

2.4 Server Processes requests

2.5 The Server sends the result to the Client

2.6 disconnect

3. Since the Server does not actively send messages to the Client When HTTP is used, how does the Client obtain the latest message from the Server (except for refreshing the browser )?

Common methods include AJAX round robin, AJAX long polling, and HTML5 Server Sent Events (SSE)/EventSource.

(The following picture comes from this article: http://stackoverflow.com/questions/11077857/what-are-long-polling-websockets-server-sent-events-sse-and-comet? SCSI = 1)

3.1 AJAX round robin

Function doAjaxPolling () {$. ajax ({url: "http: // xxx", timeout: 1000*60, success: function (data) {/data is the message obtained from the Server}, complete: function () {setTimeout (doAjaxPolling (), 10*1000) ;}, error: function () {setTimeout (doAjaxPolling (), 10*1000 );}});}

The Client sends a request to the Server at intervals (for example, 10 s ).

3.2 AJAX long polling

Function doAjaxLongPolling () {$. ajax ({url: "http: // xxx", timeout: 1000*60, success: function (data) {/data is the message obtained from the Server}, complete: function () {doAjaxLongPolling () ;}, error: function () {doAjaxLongPolling ();}});}

When the Client sends a request to the Server, the Server does not process the request in time. Instead, the Server waits until a new message is generated to process the request, and then sends the result to the Client. After the Client receives the message, A request is sent to the Server again.

If the Server does not return a message within the specified time, the Client will disconnect the connection and send a new request to the Server.

 

3.3 HTML5 Server Sent Events (SSE)/EventSource

Var source = new EventSource ("http: // xxx"); source. onmessage = function (event) {// event. data is the message obtained from the Server };

Server Sent Events is similar to AJAX polling, except that the polling time is 3 s.

4. Use WebSocket to obtain new Server messages

When HTTP is used, messages are always transmitted individually. When WebSocket is used, messages can be transmitted in two directions after a connection is established between the Client and the Server. When the Server has new messages, messages can be sent directly to the Client.

5. WebSocket and HTTP keep-alive

HTTP keep-alive (HTTP persistent connection) uses the same TCP connection to send and receive multiple HTTP requests/response, rather than opening a new connection for each new request/response.

In HTTP 1.1, all connections are persistent connections by default, unless otherwise specified

Chrome's keep-alive value is 300 s

Tomcat can set the keepAliveTimeout attribute in the Conenctor tag of server. xml. By default, keepAliveTimeout = connectionTimeout is 20 s. If keepAliveTimeout is set to-1, the connection is permanently valid.

HTTP keep-alive, although the connection is also saved, is still in request-response mode, the Server cannot actively send messages to the Client

6. WebSocket demo

Open http://www.websocket.org/echo.html. you can see that the browser currently supports websocket. If yes, click Connect. After the connection is successful, click Send to Send the message.

At the bottom of the page, an example of WebSocket creation is provided.

7. WebSocket API

Http://dev.w3.org/html5/websockets/

Summarize the features of WebSocket:

The connection between the Client and Server can be used until one party closes the connection. This avoids the CPU and memory overhead caused by frequent establishment or disconnection. messages can be transmitted between the Client and Server in two directions.

 

References:

Http://www.websocket.org/

Http://zh.wikipedia.org/wiki/WebSocket

Http://zh.wikipedia.org/wiki/%E5%85%A8%E9%9B%99%E5%B7%A5

Http://zh.wikipedia.org/wiki/HTTP%E6%8C%81%E4%B9%85%E8%BF%9E%E6%8E%A5

Http://gabenell.blogspot.hk/2010/11/connection-keep-alive-timeouts-for.html

Http://stackoverflow.com/questions/7620620/whats-the-behavioral-difference-between-http-stay-alive-and-websockets

Http://stackoverflow.com/questions/17608551/how-is-websocket-different-than-http-with-header-connection-keep-alive-million

Http://stackoverflow.com/questions/10028770/html5-websocket-vs-long-polling-vs-ajax-vs-webrtc

Http://stackoverflow.com/questions/11077857/what-are-long-polling-websockets-server-sent-events-sse-and-comet? SCSI = 1