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

Question

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

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

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

编辑：我在评论中也提出了这个问题。在那里，我了解到这个问题并不是真正可以解决的。所以我现在只在index.html中渲染game.html(在main.js中进行DOM操作(。

Answer 1

jfriend00在此处写入：

这就是webSockets和socket.io连接的工作方式。它们只持续在页面的持续时间内。当你转到一个新的URL并加载一个新页面，上一个socket.io连接已关闭，您的代码位于新页面可以免费制作新页面。这就是浏览器

Answer 2

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

如果你能给我一个代码示例，我可能会帮你。

Answer 3

您可以将整个Socket作为param传递到该路由，在那里所有的Socket.io函数都将与一样工作

const Room=({setSocket})=>{
var socket= useMemo(()=>(io.connect('http://localhost:5000')),[]);
const value=useMemo(()=>(Math.floor(Math.random() * 9000) + 1000),[])
socket.code = value
setSocket(socket)
}

在app.is 中

<Route path ='/CreateRoom' element={<CreateRoom setSocket={setSocket}/>}/>

使用状态挂钩，您可以在任何路径中导入