@riil-frontend/component-riil-event-emitter NPM

消息推送

@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) => {
       /**业务处理**/
    },
  });