如何使用参数正确地重新连接到 Socket-IO 服务器

Question

我正在创建一些聊天之王。用户必须经过身份验证才能加入房间。在我的后端服务器上，我创建了登录中间件：

io.use((socket, next) => {
    try {
        const token = encodeURIComponent(socket.handshake.auth.token);
        const user = encodeURIComponent(socket.handshake.auth.user);
        
        if (token.length < 100) {
            next(new Error("Forbidden"));
        }

        const decoded = jwt.verify(socket.handshake.auth.token, SECRET_KEY);

        socket.user = user;
        socket.userId = decoded._id;
        next();
    } catch (err) {
        next(new Error("Forbidden"));
    }
})

它正在检查

auth

属性以获取加密的 JWT 令牌。身份验证完成后，将调用

next()

。 在我的前端，我使用

createContext

为我的 websocket 连接创建“存储”，并使用

SocketProvider

在我的页面上使用 websocket。

export const SocketProvider = ({ children }: { children: JSX.Element } ) => {
  const [socket, setSocket] = useState<SocketIOClient>(null);
  const token = window.localStorage.getItem("token");
  const user = window.localStorage.getItem("user");

  useEffect(() => {
    const newSocket = io(BACKEND_URL, {
      auth: {
          token: token,
          user: user
      }
    });
    setSocket(newSocket);

    return () => {
      newSocket.disconnect();
    };
  }, []);

  return (
    <SocketIOContext.Provider value={ socket }>
      { children }
    </SocketIOContext.Provider>
  );
};

登录后Websocket连接为空。我已经使用

console.log()

检查过这个。发生这种情况是因为

useEffect

连接到没有令牌的 websocket，所以后端服务器发送“禁止”，然后

socket === null

.

我的问题是：当

children

发生变化或令牌不为空时，如何强制 React 重新连接到 websocket？

Answer 1

我明白了。您必须将令牌传递给 redux 存储，然后在

useEffect

中添加与此 var 的依赖关系。当 token 在 redux 中是 changinx 时，socket 会像预期的那样使用 auth-token 重新连接到服务器。