Блог

Главная - Вопросы по программированию - Как удерживать экземпляр сокета при обновлении страницы?

Как удерживать экземпляр сокета при обновлении страницы?

#javascript #reactjs #sockets #socket.io #real-time

#javascript #reactjs #сокеты #socket.io #в режиме реального времени

Вопрос:

в моем корневом компоненте я настраиваю сокет следующим образом,

 const [socket, setSocket] = useState(null);
const setupSocket = () => {
    const token = localStorage.getItem('CC_Token');
    if (token amp;amp; token.length > 0 amp;amp; !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 component .

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

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

При обновлении страницы сокет имеет значение null, поэтому он не может выдать joinRoom событие.

Как я могу реализовать это так, чтобы при обновлении страницы я генерировал joinRoom событие?

Ответ №1:

Ну, если вы обновите страницу, сокет вернется в исходное состояние null , и useEffect он должен запуститься.

Но ваш эффект использования ChatRoomPage не учитывается socket во вторых аргументах.

Попробуйте с

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

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

Странная часть вашей ошибки заключается в том, что она иногда срабатывает перед обновлением.

Метки: