Estoy tratando de escuchar un evento personalizado en el cliente con websockets nativos y con ws en el back-end.
Primero creo un grupo de clientes conectados.
import express from 'express' import http from 'http' import WebSocket from 'ws' import { v4 as uuidv4 } from 'uuid' import processes from './routes/process.js' import { EventEmitter } from 'events' // Express const app = express() // Initialize a simple http server const server = http.createServer(app) // Initialize the WebSocket server instance const wss = new WebSocket.Server({ server }) let connections = {} wss.on('connection', (socket) => { socket.id = uuidv4() connections[socket.id] = socket socket.send(socket.id) console.log(`Client connected ID: ${socket.id}`) socket.on('close', () => { delete connections[socket.id] delete socket.id }) }) Y al reaccionar almaceno el socketID
const [socketID, setSocketID] = useState('') useEffect(() => { const socket = new WebSocket('ws://localhost:4000') socket.onmessage = (message) => setSocketID(message.data) }, []) Lo que me gustaría hacer es emitir un mensaje al cliente específico usando el socketID , uso axios de reaccionar para enviar el socketID en una solicitud a una ruta rápida.
Luego, de regreso en el servidor, uso EventEmitter para recoger la ID del cliente de la ruta, he omitido los detalles porque es un poco largo, pero en este punto el servidor identifica correctamente al cliente, el problema parece ser con el envío de un evento personalizado .
connections[socketID].send('notify', 'Hello specific client') Y en el cliente escucho el evento de nofify personalizado
useEffect(() => { const socket = new WebSocket('ws://localhost:4000') socket.onmessage = (message) => setSocketID(message.data) // Set notify listener to notify this specific client only socket.addEventListener('notify', (data) => { // I am expecting 'Hello specific client' console.log(data) }) }, []) Cuando inspecciono las herramientas de desarrollo de reacción, puedo ver que el socketID está recibiendo el 'evento personalizado' y cambia el socketID a la palabra notify . Claramente, ws solo está enviando la palabra notificar y no como un evento personalizado, sino como un mensaje normal que el cliente recoge como un mensaje en lugar de onmessage .
Como no puedo encontrar nada sobre el envío de eventos personalizados de ws, solo utilicé el único evento de envío para hacer todo, adjunté una cadena de eventos al mensaje para saber cuál se activó.
No es ideal, pero funciona. Si alguien puede pensar en una mejor manera, por favor hágamelo saber.
wss.on('connection', (socket) => { socket.id = uuidv4() connections[socket.id] = socket socket.send(JSON.stringify({ event: 'ID', id: socket.id })) console.log(`Client connected ID: ${socket.id}`) socket.on('close', () => { delete connections[socket.id] delete socket.id }) }) connections[socketID].send( JSON.stringify({ event: 'notify', payload: 'Hello specific client')}) ) useEffect(() => { const socket = new WebSocket('ws://localhost:4000') socket.onmessage = (message) => { const data = JSON.parse(message.data) if (data.event === 'ID') { setSocketID(data.id) } if (data.event === 'notify') { console.log(data.payload) } } }, [])