ES6 项目如何在任意地方拿到 WebScoket 消息?
除了将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个回答

test
2024-07-13
发布订阅,onmessage 收到消息之后发布出去,想用的地方订阅就好了。
- 使用 window.addeventListener
- vue 的话有 bus 之类的东西
- 可以自己 '@antv/event-emitter' 实现一个
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容