Cómo implementar WebSocket enviando y recibiendo mensajes UDP en el front-end (modo multiproceso)

Introducción:

Este artículo continuará presentando cómo utilizar la tecnología WebSocket para enviar y recibir mensajes UDP en aplicaciones front-end e introducirá el modo de subprocesos múltiples para mejorar la eficiencia y el rendimiento del envío. Usaremos el lenguaje JavaScript para escribir código y combinaremos WebSocket API, paquetes de datos UDP, Web Workers y escucha de mensajes UDP para realizar esta función.

Paso 1: cree una conexión WebSocket

Primero, necesitamos establecer una conexión WebSocket en la aplicación front-end para comunicarnos con el servidor. El siguiente código se puede utilizar para crear una conexión WebSocket:

const socket = new WebSocket('ws://服务器地址');

explicar:

• const socket: Crea un objeto WebSocket.
• new WebSocket('ws://服务器地址'): cree una conexión WebSocket especificando la dirección del servidor.

Paso 2: crear trabajadores web

Web Workers nos permite ejecutar código JavaScript en segundo plano sin bloquear el hilo principal. Usaremos dos Web Workers, uno para enviar mensajes UDP y otro para recibir mensajes UDP.

Primero, necesitamos escribir un archivo JavaScript para definir la lógica del Web Worker para enviar mensajes UDP. Cree un udpSendWorker.jsarchivo llamado y agregue el siguiente código:

self.addEventListener('message', function (event) {
    
    
  // 获取要发送的数据
  const data = event.data;

  // 创建UDP数据包
  const udpPacket = new ArrayBuffer(4);
  const view = new DataView(udpPacket);
  view.setUint32(0, data);

  // 发送UDP数据包
  self.postMessage(udpPacket);
});

Luego, creamos otro archivo JavaScript para definir la lógica del Web Worker para recibir mensajes UDP. Cree un udpReceiveWorker.jsarchivo llamado y agregue el siguiente código:

self.addEventListener('message', function (event) {
    
    
  // 获取UDP数据包
  const udpPacket = event.data;

  // 解析UDP数据包
  const view = new DataView(udpPacket);
  const data = view.getUint32(0);

  // 处理接收到的UDP消息
  self.postMessage(data);
});

explicar:

• self.addEventListener('message', function (event) { ... }): Cuando el Web Worker recibe un mensaje, ejecuta el bloque de código en la función de devolución de llamada.
• const data = event.data: Obtiene los datos enviados desde el hilo principal.
• const udpPacket = new ArrayBuffer(4): Crea un búfer de datos binarios de longitud 4.
• const view = new DataView(udpPacket): crea una vista para manipular datos binarios.
• view.setUint32(0, data): Escribe los datos recibidos del hilo principal en la primera posición del búfer.
• self.postMessage(udpPacket): envía paquetes UDP procesados ​​al hilo principal.

Paso 3: enviar y recibir mensajes UDP (modo multiproceso)

Ahora usaremos Web Workers en la aplicación front-end para enviar y recibir mensajes UDP. Modifique el código anterior y agregue el siguiente código socket.addEventListener('open', function (event) { ... })dentro :

// 创建发送UDP消息的Web Worker
const sendWorker = new Worker('udpSendWorker.js');

socket.addEventListener('open', function (event) {
    
    
  // 发送UDP数据
  sendWorker.postMessage(12345);
});

sendWorker.addEventListener('message', function (event) {
    
    
  // 接收来自Web Worker的处理后的UDP数据包
  const udpPacket = event.data;

  // 发送UDP数据包
  socket.send(udpPacket);
});

// 创建接收UDP消息的Web Worker
const receiveWorker = new Worker('udpReceiveWorker.js');

receiveWorker.addEventListener('message', function (event) {
    
    
  // 接收来自Web Worker的解析后的UDP消息
  const data = event.data;

  // 处理接收到的UDP消息
  console.log('接收到UDP消息:', data);
});

explicar:

• const sendWorker = new Worker('udpSendWorker.js'): cree un objeto Web Worker para enviar mensajes UDP, especificando el archivo JavaScript que se cargará.

• sendWorker.postMessage(12345): envía los datos que se enviarán al Web Worker que envía el mensaje UDP.

• sendWorker.addEventListener('message', function (event) { ... }): Cuando el Web Worker que envía un mensaje UDP envía un mensaje al hilo principal, ejecuta el bloque de código en la función de devolución de llamada.

• const udpPacket = event.data: obtiene el paquete UDP procesado del Web Worker que envió el mensaje UDP.

• socket.send(udpPacket): envía paquetes UDP a través de WebSocket.

• const receiveWorker = new Worker('udpReceiveWorker.js'): cree un objeto Web Worker para recibir mensajes UDP, especificando el archivo JavaScript que se cargará.

• receiveWorker.addEventListener('message', function (event) { ... }): Cuando el Web Worker que recibe el mensaje UDP envía el mensaje al hilo principal, ejecuta el bloque de código en la función de devolución de llamada.

• const data = event.data: obtiene el mensaje UDP analizado del Web Worker que recibió el mensaje UDP.

• console.log('接收到UDP消息:', data): Imprime el mensaje UDP recibido en la consola.

Conclusión:

Al introducir el modo de subprocesos múltiples y utilizar Web Workers, hemos realizado la función de interfaz de usuario de enviar y recibir mensajes UDP utilizando WebSocket. Uno de los Web Workers se utiliza para enviar mensajes UDP y el otro Web Worker se utiliza para recibir mensajes UDP. Espero que este artículo pueda ayudarle a implementar esta función y mejorar la eficiencia y el rendimiento de sus aplicaciones front-end. Si tiene alguna pregunta, no dude en preguntar.