README
消息推送
@riil-frontend/component-riil-event-emitter
石墨文档地址:https://shimo.im/docs/w89XjXWgRcWGHvw9/
背景: 现前端与后端服务整体连一个 websocket 服务,为满足各模块消息推送需求需求,前端做同接收推送消息,并将各模块消息同分发。
websocket 协议
项目路径:/common/ws/{userToken}
报文:
{
"module": "业务方标识", // notificaitonMessage
"message": "json字符串"
}
前端事件分发机制
为什么不使用 window 中的事件
由于浏览器中的 window 自带的事件监听机制,对于多事件同时触发时会存在数据丢失问题,故不是使用 window 的事件监听
使用 eventemitter3 做事件分发
- 依赖包 npm 仓库地址:https://www.npmjs.com/package/eventemitter3
初始化事件推送
- 为满足事件推送可在 cbb 中使用,将事件推送放在 windows 上
开启动 websocket
主工程各业务模块如何接收消息
- 添加事件监听(注意:无特殊需求,离开本模块请卸载监听,或使用提供的 hook 处理)
import { EE } from '@riil-frontend/component-riil-event-emitter';
import React, { useEffect } from 'react';
useEffect(() => {
EE.on("业务标识", "前端模块名(为区分同页面接收同一后端标识)",(data) => {//添加事件
/**业务处理**/
})
return () => {
EE.removeListener("业务标识", "前端模块名(为区分同页面接收同一后端标识)");
};
}, []);
- 取消监听事件
import { EE } from '@riil-frontend/component-riil-event-emitter';
import React, { useEffect } from 'react';
useEffect(() => {
EE.on("业务标识", "前端模块名(为区分同页面接收同一后端标识)",(data) => {//添加事件
/**业务处理**/
})
return () => {
EE.removeListener("业务标识", "前端模块名(为区分同页面接收同一后端标识)");
};
}, []);
- 自动卸载的 hook 如何使用
import { useEventListener } from '@riil-frontend/component-riil-event-emitter';
useEventListener("业务标识", {
name:"前端模块名(为区分同页面接收同一后端标识)",//默认auto-name
onMessage: (data) => {
/**业务处理**/
},
});
cbb 工程如何使用接收消息
- 添加事件监听
useEffect(() => {
window.EE?.on("业务标识", "前端模块名(为区分同页面接收同一后端标识)", (data) => {
/**业务处理**/
})
return () => {
window.EE?.removeListener("业务标识", "前端模块名(为区分同页面接收同一后端标识)");//添加事件
};
}, [])
- 取消事件监听
useEffect(() => {
window.EE?.on("业务标识", "前端模块名(为区分同页面接收同一后端标识)", (data) => {
/**业务处理**/
})
return () => {
window.EE?.removeListener("业务标识", "前端模块名(为区分同页面接收同一后端标识)");//添加事件
};
}, [])
- 自动卸载的 hook 如何使用
import { useCbbEventListener } from '@riil-frontend/component-riil-event-emitter';
useCbbEventListener("业务标识", {
name:"前端模块名(为区分同页面接收同一后端标识)",//默认auto-name,
onMessage: (data) => {
/**业务处理**/
},
});
全模块推送使用(只要有消息就会走此标识符号)
import { useCbbEventListener } from '@riil-frontend/component-riil-event-emitter';
useCbbEventListener("all-module", {
name:"前端模块名(为区分同页面接收同一后端标识)",//默认auto-name,
onMessage: (data) => {
/**业务处理**/
},
});
API
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|