Tengo una clase de socket para enviar y escuchar eventos del servidor.
La clase tiene un método para sincronizar state entre server y client .
así es como escucho los cambios o eventos del servidor.
import React, { useEffect, useState } from 'react' import { useStore } from "./store"; // this is a zustand store object import Game from "./game"; export const Lobby = ({ user }) => { const players = useStore(state => state.players); const dispatch = useStore(state => state.dispatch) const addPlayer = (player) => { dispatch({ type: "NEW_PLAYER", player }) } useEffect(() => { // inside Game -> this.eventListeners[key].push(cb) Game.register('new-palyer', addPlayer); }, []) return ( <div> { players.map(player => <span>{player.name}</span>) } </div> ) } Hay otra forma de suscripción a la store dentro de la clase Game y actualización de la store con cualquier cambio. No implemento ninguno, pero antes de cualquier cambio en la estructura actual de estos oyentes y despachadores, necesito tomar una mejor decisión al enumerar los pros y los cons de cada paradigma. Agradezco si responde con el ejemplo real del paradigma de middleware.
La mayoría de los sockets tienen su propio detector de eventos. Por ejemplo, así es como funciona el escucha del cliente de Primus :
primus.on('data', function (data) { if (primus.reserved(data.args[0])) return; primus.emit.apply(primus, data.args); })Supongo que su socket también tiene este tipo de oyente. La mejor manera de sincronizar datos descendentes , es decir, servidor a cliente, es en ese controlador. Pero para la actualización de datos ascendentes , es decir, de cliente a servidor, simplemente coloque el controlador en el componente como su fragmento de código.