Based on the basic concept of WebSocket, this paper introduces the process and matters needing attention from local tuning to online deployment in actual development, so that WebSocket can be applied to the project at the lowest cost.

First, WebSocket foundation

1. What is WebSocket

WebSocket is a network transport protocol that enables full-duplex communication over a single TCP connection

2. Compare HTTP

  • Both are at the application layer and depend on TCP
  • WebSocket protocols typically start with ws:// or WSS ://
  • HTTP does not support full-duplex communication and generally uses polling mode

3. Basic usage of WebSocket

Compatibility:

Developer.mozilla.org/zh-CN/docs/…

A simple Demo

(For the video, see article)

Clients can see WebSocket messages under console-network-WS

Notice a few key fields in the request header

  1. The request address begins with ws:// or WSS ://
  2. Connection must be set to Upgrade, indicating that the client wants to connect to the Upgrade
  3. The Upgrade field must be set to WebSocket, indicating that you want to Upgrade to the WebSocket protocol.
  4. If the server supports WebSocket, the same information is returned in the response header and the connection status is set to 101 (protocol switch successful)

How to use WebSocke in a project

The following takes a practical project as an example to show how to implement a WebSocket interface, including the whole process of development -> joint adjustment -> deployment – online.

1. Development environment

To encapsulate the Demo above, call it in your project as follows:

Configure the WebPack agent

Description:

  • The WebSocket interface must be separated from the HTTP interface
  • The domain name uses location.host and is forwarded by reverse proxy to preserve cookies and headers.

2. Heartbeat detection & disconnection and reconnection

To ensure stable connections, you need to consider some exceptions, such as connection interruption caused by network fluctuation and server timeout.

Heartbeat detection means that the client periodically sends heartbeat messages to the server to keep the connection stable.

Disconnection reconnection means to detect the connection status before sending a message. If the connection is interrupted, try n times.

Encapsulation is as follows:

You can also choose third-party library processing.

3, Nginx configuration

The WebSocket protocol is different from the HTTP protocol, but the WebSocket handshake is compatible with HTTP, using the HTTP Upgrade facility to upgrade the connection from HTTP to WebSocket.
This allows WebSocket applications to more easily fit into existing infrastructures.
For example, WebSocket applications can use the standard HTTP ports 80 and 443, thus allowing the use of existing firewall rules. 
location /websocket { proxy_pass http://xx.xxx.xx.xx; # webSocket server. // proxy_http_version 1.1; Proxy_set_header Host $Host; Http_forwarded_for $forwarded_FORWARded_for; http_forwarded_forwarded_for proxy_set_header Upgrade $http_upgrade; Websocket proxy_set_header Connection $connection_upgrade; }Copy the code

Third, other

sockiet.io

Sockiet. IO is a real-time application framework based on Node. Compared with native WebSocket, sockiet. IO encapsulates more general capabilities and can be reduced to polling mode communication on browsers that do not support WebSocket.

Advantages: mature, out of the box, good compatibility.

** Disadvantages: ** is large in size and the front and back ends must be the same. That is, if the back end uses socket. IO, the front end must use socket. IO.

Author: Vivo Commercialization big front End team