How to use JS WebSocket to implement simple chat

Short Polling

The implementation idea of ​​short polling is that the browser sends an HTTP request to the server every few seconds. After receiving the request, the server responds directly regardless of whether there is data update. After the server completes the response, the TCP connection will be closed. The code implementation is also the simplest, which is to use XHR to send requests to the backend periodically through setInterval to obtain the latest data.

setInterval(function() {
  fetch(url).then((res) => {
      // success code
  })
}, 3000);

Advantages: Simple implementation.

Disadvantages: It will cause data to be out of sync for a short period of time and a large number of invalid requests, poor security and waste of resources.

Long-Polling

After the client sends a request, the server will not return data immediately. The server will block the request connection and will not disconnect immediately until the server has data updated or the connection times out. The client will then send a request again to create a new connection, and repeat this process to obtain the latest data. The general effect is as follows:

The client code is as follows:

function async() {
    fetch(url).then((res) => {
        async();
        // success code
    }).catch(() => {
        // timeout async();
    })
}

Advantages: It is optimized compared to Polling and has better timeliness.

Disadvantages: Keeping the connection hanging consumes resources, the server does not return valid data, and the program times out.

WebSocket

The short polling and long polling mentioned above both require the client to initiate an Ajax request before communication can be carried out. They use the HTTP protocol, and the server cannot actively push information to the client.

When it comes to scenarios like sports events, chat rooms, and real-time locations, polling becomes very inefficient and wastes resources because requests have to be continuously sent to connect to the server. The emergence of WebSocket allows the server to actively send information to the client, giving the browser the ability to communicate in real time.

People who have never used WebSocket may think it is some advanced technology. In fact, WebSocket has few commonly used APIs and is easy to master. However, before introducing how to use it, let's take a look at its communication principles.

Communication Principles

When a client wants to establish a WebSocket connection with a server, during the handshake process between the client and the server, the client first sends an HTTP request to the server, including an Upgrade request header to inform the server that the client wants to establish a WebSocket connection.

Establishing a WebSocket connection on the client side is very simple:

let ws = new WebSocket('ws://localhost:9000');

Similar to HTTP and HTTPS, ws also has wss corresponding to it, which is used to establish a secure connection. We have taken ws as an example locally. The request header at this time is as follows:

Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cache-Control: no-cache
: : : : : : : : : : : : : : :
Host: localhost:9000
Origin: http://localhost:9000
Pragma: no-cache
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key: 5fTJ1LTuh3RKjsJxydyifQ== // corresponds to the response header Sec-WebSocket-Accept Sec-WebSocket-Version: 13 // indicates the version of the websocket protocol Upgrade: websocket // indicates upgrading to the websocket protocol User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/76.0.3809.132 Safari/537.36

The response header is as follows:

Connection: Upgrade
Sec-WebSocket-Accept: ZUip34t+bCjhkvxxwhmdEOyx9hE=
Upgrade: websocket 

At this time, you can see in the response line (General) that the status code is 101 Switching Protocols, indicating that the connection has been converted from the HTTP protocol to the WebSocket communication protocol. After the conversion is successful, the connection is not interrupted, but a full-duplex communication is established, and subsequent sending and receiving of messages will go through this connection channel.

Note that there is a Sec-WebSocket-Key field in the request header, which corresponds to the Sec-WebSocket-Accept in the corresponding header. Its function is to provide basic protection, such as malicious or invalid connections. Sec-WebSocket-Key is a base64 encoding randomly generated by the client. The server will use this encoding and follow a fixed algorithm:

GUID = "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"; // A fixed string accept = base64(sha1(key + GUID)); // key is the Sec-WebSocket-Key value, accept is the Sec-WebSocket-Accept value

The GUID string is a fixed string officially defined by RFC6455 and cannot be modified.

After the client receives the Sec-WebSocket-Accept response from the server, it will use the same algorithm to calculate the Sec-WebSocket-Key it generated previously. If they match, the handshake is successful. Then determine whether the HTTP Response status code is 101 (switching protocols). If so, establish a connection and you're done.

Implementing simple one-on-one chat

Next, we will implement a one-to-one chat (single chat) function of pure text message type. Without further ado, let's go straight to the code and pay attention to the comments.

Client:

function connectWebsocket() {
    ws = new WebSocket('ws://localhost:9000');
    // Listen for successful connection ws.onopen = () => {
        console.log('Connection to server WebSocket successful');
        ws.send(JSON.stringify(msgData)); // send method sends message to the server};

    // Listen for server messages (receive messages)
    ws.onmessage = (msg) => {
        let message = JSON.parse(msg.data);
        console.log('Received message:', message)
        elUl.innerhtml += `<li>Xiaoqiu: ${message.content}</li>`;
    };

    // Listen for connection failure ws.onerror = () => {
        console.log('Connection failed, reconnecting...');
        connectWebsocket();
    };

    // Listen for connection closure ws.onclose = () => {
        console.log('Connection closed');
    };
};
connectWebsocket();

From the above, we can see that the API of the WebSocket instance is easy to understand, simple and easy to use. Messages can be sent through the send() method, the onmessage event is used to receive messages, and then the messages are processed and displayed on the page. When the onerror event (listening connection failure) is triggered, it is best to perform a reconnection to keep the connection uninterrupted.

Server Node: (using ws library here)

const path = require('path');
const express = require('express');
const app = express();
const server = require('http').Server(app);
const WebSocket = require('ws');

const wss = new WebSocket.Server({ server: server });

wss.on('connection', (ws) => { 

  // Listen for messages from the client ws.on('message', (message) => {
    console.log(wss.clients.size);
    let msgData = JSON.parse(message);   
    if (msgData.type === 'open') {
      // Identify the session during the initial connection ws.sessionId = `${msgData.fromUserId}-${msgData.toUserId}`;
    } else {
      let sessionId = `${msgData.toUserId}-${msgData.fromUserId}`;
      wss.clients.forEach(client => {
        if (client.sessionId === sessionId) {
          client.send(message); //Send a message to the corresponding client connection}
      })  
    }
  })

  // Connection closed ws.on('close', () => {
    console.log('Connection closed');  
  });
});

Similarly, the server also has corresponding sending and receiving methods. The complete sample code is here

In this way, the browser and the server can happily send messages, and the effect is as follows:

The green arrows represent sent messages, and the red arrows represent received messages.

Heartbeat Keep Alive

In actual use of WebSocket, if there is no communication for a long time, some unstable connection may occur. The connection interruption caused by these unknown situations will affect the communication between the client and the server.

In order to prevent this kind of situation from happening, there is a heartbeat keep-alive method: the client sends a ping at fixed intervals like a heartbeat to tell the server that I am still alive, and the server will also return a pong to tell the client that the server is still alive. Ping/pong is actually a fake message that has nothing to do with the business, also known as a heartbeat packet.

After the connection is successful, you can send heartbeat packets at a fixed interval, such as 60s:

setInterval(() => {
    ws.send('This is a heartbeat message');
}, 60000)

Summarize

Through the above introduction, everyone should have a certain understanding of WebSocket. In fact, it is not mysterious. Here is a brief summary of the content of the article. When a WebSocket instance is created, an HTTP request is sent with a special field Upgrade in the request message. Then the connection is converted from HTTP protocol to WebSocket protocol, so that full-duplex communication is established between the client and the server. Information can be exchanged through this communication connection through the WebSocket send method and onmessage event.

The above is the details of how to use JS WebSocket to implement simple chat. For more information about WebSocket, please pay attention to other related articles on 123WORDPRESS.COM!