【HarmonyOS NEXT】EventHub和Emitter的使用场景与区别

一、EventHub是什么？

移动应用开发的同学应该比较了解EventHub，类似于EventBus。标准的事件广播通知，订阅，取消订阅的处理。EventHub模块提供了事件中心，提供订阅、取消订阅、触发事件的能力。

类似的框架工具有很多，例如MQTT。使用起来也超级简单，从介绍上就能大体了解使用方式，见名知意的一种快捷工具。通过一个事件ID即TAG作为唯一的key，进行事件广播通知和订阅。

在ArkUI框架中，EventHub通过单例对象的形式提供，因为放在上下文里。所以每个UIAbility对应一个EventHub。不同的UIAbility的EventHub是不同步的。

从上下文获取EventHub有两种方式：

在UIAbility中直接通过context获取：

typescript 复制代码

import { UIAbility, Context, Want, AbilityConstant } from '@kit.AbilityKit';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    // 获取eventHub
    let eventhub = this.context.eventHub;
    });
  }
}

在page界面或者组件中，通过UIcontext强转为UIAbilityContext获取：

typescript 复制代码

let context = getContext(this) as common.UIAbilityContext;
let eventhub = context.eventHub;

获得到EventHub单例对象后，就可以调用emit发送事件，on监听事件，off取消监听事件。进行事件广播的使用。

typescript 复制代码

  // TAG作为事件的id为字符串类型
  private EVENT_TAG: string = "TEST";
  
  /**
   * EventHub事件回调
   */
  callbackByEventHub = (content: string)=>{
    promptAction.showToast({
      message: JSON.stringify(content)
    });
  }
  
this.eventHub?.on(this.EVENT_TAG, this.callbackByEventHub); this.eventHub?.off(this.EVENT_TAG, this.callbackByEventHub);
this.eventHub?.off(this.EVENT_TAG);// 第二个参数不传，则代表EVENT_TAG下的所有注册回调都清空

详情参见官网，示例DEMO参见最后章节： UIAbility组件与UI的数据同步 EventHub API文档

二、Emitter是什么？

类似于EventHub的使用，只是内部封装了事件队列和分发的机制。多了事件id和优先级的概念。并且Emitter也可以在不同线程内调用。

Emitter区别于上文中的EventHub的事件ID，定义了一层对象进行约束。除了事件id，还需要设置事件级别。

typescript 复制代码

  private event: emitter.InnerEvent = {
    eventId: this.eventId,
    priority: emitter.EventPriority.LOW   // 定义一个eventId为1的事件，事件优先级为Low
  };

事件级别分为以下几种类型：和EventHub不同的是，事件广播的内容，也进行了约束。发送事件时传递的数据，支持数据类型包括Array、ArrayBuffer、Boolean、DataView、Date、Error、Map、Number、Object、Primitive（除了symbol）、RegExp、Set、String、TypedArray，数据大小最大为16M。

data是key val形式的对象，可以自己定义里面的key和val。

typescript 复制代码

    let eventData: emitter.EventData = {
      data: {
        content: '测试数据',
        id: 1,
        isEmpty: false
      }
    };

事件的广播发送，订阅和取消订阅与EventHub区别不大。只是多了once一次性监听而已。

typescript 复制代码

  private callback = (eventData: emitter.EventData): void => {

  };

    emitter.emit(this.event, eventData);
    emitter.once(this.event, this.callback)
    emitter.off(this.event.eventId, this.callback);

详情参见官网，示例DEMO参见最后章节： 使用Emitter进行线程间通信 EventHub API文档

三、EventHub和Emitter的使用场景与区别

EventHub是线程内使用的时间广播工具，Emitter是线程间通信使用的工具
EventHub的使用更简单，属于轻量级的广播工具，主要用于UIAbility和page之间，page和组件之间，组件和组件之间，UI和VM之间的通信，传递的数据内容形式多变且方便（...args: Object\[\]）。Emitter属于重量级的广播工具，封装了优先级和队列的逻辑。传递的数据内容，必须有包裹成进行约束（emitter.EventData）
Emitter监听设置，在on基础上，额外提供了once一次性监听的API。触发之后不需要再手动off取消监听。EventHub则没有。

源码DEMO解析：

typescript 复制代码

import { emitter } from '@kit.BasicServicesKit';
import { common } from '@kit.AbilityKit';
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct EventHubAndEmitterTestPage {

  // --------------- EventHub
  private context = getContext(this) as common.UIAbilityContext;
  private eventHub: common.EventHub | null = null;
  private EVENT_TAG: string = "TEST";

  private emitByEventHub(){
    this.eventHub = this.context.eventHub;
    this.eventHub.emit(this.EVENT_TAG, "测试数据EventHub");
  }

  /**
   * EventHub事件回调
   */
  callbackByEventHub = (content: string)=>{
    promptAction.showToast({
      message: JSON.stringify(content)
    });
  }

  private registerByEventHub = ()=>{
    this.eventHub?.on(this.EVENT_TAG, this.callbackByEventHub);
  }

  private unRegisterByEventHub = ()=>{
    this.eventHub?.off(this.EVENT_TAG, this.callbackByEventHub);
  }

  // --------------- Emitter
  private eventId: number = 1;
  private event: emitter.InnerEvent = {
    eventId: this.eventId,
    priority: emitter.EventPriority.LOW   // 定义一个eventId为1的事件，事件优先级为Low
  };

  private emitByEmitter(){
    let eventData: emitter.EventData = {
      data: {
        content: '测试数据',
        id: 1,
        isEmpty: false
      }
    };

    // 发送eventId为1的事件，事件内容为eventData
    emitter.emit(this.event, eventData);
  }

  private callback = (eventData: emitter.EventData): void => {
    promptAction.showToast({
      message: JSON.stringify(eventData)
    });
  };

  private registerByEmitter(){
    emitter.on(this.event, this.callback);
    // 监听触发后，自动消除监听。不需要手动off
    emitter.once(this.event, this.callback)
  }

  private unRegisterByEmitter(){
    emitter.off(this.event.eventId, this.callback);
  }

  // ---------------点击事件处理

  onEmitEvent = ()=>{
    this.emitByEmitter();
    this.emitByEventHub();
  }

  onRegisterEvent = ()=>{
    this.registerByEmitter();
    this.registerByEventHub();
  }

  onUnRegisterEvent = ()=>{
    this.unRegisterByEmitter();
    this.unRegisterByEventHub();

  }
  
  /**
   * 统一样式封装
   */
  @Styles ButtonStyle(){
    .width(px2vp(350))
    .height(px2vp(200))
    .margin({ top: px2vp(66) })
  }

  build() {
    Column(){
      Button("发送事件")
        .ButtonStyle()
        .onClick(this.onEmitEvent)

      Button("监听事件")
        .ButtonStyle()
        .onClick(this.onRegisterEvent)

      Button("取消事件")
        .ButtonStyle()
        .onClick(this.onUnRegisterEvent)

    }.size({
      width: "100%",
      height: "100%"
    })
  }
}