加载新页面时保持套接字连接答案

【问题标题】：Keep socket connection when new page is loaded加载新页面时保持套接字连接
【发布时间】：2020-05-09 13:18:25
【问题描述】：

我有一个带有 socket.io 和 node.js 的小项目。基本上登陆页面（index.html）是玩家的等候室，他们可以同意互相玩。在这种情况下，我想将它们重定向到不同的 html（game.html，与 index.html 位于同一文件夹中）。我想保持套接字连接，因为在游戏过程中必须与服务器通信。我尝试了两种方法，但都失败了。在每种情况下，我都会更改客户端 window.location（如 here 所述）。

1) 在 index.html 的 javascript 文件中，我添加了 socket 对象的导出：export const socket = io(); 然后我在与 game.html 关联的另一个 javascript 文件中导入了这个对象。但由于某种原因，这不起作用。

2) 我在与 game.html 关联的 javascript 文件中添加了另一个 const socket = io();。然后我可以使用那个对象。但正如预期的那样，这会建立一个新的连接，而之前的连接会丢失。

编辑：我在评论中也问过这个问题here。在那里我了解到这个问题并不能真正解决。所以我现在只在 index.html 中渲染 game.html（在 main.js 中进行 DOM 操作）。

【问题讨论】：

也许这对stackoverflow.com/questions/49119209/…有帮助，但我不太明白。

标签： javascript node.js sockets session socket.io

【解决方案1】：

jfriend00 写here：

这就是 webSockets 和 socket.io 连接的工作方式。他们只持续在页面的持续时间内。当您转到一个新的 URL 并加载一个新的页面，之前的 socket.io 连接被关闭并且你的代码在新页面可以免费制作一个新页面。这就是事情的运作方式浏览器。

【讨论】：

【解决方案2】：

Martin，如果您将客户端重定向到不同的端点，则必须启动与服务器的新握手，这样您将获得一个新的 socket.id。您的服务器发出的信息是什么？您是否能够只重新渲染反映新数据的 DOM，而不是转到完全不同的文件？ React 的状态管理可能会缓解您的问题吗？

如果您能给我一个代码示例，我可能会为您提供帮助。

【讨论】：

谢谢！设置基本上是在等候室中，两名玩家同意玩游戏。为此的客户端-服务器通信已经完成并且很容易。因此，用户被从等候室 (index.html) 重定向到实际游戏 (game.html)。是的，可以只使用一个 html 并在 index.html 中渲染 game.html 中的内容，因为在这种情况下，结构也非常相似。但对于其他项目，这是行不通的。我想知道当我们告诉 服务器 将客户端重定向到某个地方时是否真的需要新的握手（但我不知道它的语法）。
我现在也在问题本身中解释了这一点。