Ant design pro项目中如何建立一个全局websocket

user_tYDk6iCh
  • 65

项目是用ant design pro搭建的,现在我想要用websocket做一个全局消息提示功能,当有新的消息推送的时候,相关页面发送请求获取数据。

我将websocket写在了basicLayout中,这个websocket是开启项目后就会建立的,是全局的唯一的websocekt。我的问题是,当websocket的onmessage中获取到返回消息时,我如何通知其他页面去重新发送请求呢?

回复
阅读 909
3 个回答

你的问题与什么用不用antd pro无关。实际问题是怎么优雅的在react处理全局消息。
我的建议是使用context。
1、App>组件用一个provider包裹。
2、cket接受到数据就对provider重新赋值,
3、个页面组件入口用useContext Hook获取值a。
4、写一个uesEffect,依赖项就是a
5、把你页面获取数据的请求写在这个useEffect里面。
ps: 如果你的websocket触发很频繁,可能会引起react的性能问题,因为顶层privode改变会引发所有子组件的rerender。所以需要注意,必要时可以使用useMemo、memo之类的方法。

因为我最近一直在写angular。不考虑框架的话这种情况我会使用rxjs。将数据变成流的概念。不过慎用,滥用rxjs就是灾难,血的教训🐶

感觉楼主可以试着去了解一下vue的eventBus概念,应该能用的上
附上某乎介绍地址某乎

创建 socket.ts

class Socket {
    private _socket: WebSocket
    init(url: string | URL, protocols?: string | string[] | undefined) {
        if (this._socket) {
            console.warn('socket 已经存在了')

            return
        }
        this._socket = new WebSocket(url, protocols)
    }
    get socket() {
        return this._socket
    }
}

export const mySocket = new Socket()

在 basicLayout 导入 mySocket 然后初始化 mySocket.init('xxxx')

后续别的组件 需要接收 onmessage 发送请求的话

import mySocket from 'socket.ts'
import { useEffect, useState } from 'react'
function Com() {
    const [satate, setState] = useState<string>()
    useEffect(() => {
        mySocket.socket.onmessage((ev: MessageEvent<any>) => {
            console.log('来消息了' + ev.data)
            setState(ev.data)
        })
    }, [])
    return <div>56666{satate}</div>
}

PS: Com 组件必须是 basicLayout的组件 而且是要 mySocket init 之后才初始化的子组件。
或者 你的mySocket init 放到 main.ts 里面初始化 那么 React任何组件都可以使用

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏