使用react的hook写法实现当前写页面加载时连接websocket，卸载页面时关闭websocket

最新推荐文章于 2024-06-18 10:28:47 发布

只想看世界

最新推荐文章于 2024-06-18 10:28:47 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： react

本文链接：https://blog.youkuaiyun.com/weixin_43801836/article/details/115971932

本文介绍了如何利用React的Hook，特别是useEffect，来实现在页面加载时开启WebSocket连接，而在页面卸载时关闭连接。通过在useEffect中设置相应的逻辑，确保了WebSocket生命周期与React组件的生命周期同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

##因为useEffect比较类组件的写法轻量级，所以采用useEffect写法

首先想到的是在在useEffect中定义，加载时就调用websockeet方法，建立连接，当页面卸载时就调用close方法关闭连接。
具体做法
定义一个ws用于打开关闭连接

//全局定义一个变量，用于打开关闭连接
let ws ;
//定义打开连接的方法
const webSocket = () => {
        return new Promise((resolve, reject) => {
            ws = new WebSocket(url);
            // let res = [];
            ws.onopen = () => {
                if (ws.readyState === 1) {
                    console.log("websocket连接成功...");
                    resolve(ws)
                }
            };
            ws.onmessage = (e) => {
                 console.log("后台推送：", JSON.parse(e.data));
               let res = JSON.parse(e.data);
                setDataSource(res)
            };
            ws.onclose = () => {
                console.log("websocket连接关闭...")
            };
            ws.onerror = (err: any) => {
                reject(err)
            }
        })
    };
    //定义关闭连接的方法
    const close=()=>{
        ws.close();
    }
 useEffect(()=>{
    console.log("连接")
webSocket();
return ()=>{
    console.log("卸载")
    close()}
},[])