1

我有一个socket用于调度和侦听来自服务器的事件的类。

该类具有在和state之间进行同步的方法。serverclient

以下是我如何监听来自服务器的更改或事件。

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

还有另一种方法是订阅类store内部并使用任何更改来更新。在对这些侦听器和调度程序的当前结构进行任何更改之前，我没有实现任何东西，我需要通过列出每个范例的and来做出更好的决定。如果通过中间件范式的真实示例来回答，我将不胜感激。Gamestoreproscons

4

1 回答 1

0

大多数套接字都有自己的事件监听器。例如，这是Primus客户端监听器的工作方式：

primus.on('data', function (data) {
  if (primus.reserved(data.args[0])) return;

  primus.emit.apply(primus, data.args);
})

我假设你的套接字也有这种监听器。同步下游数据（即：服务器到客户端）的最佳方式是在该处理程序中。但是对于上游数据更新，即：客户端到服务器，只需将处理程序放在组件上，就像您的代码片段一样。

于 2022-01-28T22:10:31.127 回答