如何使用 socket.io 将所有客户端重定向到另一个页面？

IT技术 node.js reactjs socket.io
2021-05-17 20:03:03

我正在开发一款在线多人卡牌反人类游戏（前面是 React，用于重定向的 React 路由器，后面是 Node）我试图在大厅中的一个用户时重定向“大厅”或房间中的所有客户端点击“开始”，但现在只有点击开始的用户被重定向。

这个想法是有人会设置一个新游戏，它会有一个独特的 pin，在你创建游戏并选择你的头像后，其他人可以使用该 pin 加入大厅（这部分工作正常，大厅中的用户为所有用户实时更新），并且只有创建游戏的人才能在所有用户加入后获得“开始”按钮以单击开始游戏，这应该重定向大厅中的所有用户。

在客户端，在大厅组件的构造函数中，我有 

   socket.on("start game", () => {
      this.props.history.push(`/${this.props.match.params.pin}`);
    });

对于有权访问开始按钮的一个用户，单击它时会触发以下内容

socket.emit("start");

然后进入后端

   socket.on('start', () => { 
        socket.emit('start game');
    })

但只有点击开始的用户被重定向，我似乎无法弄清楚这一点。

这是我第一次尝试实现套接字，我不太确定我在这里会遗漏什么

3个回答

剩下的工作就是将此事件广播到给定命名空间或 room中的所有套接字。目前，您仅将其发送到发出“开始”事件的套接字。这是一种方法：

客户端：

const socket = io("lobby", { //Connecting to a namespace called "lobby"
    transports: ["websocket"]
});
socket.on("start game", () => {
    this.props.history.push(`/${this.props.match.params.pin}`);
});

//...
socket.emit("start");

服务器端：

io.of("/lobby").on("connection", (socket) => {
    socket.on("start", () => {
        io.of("/lobby").emit("start game");
    });
});

服务器需要向每个要重定向的用户发送 socket.io 消息，并使用他们应该重定向到的 URL。每个客户端都应该有一个 socket.io 消息的侦听器，当他们得到它时，他们设置window.location为新的 URL 以导致重定向。

因此，服务器会向每个应该重定向的客户端发送类似这样的信息：

socket.emit('redirectToNewGame', newGameURL);

其中 socket 是应该重定向的每个用户的套接字。

然后，每个客户端都会有这样的代码：

socket.on('redirectToNewGame', newGameURL => {
    // redirect to new URL
    window.location = newGameURL;
});

如果整个过程是由用户单击其自己窗口中的按钮启动的，则该用户向服务器发送消息以启动整个过程。当服务器收到该消息时，它会通过向每个客户端发送 socket.io 消息来通知应该遵循该重定向的特定客户端集。

您的服务器如何准确跟踪哪些客户端应该重定向到该 URL 取决于您的设计。在 socket.io 的服务器端，使用房间是很常见的，但它也可以在你自己的代码中完成。这只是您的应用程序设计的一部分，也是用户在整个过程之前会合的方式。

一些回复的人建议我使用命名空间，这很有意义，而且很有效。 

io.in(pin).emit("start game");

而不是简单地

       socket.emit('start game');

让它工作

其它你可能感兴趣的问题
上一篇React 按钮中的无限循环 下一篇无法安装渐进式 Web 应用站点：没有可显示的图标