Websocke Past Life

Note: The following content from the online, I through processing and finishing.

1, ask what to use Websocke?

Browser already supports the HTTP protocol, why develop a new websocket protocol? We know that the HTTP protocol is a one-way network protocol , and after the connection is established, it only allows Browser/ua (useragent) to send the requested resource to webserver, webserver to return the corresponding data . and webserver can not actively push data to Browser/ua, originally so design HTTP protocol also has reason, assuming webserver can actively push data to Browser/ua, that Browser/ua is too vulnerable to attack, Some advertisers will also take the initiative to send some advertising information inadvertently forcibly transferred to the client, this can not be said to be a disaster. So what is the problem with a one-way HTTP protocol for today's web site or Web application development?

In the HTTP protocol to achieve browser to obtain server-side real-time data requirements (such as: stock real-time trading), often use the following two scenarios:

1) Polling

This way is through Browser/ua timed to send HTTP to the Web server get request, the server received the request, the latest data sent back to the client (Browser/ua), Browser/ua get the data, it is displayed, Then repeat the process on a regular basis. Although this can meet the requirements, but there are still some problems, such as the Web server in a certain period of time there is no updated data, but Browser/ua still need to send a regular GET request to ask, then the Web server will transfer the old data back, browser/ The UA shows the unchanged data, which obviously wastes network bandwidth and wastes CPU utilization. This can be mitigated if the period of the browser send GET request is larger, but it does not guarantee the real-time nature of the data in the Web application if the data is updated very quickly on the Web server side.

2) long polling

< Span style= "Color:rgb (51,51,51); font-size:14px; line-height:26px "> browser/ UA sends a GET request to the Web server, when the Web server can do two things, first, if the server side has new data needs to be transmitted, immediately send the data back to the Browser/ua,browser/ua received data, immediately sent a GET request to the Web server Second, if there is no new data to be sent on the server side, unlike the polling method, the server does not immediately send a response to Browser/ua, but instead keeps the request in response to the request when new data arrives, and of course, If the server's data is not updated for a long period of time, the GET request will time out, Browser/ua receive a timeout message, and then immediately send a new GET request to the server . Then loop through the process in turn.

This approach, although to some extent, reduces the network bandwidth and CPU utilization problems, but there are still defects, such as the assumption that the server side of the data update rate is faster, the server after transmitting a packet to browser must wait for the next get request of browser arrival, In order to pass the second updated packet to browser, so that the browser display real-time data the fastest time is 2xRTT (round-trip time), and in the case of network congestion, this should not be acceptable to the user. In addition, because HTTP packet header data is often large (usually more than 400 bytes), but the actual data required by the server is very small (sometimes only 10 bytes or so), such a packet on the network periodic transmission, it is inevitable that network bandwidth is a waste.

2. Introduction of WebSocket protocol

The websocket protocol is a two-way communication protocol that is built on top of TCP and transmits data over TCP as HTTP, but it differs from HTTP by a maximum of two points:

1.WebSocket is a two-way communication protocol, after establishing a connection, WebSocket server and Browser/ua can actively send or receive data to each other, like a socket, The difference is that WebSocket is a simple analog socket protocol based on the web;

2.WebSocket needs to be connected by a handshake, similar to TCP It also requires a handshake connection between the client and server to communicate with each other after the connection is successful.

Here is a brief explanation of the WebSocket handshake process:

When the Web application calls the new WebSocket (URL) interface, browser begins the process of establishing a handshake connection with the Webserver address as a URL.

1. Browser with the WebSocket server through a TCP three handshake to establish a connection, if the connection fails, then the subsequent procedure will not be executed, the Web application will receive an error message notification.

2. After TCP establishes the connection successfully,Browser/ua transmits the WebSocket supported version number through the HTTP protocol , the word version number of the Protocol, the original address, the host address and so on some column fields to the server side.

<span style= "Font-family:comic Sans MS;" >get/chat http/1.1  Host:server.example.com  upgrade:websocket  connection:upgrade  sec-websocket-key:dghlihnhbxbszsbub25jzq==  origin:http://example.com  sec-websocket-protocol:chat, Superchat  sec-websocket-version:13  </span>

3. The websocket server receives the handshake request sent by Browser/ua , if the packet data and format is correct, the client and server side of the protocol version number match, and so on, accept this handshake connection, and give the corresponding data reply, The same reply packets are also transmitted using the HTTP protocol.

<span style= "Font-family:comic Sans MS;" >http/1.1 101 Switching Protocols  upgrade:websocket  connection:upgrade  sec-websocket-accept: s3pplmbitxaq9kygzzhzrbk+xoo=  sec-websocket-protocol:chat  </span>

4. Browser received the server reply to the packet, if the packet content, format is not a problem, it means that the connection is successful, triggering the OnOpen message, the web developer can at this time through the send interface to the server to send data. Otherwise, the handshake connection fails, and the Web application receives the ONERROR message and knows why the connection failed.

3. Websocke and HTTP relationships:

WebSocket is TCP-based like the HTTP protocol, so they're all reliable protocols. , the WebSocket send function called by the Web Developer is eventually transmitted through the TCP system interface in the implementation of the browser. WebSocket and the HTTP protocol belong to the application layer protocol, so what is the relationship between them? The answer is yes,websocket in the handshake connection, the data is transmitted through the HTTP protocol , as we saw in the previous section of the "Get/chat http/1.1", where the use of only the HTTP protocol some simple fields. However, after the connection is established, the actual data transfer phase is not required to participate in the HTTP protocol.

4, Websocke browser side of the API:

<span style= "Font-family:comic Sans MS;" >var wsserver = ' Ws://localhost:8888/demo '; The server address, here is the WS-Start, if the security Websocke is used Wssvar websocket = new WebSocket (wsserver); Create WebSocket Object  websocket.send ("Hello");//Send message to Server  alert (websocket.readystate);//view websocket current status  Websocket.onopen = function (evt) {  //connection already established  };  Websocket.onclose = function (evt) {  //closed connection  };  Websocket.onmessage = function (evt) {  //Receive Server message, use Evt.data extract  };  Websocket.onerror = function (evt) {  //generates an exception  };  </span>

5, Wbsocke Server API Description:

Because WebSocket is a communication protocol, the Protocol needs to be implemented by the client (which the browser has already implemented for us) and the server side to complete the websocket communication. So the server side needs to rely on some LIB package implementation.

For details, see:

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Websocke Past Life