我正在做一个Web应用程序，我想显示用户的在线/离线状态。为此，我需要监听WebSocket的关闭和打开事件。
const ws = new WebSocket('ws_url', 'token'); ws.onclose = (e) => { const data = { type: "offline", userId: "someid" } ws.send(JSON.stringify(data)) }
huus2vyu1#
使用useEffect你可以在组件销毁时传递函数，只需使用“return”isnide https://react.dev/reference/react/useEffect#usage
polkgigr2#
·您必须先创建一个函数来处理WebSocket关闭事件并发送数据。你已经在你的代码中有了这个部分：
WebSocket
const handleWebSocketClose = () => { const data = { type: "offline", userId: "someid" }; ws.send(JSON.stringify(data)); };
·可以使用beforeunload事件调用此函数
beforeunload
import { useEffect } from 'react'; function YourComponent() { useEffect(() => { // Add an event listener for beforeunload window.addEventListener('beforeunload', handleWebSocketClose); // Clean up the event listener when the component unmounts return () => { window.removeEventListener('beforeunload', handleWebSocketClose); }; }, []); // Your component logic here... return ( // Your component JSX here... ); } export default YourComponent;
2条答案
按热度按时间huus2vyu1#
使用useEffect你可以在组件销毁时传递函数，只需使用“return”isnide https://react.dev/reference/react/useEffect#usage
polkgigr2#
·您必须先创建一个函数来处理
WebSocket关闭事件并发送数据。你已经在你的代码中有了这个部分：·可以使用
beforeunload事件调用此函数