A, WebSocket Protocol Overview
- WebSocket is html5 specification introduced new capabilities for problem solving browser and server back-end two-way communication, using WebSocket technology, you can always push back a message to the front end, in order to ensure a unified front and back state, the traditional stateless HTTP protocol, this is a "can not do" is.
2. Before WebSocket appear, the traditional server-side push message to the browser technology include: ajax, flash, comet, java applet and so on. Without exception, these are long polling technique used, that is, from time to time to ask for backstage to get the latest status. Long polling is easy to implement, but the effect is also poor, often blind to call back, bring unnecessary overhead, and real-time performance can not be ensured, the background appears updated when the next poll front-end needs to know.
3. WebSocket protocol supports server and browser to establish long connection, both sides can send data to each other at any time, no longer be a question and answer controlled by the client. When implementing push function is mainly to send data to the client by the server.
4. In order to achieve the previous site push function, the methods used are polling. Polling is called at specific time intervals (e.g. 1 second), a Http request sent by the browser to the server, the server then returns the latest data to the client browser, to give an illusion of real-time push server. Since the Http Request Header (header request) long, and the data transmission may be very short to only a little, most of the bandwidth consumed by each request are consumed in the Header. Later that information from the Internet as well as improved polling method is called Comet, the use of Ajax. But this technology can achieve, although two-way communication.
two. WebSocket principle
(Polling) and push websocket browser (Browser) and server (Server) interaction length based on round robin comparison chart shown as follows:
Since the WebSocket protocol based on http protocol over, so the two have a lot of similarities. In fact, when using websocket protocol, the browser and the server beginning to establish or http connection, then after the protocol conversion from http to websocket, protocol conversion process is called Handshake (handshake), represents the service and client We have agreed to establish websocket agreement. It should be noted that, due to websocket the case of the new protocol, the browser and web server support in order to establish a successful connection. Under normal circumstances, when the establishment of the connection, the browser sends a HTTP request to the server, by including some additional information, which indicates that the desired protocol conversion from HTTP to the WebSocket. This additional information is actually adds a request header Update, as follows:
HTTP familiar with the children's shoes may have discovered, this is similar to a handshake request HTTP protocol, so a few more things.
This is the core of WebSocket, telling Apache, Nginx server such as: pay attention to you, I initiated the request to use the WebSocket protocol, hurry to help me find the corresponding processing assistant - rather than the old-fashioned HTTP.
First, Sec-WebSocket-Key is a Base64 encode the value, the browser is randomly generated, tells the server: peat, I do not flicker, I want to verify that you are not really WebSocket assistant.
Then, Sec_WebSocket-Protocol is a user-defined character string, the URL is used to distinguish the same, different services protocol needs. Simple to understand: Tonight I want to service A, make no mistake friends ~
Finally, Sec-WebSocket-Version tells the server you are using WebSocket Draft (protocol version), for the first time, WebSocket protocol still in Draft stage, all kinds of weird protocol has, but there are a lot of weird something different, original WebSocket protocol much what Firefox and Chrome are not using a version of the class, but a big problem. But fortunately now, it has been decided - we all use the same version: Waiter, I want a 13-year-old Oh → _ →
The server then returns the following things, said that it has received the request, the successful establishment of WebSocket it!
You can see major browsers and version currently supports webscoket protocol at the following URL:
Support html5 browser, usually provides a built-in js objects Websocket, developers can take advantage of this object websocket establish connection with the server. Especially in FireFox, this object in Firefox is MozWebSocket.
Whether a browser can support websocket by js code detection
Websocket object also provides several callback methods
When the connection is successfully created // called back
myWebSocket.onopen = function(evt) { alert("Connection open ..."); };
// receive a message when the server is called back
myWebSocket.onmessage = function(evt) { alert( "Received Message: " + evt.data); };
// called back when the connection is closed
myWebSocket.onclose = function(evt) { alert("Connection closed."); };