WebSocket is a mechanism for efficient two-way communication between the server and the client. Can solve the data real-time requirements of high-quality applications, such as: online chat, online education, stocks or positioning.
A: WebSocket produce background:
To address this real-time problem, there are several alternatives:
1. Polling
Concept: The client sends a request to the server through a certain interval of time to keep the data synchronization between client and server;
Cons: When a client sends a request to the server at a fixed frequency, the server-side data may not be updated, resulting in a lot of unnecessary requests, wasted bandwidth, inefficient
2. Comet technology (long polling)
Concept: Long polling after the client sends the request, the server retains the response and maintains the connection, and can return the response from the server at any point in time. The client then establishes a connection to the server again while it receives the response. Example: WEBQQ
Cons: Long polling avoids unnecessary communication processes compared to polling, but also needs to be connected again when updates are available
3. Comet Technology (Stream technology)
Concept: Make a connection by making the first request from the client, and return the response from the server to the client while maintaining the connection
Cons: Server maintenance A long connection increases overhead
The communication data flow of traditional real-time technology is as follows:
Second: The operating mechanism of WebSocket
1, WebSocket only when the handshake connection is used to borrow the HTTP protocol header, the communication part after the successful connection is TCP-based connection, and its only relationship with HTTP is that its handshake request can be as an upgrade request (Upgrade requests) via HTTP Server explanation
2. WebSocket Request Response Client Server interaction diagram
Two-way communication can be done with only one handshake.
3. Advantages of WebSocket Protocol:
1. Header
The header to communicate with each other is very small-about 2 Bytes
2. Server Push
Server push, the server no longer passively receives the browser request to return the data, but the new data when the active push to the browser
API for 4.websocket
There are two methods in WebSocket:
1. Send () sends data to the remote server
2. Close () closes the websocket link
WebSocket also defines several listener functions.
1. OnOpen triggers this event when a network connection is established
2. onerror triggers this event when a network error occurs
3. OnClose trigger This event when WebSocket is closed
4, OnMessage when the WebSocket received the message from the server to trigger the event, is also the most important communication in a listening event.
5. WebSocket also defines a readystate attribute:
1, connecting (0) WebSocket is trying to establish a connection to the server
2, OPEN (1) WebSocket and the server has established a connection
3, CLOSING (2) WebSocket shutting down the connection to the server
4, CLOSED (3) WebSocket has closed the connection to the server
A simple case of client-to-server communication
<! DOCTYPE html>The direct browser opens the file to run.
Press F12 for a look.
The protocol is a WS-Protocol and the status is 101 connected.
Four, the following is the production of a simple chat room function
Need Nodejs for server background
Package.json file (download Nodejs-websocket module)
1234567891011121314 |
{
"name"
:
"demo2"
,
"version"
:
"1.0.0"
,
"description"
:
""
,
"main"
:
"wsServer.js"
,
"scripts"
: {
"test"
:
"echo \"Error: no test specified\" && exit 1"
},
"author"
:
""
,
"license"
:
"ISC"
,
"dependencies"
: {
"nodejs-websocket"
:
"^1.7.1"
}
}
|
<! DOCTYPE html>Wsserver.js
var ws = Require ("Nodejs-websocket"); var Clientcount=0;var server = Ws.createserver (function (conn) { Console.log ("New connection") clientcount++; conn.nickname= ' user ' +clientcount; Boradcast (conn.nickname+ ' comes in '); Trigger Conn.on ("Text", function (str) { boradcast (conn.nickname+ ' says: ' +str ') after receiving the message from the server; }) Close connection Conn.on ("Close", function (code, reason) { console.log ("Connection closed"); Boradcast (conn.nickname+ ' left '); }) Conn.on ("Error", function (err) { Console.log ("Handle err"); Console.log (err); })}). Listen (8001); function Boradcast (str) { Server.connections.forEach (function (connection) { Connection.sendtext (str);} )}
Run Node Wsserver.js
After running node, open the browser to browse the file directly, a file represents a user, so you can talk on both sides.
The new agreement of the H5 is still very interesting.
Recommend to see: http://www.imooc.com/learn/861 websocket case explanation.
Source: http://www.cnblogs.com/heyujun-/p/7563077.html
WebSocket agreement and case "turn"