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

Question

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

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

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

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

Answer 1

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

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

Answer 2

jfriend00在这里写道：

这就是 webSockets 和 socket.io 连接的工作方式。 它们仅在页面期间持续。 当您从 go 到新的 URL 并加载新页面时，之前的 socket.io 连接已关闭，您在新页面中的代码可以自由创建新页面。 这就是浏览器中的工作方式。