How to use WebSocket in company projects-a practical guide

Starting from the basic concepts of WebSocket, this article introduces the process and precautions from local joint debugging to deployment and online in actual development, so that WebSocket Xiaobai can be applied to the project with minimal cost.

1. WebSocket basics

1. What is WebSocket

WebSocket is a network transmission protocol that can perform full-duplex communication on a single TCP connection

2. Compare http

• Both are located at the application layer and both rely on the TCP protocol
• The WebSocket protocol generally starts with ws:// or wss://
• HTTP does not support full-duplex communication, polling is generally used

3. Basic usage of WebSocket

compatibility:

https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

A simple demo

( See the original video for details )

The client can see the WebSocket message under the console-network-ws

Pay attention to several key fields in the request header

1. The request address starts with ws:// or wss://
2. Connection must be set to Upgrade, indicating that the client wants to connect to 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 will be returned in the response header, and the connection status will be set to 101 (protocol switch successful

Two, how to use WebSocke in the project

Let's take an actual project as an example to show how to implement a WebSocket interface, including the entire process of development -> joint debugging -> deployment-online .

1. Development environment

Simply encapsulate the above Demo and call it as follows in the project:

Configure webpack proxy

Description:

• WebSocket interface should be separated from http interface
• The domain name uses location.host and is forwarded through a reverse proxy in order to preserve cookies and header information.

2. Heartbeat detection & reconnect after disconnection

In order to ensure a stable connection, some abnormal conditions need to be considered, such as network fluctuations causing connection interruption, server timeout, etc.

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

Reconnect after disconnection, that is, before sending a message, check the connection status, if the connection is interrupted, try to connect n times;

The package 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服务器。不用管 ws://
    proxy_http_version 1.1; # http协议切换

    proxy_set_header Host $host; # 保留源信息
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Upgrade $http_upgrade; # 请求协议升级，如果生产环境有报400错误，可以尝试将值设置为websocket
    proxy_set_header Connection $connection_upgrade;
}

Three, 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 downgraded to polling communication on browsers that do not support WebSocket.

Advantages: mature, ready to use out of the box, good compatibility.

Disadvantages: large size, the front and back ends must be unified, that is, if the back end uses  socket.io  , the front end must use socket.io -client.

Author: vivo commercial large front-end team