El método de mensajería instantánea y el uso específico de webSocket

prefacio

Me he encontrado con una escena que requiere mensajería instantánea antes. Al principio, utilicé el método de sondeo y el temporizador solicitaba datos del servidor una vez cada 3 segundos. Más tarde, descubrí que si la página que usa esta función se abre en el móvil teléfono durante mucho tiempo, el teléfono móvil puede fallar Fiebre, incluso tartamudeo. Finalmente, use webSocket para realizar una comunicación full-duplex, lo que permite que el servidor envíe activamente solicitudes al cliente.

A continuación, permítanme presentarles el método de implementación de la mensajería instantánea.

1. Votación:

   • Cómo funciona: el cliente envía periódicamente una solicitud al servidor para preguntar si hay nuevos datos disponibles. Si el servidor tiene datos nuevos, devuelve los datos; si no, el servidor devuelve una respuesta vacía. El cliente vuelve a enviar la solicitud inmediatamente después de recibir la respuesta, formando un proceso de sondeo periódico.
   • Ventajas: Simple de implementar, compatible con la mayoría de los navegadores y servidores.
   • Desventajas: las solicitudes y respuestas frecuentes provocarán una sobrecarga innecesaria en la red, lo que reducirá el rendimiento y la eficiencia.
   • Escenarios aplicables: aplicable a escenarios donde la frecuencia de actualización de datos no es alta y los requisitos en tiempo real no son altos.

2. Sondeo largo (sondeo largo):

   • Principio de funcionamiento: el cliente envía una solicitud al servidor y el servidor no devuelve una respuesta de inmediato, sino que suspende la solicitud y espera nuevos datos antes de devolver una respuesta. Una vez que el cliente recibe la respuesta, inmediatamente envía la solicitud nuevamente, formando una nueva solicitud pendiente.
   • Ventajas: en comparación con el sondeo, se reducen las solicitudes de red innecesarias y la sobrecarga de la red.
   • Desventajas: el servidor necesita mantener una gran cantidad de solicitudes pendientes, lo que consume más recursos y no es adecuado para escenarios de alta concurrencia.
   • Escenarios aplicables: adecuado para escenarios en los que las actualizaciones de datos son poco frecuentes pero requieren un rendimiento en tiempo real relativamente alto.

3. WebSocket:

   • Principio de funcionamiento: WebSocket es un protocolo de comunicación full-duplex.Al establecer una conexión persistente, el cliente y el servidor pueden enviar y recibir mensajes en cualquier momento. Una vez que se establece la conexión, ambas partes pueden enviar mensajes directamente sin apretones de manos frecuentes.
   • Ventajas: realice la comunicación en tiempo real, reduzca la sobrecarga innecesaria de la red, alto rendimiento y admita la comunicación entre dominios.
   • Desventajas: tanto el servidor como el cliente deben admitir el protocolo WebSocket.
   • Escenarios aplicables: adecuado para escenarios que requieren comunicación en tiempo real, como chat en tiempo real, juegos en línea, etc.

4. Eventos enviados por el servidor (SSE):

   • Cómo funciona: SSE es un protocolo de comunicación unidireccional que permite que el servidor envíe datos al cliente, pero el cliente no puede enviar datos al servidor. El cliente EventSourcese suscribe al flujo de eventos del servidor a través del objeto y, una vez que haya nuevos datos disponibles, el servidor enviará automáticamente los datos al cliente.
   • Ventajas: implementación simple, sin protocolo de enlace bidireccional como WebSocket, adecuado para que el servidor envíe datos al cliente.
   • Desventaja: solo admite comunicación unidireccional, no es adecuado para que el cliente envíe una solicitud al servidor.
   • Escenarios aplicables: aplicable a escenarios en los que el servidor envía activamente datos en tiempo real al cliente, como notificaciones automáticas, monitoreo en tiempo real, etc.

¿Cómo usa WebSocket el front-end?

Usar WebSocket en el front-end es muy simple, primero debe crear un objeto WebSocket en el navegador y luego establecer una conexión con el servidor a través de este objeto. Una vez que la conexión se establece con éxito, el front-end puede comunicarse con el servidor en tiempo real enviando y recibiendo mensajes.

1. Crea un objeto WebSocket

En JavaScript, se puede crear un objeto WebSocket con el siguiente código:

const socket = new WebSocket('ws://example.com'); // 根据实际情况替换为服务器的 WebSocket 地址

En el código anterior, creamos un objeto WebSocket y pasamos la dirección WebSocket del servidor como parámetro. El protocolo de la dirección WebSocket puede ser ws(sin cifrar) o wss(cifrado).

2. Escucha eventos

Una vez que la conexión de WebSocket se establece con éxito, el estado de la conexión y el envío y la recepción de mensajes se pueden manejar mediante la escucha de eventos.

socket.onopen = () => {
    
    
  console.log('WebSocket连接已建立');
};

socket.onmessage = event => {
    
    
  const message = event.data;
  console.log('收到消息：', message);
};

socket.onclose = () => {
    
    
  console.log('WebSocket连接已关闭');
};

socket.onerror = error => {
    
    
  console.error('WebSocket连接错误：', error);
};

En el código anterior, escuchamos onopenel evento (conexión establecida), onmessageevento (mensaje recibido), oncloseevento (conexión cerrada), onerrorevento (error de conexión). Cada vez que se activa el evento correspondiente, manejamos la lógica correspondiente a través de la función de devolución de llamada.

3. Enviar y recibir mensajes

Una vez que la conexión WebSocket se haya establecido correctamente, puede send()enviar mensajes a través del método y onmessagerecibir mensajes a través del evento.

// 发送消息
socket.send('Hello, WebSocket!');

// 接收消息在上面的监听代码中已经处理

El código anterior demuestra cómo crear una conexión WebSocket, enviar y recibir mensajes en el front-end. Cuando el servidor y el cliente están conectados, pueden comunicarse en tiempo real a través de send()métodos y eventos en cualquier momento.onmessage

4. El mecanismo de latido del corazón de websocket

El papel del mecanismo de latido del corazón de WebSocket incluye principalmente los siguientes aspectos:

1. Mantenga viva la conexión :
   WebSocket es un protocolo de comunicación bidireccional. Una vez que se establece la conexión, los datos se pueden transmitir en tiempo real entre el servidor y el cliente. Sin embargo, debido a la red y otras razones, la conexión puede cerrarse si no hay transmisión de datos durante mucho tiempo. El mecanismo de latido puede mantener activa la conexión y evitar que se interrumpa mediante el envío de paquetes de latido periódicamente, incluso si no hay una interacción de datos real.

2. Confirme el estado de supervivencia del servidor :
   a través del mecanismo de latidos, el cliente puede enviar periódicamente paquetes de latidos al servidor y esperar la respuesta del servidor. Si no se recibe respuesta del servidor dentro de un período de tiempo, el cliente puede juzgar que el servidor puede estar defectuoso o desconectado y realizar el procesamiento correspondiente según la situación, como volver a conectarse al servidor.

3. Optimice la utilización de los recursos de la red :
   el mecanismo de latido puede enviar paquetes de datos más pequeños a intervalos regulares. En comparación con la transmisión de grandes cantidades de datos, los paquetes de latido ocupan menos recursos. Esto ayuda a reducir el desperdicio de recursos de la red y mejorar la eficiencia de la transmisión de datos.

4. Manejo de errores y reconexión :
   a través del mecanismo de latido, el cliente puede detectar la desconexión a tiempo y realizar operaciones de manejo de errores y reconexión. En el caso de un entorno de red inestable o una falla del servidor, el mecanismo de latido puede ayudar al cliente a restaurar la conexión con el servidor más rápido.

5. Monitoreo del estado de la conexión :
   el mecanismo de latido se puede usar para monitorear el estado de las conexiones WebSocket, incluido el establecimiento de la conexión, la desconexión y los estados anormales. Esto ayuda al cliente a comprender el estado de la conexión y actuar en consecuencia.

En general, la función del mecanismo de latido de WebSocket es mantener la estabilidad y confiabilidad de la conexión, garantizar que la conexión permanezca activa y tratar situaciones anormales de manera oportuna, a fin de mejorar la eficiencia de la comunicación y la experiencia del usuario.
usar:

const webSocketUrl = 'ws://example.com'; // WebSocket服务器地址
const heartBeatInterval = 5000; // 心跳间隔时间，单位为毫秒

let webSocket = null;
let heartBeatTimer = null;

function initWebSocket() {
    
    
  webSocket = new WebSocket(webSocketUrl);

  webSocket.onopen = () => {
    
    
    console.log('WebSocket连接已建立');

    // 建立连接后开始发送心跳包
    startHeartBeat();
  };

  webSocket.onmessage = (event) => {
    
    
    // 处理服务器发送的消息
    console.log('收到服务器消息：', event.data);
  };

  webSocket.onclose = () => {
    
    
    console.log('WebSocket连接已关闭');

    // 连接关闭后停止心跳包
    stopHeartBeat();
    
    // 可根据需要重新连接
    // reconnect();
  };
}

function startHeartBeat() {
    
    
  // 每隔一段时间发送心跳包
  heartBeatTimer = setInterval(() => {
    
    
    if (webSocket.readyState === WebSocket.OPEN) {
    
    
      webSocket.send('ping'); // 发送心跳包
    }
  }, heartBeatInterval);
}

function stopHeartBeat() {
    
    
  // 停止心跳包发送
  clearInterval(heartBeatTimer);
}

// 初始化WebSocket连接
initWebSocket();

el caso

Realizar una función de chat simple
1. Crear una carpeta
2. Inicializar

npm init -y

npm install websocket

3. Cree un servidor websocket y asígnele el nombre server.js

const websocket=require("websocket").server
const http=require('http');
const httpServer = http.createServer().listen(8080, ()=>{
    
    
    console.log('cyl: ','http://localhost:8080');
})
const websocketServer = new websocket({
    
    
    httpServer: httpServer,
    autoAcceptConnections: false
})
const conArr = []
websocketServer.on('request', function(request) {
    
    
	// 这就是一次客户端发送的消息
	// websocket 需要将这个链接保存起来
	// 只要客户端和服务器没有断开，这个链接必须在
 	// 客户端与服务端的通信都是从这个链接上通信
	const connection = request.accept()

	// 每次接收一个链接，将它存放在数组里面
	conArr.push(connection)
	console.log(connection)

	// 监听客户端发送的消息
	connection.on('message', function(message) {
    
    
    	console.log(message);
 		// 发送消息给客户端（广播到各个客户端）
  		// 后面加上 utf8Data 编码
 		// 要将所有的链接全部发出去，才可以让每个客户端接收到其他传来的数据
  		for(let i = 0; i < conArr.length; i++) {
    
    
   			conArr[i].send(message.utf8Data)
   		}
	})
})

4. Cree el archivo index.html enviado al cliente

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 需要一进入浏览器就要建立链接 -->
  <!-- 点击按钮发送消息给服务器 -->
  输入姓名：<input type="text" id="uName">
  <br>
  输入消息：<input type="text" id="context">

  <button id="btn"> 点击发送消息 </button>

  <div id="charRoom"></div>

  <script>
    // 用户名
    const uName = document.getElementById('uName')
    // 文本框内容
    const context = document.getElementById('context')
    // 点击按钮
    const btn = document.getElementById('btn')
    // 要显示聊天室的区域
    const charRoom = document.getElementById('charRoom')
    
    // 实例化 websocket
    // 必须加 'ws://localhost:8080' ws 协议，后面是开启的服务端接口
    const websocket = new WebSocket('ws://localhost:8080')
    // 打开事件
    websocket.onopen = function() {
      
      
      // 获取当前链接的状态
      // 1 是建立了链接
      console.log(websocket.readyState);
    }

    // 点击发送消息的事件
    btn.onclick = function() {
      
      
      // 将用户名和要发送的内容放在一个对象中，一起传送给后端
      const values = {
      
      
        uName: uName.value,
        context: context.value
      }

      // 清空文本框的内容
      uName.value = ''
      context.value = ''

      // 通过 websocket发送消息
      websocket.send(JSON.stringify(values))
    }

    // 接收服务器返回的消息
    websocket.onmessage = function(data) {
      
      
      console.log("服务器返回的数据",data)
      // 服务器返回过来的聊天信息
      const chatS = JSON.parse(data.data)

      // 添加到页面上
      charRoom.innerHTML += `
        <strong>${ 
        chatS.uName}：</strong>
        <span>${ 
        chatS.context}</span>
        <br />
      `
    }

    // 服务器断开连接，客户端会触发
    websocket.onclose = function() {
      
      }
  </script>
</body>
</html>

4. Inicie el servidor

node server.js

El servicio comenzó con éxito