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

Question

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

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

Answer 1

你的问题与什么用不用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就是灾难，血的教训🐶

Answer 2

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

Answer 3

创建 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任何组件都可以使用