组件卸载时如何关闭websockets连接？

Question

我的应用程序中有一个小错误，导致了一个大问题。在我的react-vite应用程序中，我集成了WebSocket来获取特定事物的实时状态。

问题：当用户查看组件时，应该将

active

状态发送到服务器。当用户离开页面时，组件应该仅发送

inactive

。但在我当前的实现中，它首先发送活动状态，然后当我离开时，它发送

inactive

，然后发送

active

。我尝试仅发送

active

和

inactive

。但这不起作用。一旦它发送“非活动”状态，它就会随后发送

active

。

为什么我没有关闭 WebSocket？ 我试图关闭它。但目前

react-use-websocket

包中不接受该方法。

我在寻找什么？ 我希望仅在组件安装时发送

active

状态，在组件卸载时发送

inactive

。

我正在寻找你们的可靠解决方案或建议。您的任何意见都会受到赞赏。开放学习任何东西。预先感谢。

我在这里使用的 WebSocket 包：

react-use-websocket

代码：

服务器网址：

const socketUrl = `wss://my-web-server/v1/api/wall/set/user/status/${token}/${id}`;

我的使用方法如下：

  const { sendJsonMessage, readyState, } = useWebSocket(socketUrl, { share: true });

发送消息：

  //common function for sending message
  const sendJsonMessageToServer = useCallback((status: any) => {
  if (readyState === WebSocket.OPEN) {
    sendJsonMessage(status);
  }
},
[readyState, sendJsonMessage]);

 //useEffect for checking if the component get mounted or not. 
  useEffect(() => {
sendJsonMessageToServer({ status: "active" });
return () => {
  if (readyState === ReadyState.OPEN) {
    sendJsonMessageToServer({ status: "inactive" });
  }
}; }, [readyState, sendJsonMessageToServer]);

Answer 1

您面临的问题可能是由于 WebSocket 连接的异步特性和 React 中组件卸载的时间造成的。

试试这个：-

import React, { useEffect } from 'react';
import { useWebSocket, ReadyState } from 'react-use-websocket';

const YourComponent = ({ token, id }) => {
  const socketUrl = `wss://my-web-server/v1/api/wall/set/user/status/${token}/${id}`;
  const { sendJsonMessage, readyState } = useWebSocket(socketUrl, { share: true });

  useEffect(() => {
    if (readyState === ReadyState.OPEN) {
      sendJsonMessage({ status: 'active' });
    }

    return () => {
      if (readyState === ReadyState.OPEN) {
        sendJsonMessage({ status: 'inactive' });
      }
    };
  }, [sendJsonMessage, readyState]);

  return <div>Your component content</div>;
};

export default YourComponent;