ES6 项目如何在任意地方拿到 WebScoket 消息?

作者站长头像
站长
· 阅读数 17

除了将WebSocket实例挂在window对象下这样以外的方式。

编辑

eventEmitter.ts

import EventEmitter from 'events';

/**
 * Instantiate EventEmitter
 */
export default new EventEmitter();

baseWebSocket.ts

import ee from '~lib/eventEmitter';

/**
 * Base WebSocket
 */
export default class BaseWebSocket extends WebSocket {
    constructor(url: string, protocols: any) {
        super(url, protocols);
    }
    onopen = () => {
        ee.emit('ws:open');
    }
    onmessage = (message: any) => {
        const data = JSON.parse(message.data);
        ee.emit('ws:message', data);
    }
    onerror = (event: any) => {
        ee.emit('ws:error', event);
    }
    onclose = (event: any) => {
        ee.emit('ws:close', event);
    }
    onSend(data: any) {
        this.send(JSON.stringify(data));
    }
}

socketMiddleware.ts

import BaseWebSocket from '~lib/baseWebSocket';
import ee from '~lib/eventEmitter';
import { receivedMessages } from '~app/socketSlice';

export default function createSocketMiddleware (url: string) {
    return (store: any) => {
        let chatWs: BaseWebSocket;

        const onMessage = (data: any) => {
            store.dispatch(receivedMessages(data));
        }

        return (next: any) => (action: any) => {
            switch (action.type) {
                case 'socket/connect': {
                    chatWs = new BaseWebSocket(`${url}?clientId=${action.payload}`);
                    ee.on('ws:message', onMessage);
                    break;
                }
                case 'socket/close': {
                    chatWs.close();
                    break;
                }
                case 'socket/sendMessages': {
                    chatWs.onSend(action.payload);
                    break;
                }
            }
            return next(action);
        }
    }
}
回复
1个回答
avatar
test
2024-07-13

发布订阅,onmessage 收到消息之后发布出去,想用的地方订阅就好了。

  1. 使用 window.addeventListener
  2. vue 的话有 bus 之类的东西
  3. 可以自己 '@antv/event-emitter' 实现一个
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容