Websocket understanding and application scenarios

One 、 Yes WebSocket The understanding of the

WebSocket yes HTML5 A browser is provided to communicate with the server full duplex communication Network technology , Belongs to the application layer protocol . It's based on TCP Transfer protocol , And reuse HTTP The handshake channel . The browser and the server only need to complete a handshake , A persistent connection can be created directly between the two , And two-way data transmission .

WebSocket The emergence of solves the disadvantages of half duplex communication . Its biggest characteristic is ： The server can actively push messages to the client , The client can also actively push messages to the server .

WebSocket principle ：： Client to WebSocket The server notifies one with all recipients ID Events , The server notifies all active clients immediately after receiving , Only ID In the receiver ID The client in the sequence will handle this event .

WebSocket The characteristics are as follows ：

• Support two-way communication , More real time
• You can send text , You can also send binary data ‘’
• Based on the TCP The agreement above , The server-side implementation is relatively easy
• The data format is lighter , Low performance overhead , Communication efficiency
• There is no homology restriction , The client can communicate with any server
• The protocol identifier is ws（ If encryption , Then for wss）, The web address of the server is URL
• And HTTP The protocol has good compatibility . The default port is also 80 and 443, And the handshake phase is used HTTP agreement , So shaking hands is not easy to block , Through a variety of HTTP proxy server .

Two 、Websocket Is used as follows ：

//  stay index.html Direct writing WebSocket, Set the port number of the server to  9999
let ws = new WebSocket('ws://localhost:9999');
//  Trigger after the client establishes a connection with the server 
ws.onopen = function() {
    console.log("Connection open."); 
    ws.send('hello');
};
//  Triggered when the server sends a message to the client 
ws.onmessage = function(res) {
    console.log(res);       //  Print is MessageEvent object 
    console.log(res.data);  //  What is printed is the received message 
};
//  Trigger after the client and server establish and close 
ws.onclose = function(evt) {
  console.log("Connection closed.");
}; 

3、 ... and 、 Application scenarios

be based on websocket Characteristics of factual communication , The existing application scenarios are ：

• bullet chat
• Media chat
• Collaborative editing
• Location based applications
• Sports live update
• Stock fund quotation is updated in real time