如何在应用程序范围内保留 Socket.io 套接字答案

【问题标题】：How to preserve Socket.io sockets app-wide如何在应用程序范围内保留 Socket.io 套接字
【发布时间】：2020-10-20 22:21:28
【问题描述】：

我正在尝试将 socket.io 功能添加到我的应用程序中。

我之前从未使用过socket.io，所以我不知道如何从这里开始。

到目前为止，我一直在使用 MERN 堆栈，下一步将实现用于聊天功能的 socket.io。问题是，我不知道何时连接，以及如何保留我的套接字。用户可以登录，所以我以为我可以在用户登录后进行连接，但是套接字是在组件中创建的，我无法从其他任何地方访问它。

问题是，我使用 JWT 令牌进行身份验证，所以我有一个功能，如果令牌尚未过期，则在转到新页面时“让用户登录”。

if(localStorage.jwtToken){
    const token = localStorage.jwtToken;
    setAuthToken(token);
    const user = jwt_decode(token);
    store.dispatch(action_setCurrentUser(user));
    store.dispatch(setGroupsOfUser({ id: user.id }));
    const currentTime = Date.now() / 1000;
    if(user.exp < currentTime){
        store.dispatch(logoutUser());
        window.location.href = './login';
    }
}

我以为我可以在这里连接，但是我的 ChatView 组件无法访问它来发送消息和内容。我需要一个套接字来发送通知，即使用户不在聊天室中，ChatView 组件也需要它来发送消息。

在登录派发后尝试连接，并将在线用户及其socketID存储在服务器上。

如果我尝试寻找解决方案，我得到的每一个结果都是关于使用 socket.io 进行身份验证的，但是我已经完成了身份验证，所以我不知道如何继续。

【问题讨论】：

您是否尝试过在顶级应用级别设置套接字？
不在 App.js 之上，那我如何将用户分配给套接字呢？你的意思是在 index.js 中吗？
对不起，我的意思是在应用程序、js 级别？您的问题似乎只是在子组件中设置它吧？
是的，我的意思是，我的子组件中需要它。如果我在 app.js 中连接并使用 Route 将套接字向下传递给子组件，您认为它会起作用吗？
是的，绝对 - 你应该在根（应用程序）级别设置你的套接字，使用调度程序 - 你的子组件可以订阅它，然后在任何更改时他们将收到更新......跨度>

标签： node.js reactjs socket.io

【解决方案1】：

按照建议，我决定在我的 App.js 中创建套接字并将其存储在我的状态中。我可以在我的子组件中使用这个存储的状态，并在登录后将它分配给服务器上的用户。

【讨论】：

【解决方案2】：

您可能想查看 redux。由于您拥有所有 auth 东西和所有 .处理应用程序范围的身份验证可能会变得混乱。

【讨论】：