Zhou Kee 1--nice to meet Websocket

Week after week, time flies, every weekend is very happy but very confused. Happy is not work, the wandering is what they learned this week, their skills have not improved, how to deal with this ever-changing society ... This week, I decided to write weekly notes about what I did and what I learned every week.

This week's work on Developing IM (live chat) modules, the technology to use is websocket. Because just contact WebSocket, oneself is also groping side to do ...

1. What is WebSocket?

WebSocket is the HTML5 of a new protocol to solve the real-time communication between the client and the service side of the technology. The essence is the first handshake through the HTTP/HTTPS protocol to create a TCP connection for data exchange, after which the server and the client through this TCP connection for real-time communication, can better save the resources and bandwidth of servers and achieve real-time communication purposes. But the biggest difference between it and HTTP is:

WebSocket is a two-way communication protocol. After the connection is established, both the WebSocket server and the client can proactively send or receive data to each other, just like a socket, and websocket need to establish a connection like TCP to communicate with each other before the connection succeeds.

Its biggest feature is that the server can proactively push information to the client, the client can also actively send information to the server, is a true two-way equality dialogue, is a server push technology.

Other features include:

(1) based on the TCP protocol, the server-side implementation is relatively easy.

(2) Good compatibility with HTTP protocol. The default port is also 80 and 443, and the handshake phase uses the HTTP protocol, so the handshake is not easy to block, through a variety of HTTP proxy server.

(3) The data format is lighter, the performance overhead is small, and the communication is efficient.

(4) You can send text, or you can send binary data.

(5) The client can communicate with any server without the same origin limitation.

(6) The protocol identifier ws is (if encrypted wss ), the server URL is the URL.

WS://Example.com:80/some/path

2, WebSocket of the reference scene

Social chats, multi-player games, barrage, collaborative editing, real-time quotes for stock funds, live updates, video conferencing/chat, location-based applications, online education, smart homes, etc., all require high-real-time scenarios.

3, the client's simple instance

　　The use of WebSocket is quite simple.

Here is an example of a Web page script (click here to see the results of the operation), basically a glance to understand.

varWS =NewWebSocket ("wss://echo.websocket.org");//callback after connection is establishedWs.onopen =function(evt) {Console.log ("Connection Open ..."); Ws.send ("Hello websockets!");};//callback after receiving a service-side (websocket) messageWs.onmessage =function(evt) {Console.log ("Received Message:" +evt.data); Ws.close ();};//after closing a connected callback functionWs.onclose =function(evt) {Console.log ("Connection closed.");}; 

4, the client's API

　　the API for the WebSocket client is as follows.

4.1 WebSocket Constructors

　　The WebSocket object is used as a constructor for creating a new WebSocket instance.

// after executing the following statement, the client connects to the server.  varnew WebSocket (' ws://localhost:8080 ');

For a list of all properties and methods of the instance object, see here.

4.2 websocket.readystate

　　readyStateproperty returns the current state of the instance object, in total four.

Connecting: A value of 0 indicates that the connection is in progress. OPEN: A value of 1 means that the connection is successful and communication is possible. CLOSING: A value of 2 indicates that the connection is shutting down. CLOSED: A value of 3 indicates that the connection has been closed or the connection failed to open.

The following is an example.

Switch(ws.readystate) { Casewebsocket.connecting://Do something     Break;  CaseWebsocket.open://Do something     Break;  Casewebsocket.closing://Do something     Break;  Casewebsocket.closed://Do something     Break; default:    //This never happens     Break;}

4.3 websocket.onopen

The property of onopen The instance object that specifies the callback function after the connection succeeds.

function () {  ws.send (' Hello server! ' );}

If you want to specify more than one callback addEventListener function, you can use the method.

function (event) {  ws.send (' Hello server! ') );});

4.4 Websocket.onclose

The property of onclose The instance object that specifies the callback function after the connection is closed.

Ws.onclose =function(event) {varCode =Event.code; varReason =Event.reason; varWasclean =Event.wasclean; //Handle Close Event};ws.addeventlistener ("Close",function(event) {varCode =Event.code; varReason =Event.reason; varWasclean =Event.wasclean; //Handle Close Event});

4.5 Websocket.onmessage

The property of onmessage The instance object that specifies the callback function after the server data is received.

function (event) {  var data = event.data;   // working with Data };ws.addeventlistener (function(event) {  var data =  Event.data;   // processing Data });

4.6 websocket.send ()

The method of send() The instance object is used to send data to the server.

Example of sending text: ws.send (' your message ');

Reference Links:

· Http://www.ruanyifeng.com/blog/2017/05/websocket.html

· Http://www.fly63.com/article/detial/64

Zhou Kee 1--nice to meet Websocket