如何在页面刷新时保持套接字实例？

Question

在我的根组件上，我正在像这样设置套接字，

const [socket, setSocket] = useState(null);
const setupSocket = () => {
    const token = localStorage.getItem('CC_Token');
    if (token && token.length > 0 && !socket) {
      const newSocket = io('http://localhost:8000', {
        query: {
          token: localStorage.getItem('CC_Token'),
        },
      });

      newSocket.on('disconnect', () => {
        setSocket(null);
        setTimeout(setupSocket, 3000);
        makeToast('error', 'Socket disconnected!');
      });

      newSocket.on('connect', () => {
        makeToast('success', 'Socket Connected');
      });

      setSocket(newSocket);
    }
  };

  useEffect(() => {
    setupSocket();
  }, []);

并使用 react-router 我将套接字实例作为道具传递。

<Route
  exact
  path="/chatroom/:id"
  render={() => <ChatroomPage socket={socket} />}
/>;

它工作正常，直到我刷新页面。当我刷新页面套接字时，它会返回到其初始状态（null），因此我无法发送任何消息。

此代码段来自 CharoomPage 组件。

  React.useEffect(() => {
    if (socket) {
      socket.emit("joinRoom", {
        chatroomId,
      });
    }

    return () => {
      //Component Unmount
      if (socket) {
        socket.emit("leaveRoom", {
          chatroomId,
        });
      }
    };
    //eslint-disable-next-line
  }, []);

页面刷新套接字为空，因此无法发出 joinRoom 事件。

我该如何实现才能在页面刷新时发出 joinRoom 事件？

Answer 1

如果您刷新页面，套接字将回到初始状态 null 并且 useEffect 应该运行.

但是您的 ChatRoomPage useEffect 没有将 socket 带入第二个参数。

试试

const ChatRoom = ({socket}) => {
  useEffect(() => {
    if( !socket) return;

    socket.emit("joinRoom", {chatroomId});
    return () => {
      if (!socket) return;
      socket.emit("leaveRoom", {chatroomId});
    };
  }, [socket]); //<== here
};

您的错误的奇怪之处在于它有时会在刷新之前起作用。

如何在页面刷新时保持套接字实例？

How to hold the socket instance on page refresh?

javascript

sockets

real-time

socket.io

reactjs