Cómo utilizar WebSocket en proyectos de empresa: una guía práctica

A partir de los conceptos básicos de WebSocket, este artículo presenta el proceso y las precauciones desde la depuración conjunta local hasta la implementación y en línea en el desarrollo real, de modo que WebSocket Xiaobai se pueda aplicar al proyecto con un costo mínimo.

1. Conceptos básicos de WebSocket

1. ¿Qué es WebSocket?

WebSocket es un protocolo de transmisión de red que puede realizar comunicación full-duplex en una sola conexión TCP

2. Compara http

• Ambos están ubicados en la capa de aplicación y ambos se basan en el protocolo TCP.
• El protocolo WebSocket generalmente comienza con ws: // o wss: //
• HTTP no admite la comunicación full-duplex, generalmente se usa el sondeo

3. Uso básico de WebSocket

compatibilidad:

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

Una simple demostración

( Vea el video original para más detalles )

El cliente puede ver el mensaje de WebSocket en la consola-red-ws

Preste atención a varios campos clave en el encabezado de la solicitud

1. La dirección de la solicitud comienza con ws: // o wss: //
2. La conexión debe establecerse en Actualizar, lo que indica que el cliente desea conectarse para actualizar
3. El campo Actualizar debe establecerse en WebSocket, lo que indica que desea actualizar al protocolo WebSocket.
4. Si el servidor admite websocket, se devolverá la misma información en el encabezado de respuesta y el estado de la conexión se establecerá en 101 (cambio de protocolo exitoso

Dos, cómo usar WebSocke en el proyecto.

Tomemos un proyecto real como ejemplo para mostrar cómo implementar una interfaz WebSocket, incluido todo el proceso de desarrollo -> depuración conjunta -> implementación en línea .

1. Entorno de desarrollo

Simplemente encapsule la demostración anterior y llámela de la siguiente manera en el proyecto:

Configurar el proxy de paquete web

Descripción:

• La interfaz WebSocket debe estar separada de la interfaz http
• El nombre de dominio utiliza location.host y se reenvía a través de un proxy inverso para retener las cookies y la información del encabezado.

2. Detección de latidos y reconexión después de la desconexión

Para garantizar una conexión estable, se deben considerar algunas condiciones anormales, como las fluctuaciones de la red que provocan la interrupción de la conexión, el tiempo de espera del servidor, etc.

La detección de latidos significa que el cliente envía periódicamente mensajes de latidos al servidor para mantener estable la conexión;

Vuelva a conectarse después de la desconexión, es decir, antes de enviar un mensaje, verifique el estado de la conexión, si la conexión se interrumpe, intente conectarse n veces;

El paquete es el siguiente:

También puede elegir el procesamiento de bibliotecas de terceros.

3. Configuración de Nginx

El protocolo WebSocket es diferente del protocolo HTTP, pero el protocolo de enlace de WebSocket es compatible con HTTP, utilizando la función de actualización de HTTP para actualizar la conexión de HTTP a WebSocket.

Esto permite que las aplicaciones WebSocket se adapten más fácilmente a las infraestructuras existentes.

Por ejemplo, las aplicaciones WebSocket pueden usar los puertos HTTP estándar 80 y 443, permitiendo así el uso de reglas de firewall existentes.

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;
}

Tres, otro

sockiet.io

sockiet.io es un marco de aplicación en tiempo real basado en Node. En comparación con WebSocket nativo, sockiet.io encapsula capacidades más generales y se puede degradar a comunicación de sondeo en navegadores que no admiten WebSocket.

Ventajas: maduro, listo para usar fuera de la caja, buena compatibilidad.

Desventajas: tamaño grande, los extremos frontal y posterior deben estar unificados, es decir, si el extremo posterior usa  socket.io  , el extremo frontal debe usar socket.io -client.

Autor: equipo de front-end grande comercial vivo