This is the 26th day of my participation in the August More Text Challenge

What is a Web Socket

WebSocket protocol was born in 2008, became an international standard in 2011, and is supported by all browsers. It is a new network protocol based on TCP, which is provided by HTML5 for full-duplex communication over a single TCP connection. It implements full-duplex communication between the browser and the server — allowing the server to actively send messages to the client.

Why use Web sockets when there is HTTP

WebSocket makes it easier to exchange data between the client and the server, allowing the server to actively push data to the client. In the WebSocket API, the browser and server only need to complete a handshake to create a persistent connection and two-way data transfer. In the WebSocket API, the browser and the server just shake hands, and then a fast channel is formed between the browser and the server, and the data can be directly transferred between the two.

HTTP is a stateless, one-way application layer protocol, it USES a request/response model, communication request can only be initiated by the client, the server response, make response to the request cannot implement active server to the client message, it’s doomed if the server has a continuous change of state, the client want to know you very trouble. Most Web applications implement long polling through frequent asynchronous JavaScript and aJax requests, which is inefficient and wastes a lot of bandwidth and other resources.

The WebSocket protocol defined by HTML5 can better save server resources and bandwidth, and can communicate in more real time. WebSocket connections allow full-duplex communication between the client and server so that either side can push data to the other side over the established connection. WebSocket only needs to establish a connection once, and can always maintain the connection state, which is obviously much more efficient than the non-stop connection establishment in polling mode.

The characteristics of

• The server can actively push information to the client, and the client can also actively send information to the server, which is a real two-way equal dialogue

• Based on TCP protocol, the implementation of the server side is relatively easy.

• It has good compatibility with HTTP protocol. The default ports are also 80 and 443, and the handshake phase uses HTTP protocol, so it is not easy to mask the handshake and can pass various HTTP proxy servers.

• The data format is relatively light, with low performance overhead and high communication efficiency.

• You can send text or binary data.

• There are no same-origin restrictions, and clients can communicate with any server.

• The protocol identifier is WS (or WSS if encrypted), and the server URL is the URL.

How to use it?

Execute the process

• 1 Connection establishment: The client requests the server to establish a connection and completes the connection establishment
• 2 Data uplink: The client sends data to the server over the established connection
• 3 Data downlink: The server sends data to the client through the established connection
• 4 Client Disconnection: The client needs to disconnect existing connections
• 5 Server Disconnection: The server needs to disconnect existing connections

The client

Connection is established

Once the connection is successful, the onOpen event is emitted

var ws = new WebSocket("wss://ws.iwhao.top"); ws.onopen = function(evt) { console.log("Connection open ..." ); };Copy the code

Data upward

ws.send("Hello WebSockets!" );Copy the code

Data downward

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};
Copy the code

Client Disconnection

ws.close();
Copy the code

The server is disconnected

ws.onclose = function(evt) {
  console.log("closed.");
};  
Copy the code

Exception error

If the connection fails, data fails to be sent or received, or data is incorrectly processed, Browser will trigger an onError message.

ws.onerror = function(evt) {
}; 
Copy the code

The server node

reference

• Socket.IO
• WebSocket-Node

API/browser version compatibility

The above is all the content of this article, thank you very much handsome boys and girls can see here, if this article is good or a little help to you, please like, ask for attention, ask for share, of course, any questions can be discussed in the comments, I will actively answer, thanks again 😁