EventEmitter监听事件
实现原理:
定义一个EventEmitter
构造函数,初始化一个事件集合events
。
通过不同的 type
来区分不同的事件类型,不同的对象同一个 type
可以有多个事件。
事件监听的类型 | 实现效果 |
---|---|
EventEmitter.on() | 注册事件 |
EventEmitter.emit() | 触发注册事件 |
EventEmitter.off() | 注销事件 |
EventEmitter.removeListener() | 移除指定事件的某个监听器 |
实现过程:
1. 创建事件总线
import {EventEmitter} from 'events';
export default new EventEmitter();
2. 监听事件并移除事件总线
import EventEmitter from '@/utils/eventEmitter';
// 这里是把事件类型写在了全局,然后在需要的地方引入
import { emitterEvent } from '@/Constant';
useEffect(() => {
const consultantWaitEvaluation = (val) => {
console.log('consultantWaitEvaluation', val);
}
// 注册监听事件,第一个参数是事件类型,第二个是需要执行的函数
EventEmitter.on(emitterEvent.CONSULT_WAIT_EVALUATE, consultantWaitEvaluation);
// 注销该事件
return () => {
EventEmitter.removeListener(emitterEvent.CONSULT_WAIT_EVALUATE, consultantWaitEvaluation);
}
}, [])
3. 触发事件
这边的代码偏向业务型,我口述一下怎么实现的。
首先是通过websocket
拿到后端给我推送的消息,我需要在在其他的页面拿到这个消息,并且我也不确定这个消息到底是什么时候发送的。所以我需要拿到这个消息的时候,触发这个事件,这样的话在其他已经执行注册的页面上就可以拿到这个消息了。
以我需要拿到这个消息的时候,触发这个事件,这样的话在其他已经执行注册的页面上就可以拿到这个消息了。