Introduction to the

WebSockets are an advanced technology. It opens an interactive communication session between the user’s browser and the server. Using this API, you can send messages to the server and receive event-driven responses without having to poll the server for a response.

Its biggest characteristic is that the server can take the initiative to push information to the client, the client can also take the initiative to send information to the server, is a real two-way equal dialogue, belongs to a server push technology.

The development course

WebSocket protocol was born in 2008 and became an international standard in 2011. All browsers already support it.

HTTP1.0: The life cycle of an HTTP request: the client initiates, the server responds, and the connection is disconnected.
- Disadvantages: unreusable, three-way handshake, slow start
HTTP1.1: Pipelinized, Connection:keep-alive enabled by default, the server does not close the Connection immediately after processing.
- Disadvantages: Unable to distinguish the corresponding request of the return packet, the sequential return leads to the blocking of the header; Server push is not supported
HTTP2.0: multiplexing. Implement server push, using frame, stream and other ways to solve the plug. HTTP2.0 in a TCP connection, can simultaneously send multiple HTTP requests, each request is a stream, a stream can be divided into many frames, with the tag number, the server can casually send back the packet, the client received, according to the tag, reassembly can be.

The above is about some development of HTTP protocol on request, and WebSocket provides another solution for server push – two-way communication protocol.

What problems have been solved?

Addresses several problems with HTTP:

The server can actively push to the client
Two-way communication
Efficient connection
Save bandwidth
Save server resources

Features and functions

The characteristics of

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.

role

Solve the problem that the server waits for a long time
Solve the problem that the real-time status of the server cannot be pushed efficiently
Solve the time-consuming problem of establishing links with high-frequency push

Compare with other technologies

Ajax polling

Ask the browser to send a request every few seconds asking if the server has any new messages. The server is required to have fast processing speed and resources

Long polling

Polling is also used, but the blocking model is adopted until a Response is returned, and the connection is established again. High concurrency is required

WebSocket

An HTTP handshake, so the entire communication process is established in a single connection/state, avoiding HTTP statelessness

The advantages and disadvantages

advantages
- WebSocket is a two-way communication protocol
- Real-time applications are using Websockets to receive data on a single channel
- Frequently updated applications should use WebSocket, which is faster than HTTP
- It is one of THE HTML5 technologies and has a huge application prospect
disadvantages
- Incompatible with earlier versions of Internet Explorer
- To retrieve old data, or to retrieve data only once for use by the provider, you should use the HTTP protocol
- If the data is only loaded once, then the RestFul Web service is sufficient to fetch the data from the server.

Core principles

The WebSocket protocol

The WebSocket protocol is upgraded through HTTP. You only need to add two handshakes on the basis of HTTP protocol to establish a WebSocket connection. In essence, it is another application layer protocol (WebSocket protocol) encapsulated on TCP. Because it is tcp-based, the server can push it by itself. The protocol upgrade process is as follows:

The client sends a request for protocol upgrade. Procedure Add the HTTP header shown in Figure 1 to the HTTP request.
If the server supports the WebSocket protocol, it returns a 101 status code indicating that it agrees to the protocol upgrade and supports various configurations (if the server does not support certain features or versions, or if the client is told, the client can send the protocol upgrade request again). The service returns the HTTP header as shown in Figure 2.
In this way, the protocol upgrade is completed. The subsequent data communication is based on THE TCP connection and encapsulated by the WebSocket protocol.

[Figure 1: Update of client sending protocol]

[Figure 2: Server agreement upgrade]

Technology application

Real-time push order result message
Notification of file upload parsing result
Websocket social subscription
Websocket multi-player games
Websocket co-editing/programming
Websocket collects click-stream data
Stock fund quotation
Sports Live update
Multimedia chat
online education
Location-based applications
Forum news broadcast

Component packaging

Encapsulates singleton components and supports multiple server webSocket connections.

// import handleMsgMap from './handleReceiveMessage';

let websocketObj = {};
const newWebSocket = async (url, openCallback, messageCallback, closeCallback) => {
  console.log('new webSocket..... ', websocketObj[url]);
  if (websocketObj[url]) return websocketObj[url];

  // Check whether the current environment supports Websocket
  if (window.WebSocket) {
    WSS: HTTPS, ws: HTTP
    websocketObj[url] = new WebSocket(url);
    // The callback method for successfully establishing the connection
    websocketObj[url].onopen = function () {
      // After a successful connection is established, the heartbeat detection is reset
      console.log('websocket connect');
      if (openCallback) {
        openCallback(websocketObj[url]);
      } else {
        const content = JSON.stringify({ content: 'Hello! '.type: '0' });
        websocketObj[url].send(content);
      }
      // heartCheck.reset().start(url, openCallback, messageCallback, closeCallback);
      console.log('connected successfully');
    };

    // The callback method that received the message
    websocketObj[url].onmessage = function (e) {
      const message = JSON.parse(e.data);
      const { isSuccess, data, msgType, respCode } = message;
      if (respCode && handleRespCodeStrategy[respCode]) {
        handleRespCodeStrategy[respCode](url, openCallback, messageCallback, closeCallback);
        return;
      }

      if (messageCallback) {
        messageCallback(e);
        return;
      }
      if (isSuccess && data) {
        // Perform the action that received the message and distribute actions to perform the actionhandleMsgMap[msgType](data); }};// Accept the callback method to close the connection to the server
    websocketObj[url].onclose = function (e) {
      console.log('service onclose');
      closeCallback && closeCallback(e);
    };

    // Connection error occurs, connection error will continue to attempt to initiate the connection, interval 30 seconds
    websocketObj[url].onerror = function () {
      closeWebsocket(url);
      setTimeout(() = > {
        newWebSocket(url, openCallback, messageCallback, closeCallback);
      }, 30000);
    };

    // Monitor window events, when the window is closed, actively disconnect websocket connection, prevent the connection is not closed, the server side error
    window.onbeforeunload = () = > {
      console.log('window onclose');
      return websocketObj[url] && websocketObj[url].close();
    };
    return websocketObj[url];
  } else {
    console.log('not support websocket');
    return null; }};// Heartbeat detection: detects the connection status every once in a while. If the connection is in progress, it sends a message to the server to reset the maximum connection time between the server and the client. If the connection has been disconnected, it initiates reconnection.
const heartCheck = {
  timeout: 10000.// Heartbeat, which is slightly smaller than the connection time set by the server, resets the connection time by means of communication in the case of near disconnection.
  serverTimeoutObj: null.reset: function () {
    clearInterval(this.serverTimeoutObj);
    this.serverTimeoutObj = null;
    return this;
  },
  start: function (url, openCallback, messageCallback, closeCallback) {
    this.serverTimeoutObj = setInterval(() = > {
      if (websocketObj[url].readyState === 1) {
        const content = JSON.stringify({ msgType: 1 });
        websocketObj[url].send(content);
      } else{ closeWebsocket(url); newWebSocket(url, openCallback, messageCallback, closeCallback); }},this.timeout); }};// Handle the disconnection and reconnection mechanism when there is no network
window.addEventListener('online'.() = > {
  if (!websocketObj[url]) {
    newWebSocket(url, openCallback, messageCallback, closeCallback);
  }
});
window.addEventListener('offline'.() = > {
  if(websocketObj[url]) { closeWebsocket(url); }});const closeWebsocket = (url) = > {
  heartCheck.reset();
  websocketObj[url] && websocketObj[url].close();
  websocketObj[url] = null;
};
// 1001: reconnect 1002: disable the heartbeat timer 1003: re-log in to login 1004: disable webSocket 9999: fail
const handleRespCodeStrategy = {
  1001: function (url, openCallback, messageCallback, closeCallback) {
    websocketObj[url] && closeWebsocket(url) && newWebSocket(url, openCallback, messageCallback, closeCallback);
  },
  1002: function () {
    heartCheck.reset();
  },
  1003: function (url) {
    closeWebsocket(url);
    window.location.href = window.location.origin + window.location.pathname + '#/login'; // There is a popover when it is squeezed
    window.location.reload();
  },
  1004: function (url) {
    closeWebsocket(url);
  },
  9999: () = >{}};// export default newWebSocket;
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

WebSocket principle and singleton component encapsulation

Introduction to the

The development course

What problems have been solved?