OpenClaw08_监听器针对中文版本openClaw进行源码阅读当前项目针对【TypeScript中监听器】逻辑进行解读文章目录OpenClaw08_监听器1-参考地址2-知识整理3-动手实操1-TypeScript中监听器-源码部分2-TypeScript中监听器-简化版本如何测试方式一在线运行最快30秒方式二本地运行1-参考地址github版本OpenClawCNgitee版本OpenClawCNmac进行openclaw卸载参考openClaw源码拆解系列2-知识整理1OpenClaw源码-TypeScript中监听器-源码部分心跳极值2OpenClaw源码-TypeScript中监听器-简化版本3-动手实操1-TypeScript中监听器-源码部分// 心跳指示器类型定义用于 UI 层面展示不同的状态反馈// ok: 正常alert: 告警/发送中error: 错误exporttypeHeartbeatIndicatorTypeok|alert|error;// 心跳事件数据负载结构体封装了心跳请求与响应的核心信息exporttypeHeartbeatEventPayload{ts:number;status:sent|ok-empty|ok-token|skipped|failed;to?:string;preview?:string;durationMs?:number;hasMedia?:boolean;reason?:string;/** 心跳检测经由的通信通道名称。 */channel?:string;/** 标记消息是否被静默处理未触发 ShowOk 提示。 */silent?:boolean;/** 对应 UI 组件展示的指示器类型。 */indicatorType?:HeartbeatIndicatorType;/** 在多账户场景下区分归属的账户 ID。 */accountId?:string;};// 解析心跳事件状态码将其转换为对应的 UI 显示指示器类型// 参数status - 心跳事件的具体状态描述// 返回值对应的 IndicatorType 枚举值如果是 skipped 则返回 undefinedexportfunctionresolveIndicatorType(status:HeartbeatEventPayload[status],):HeartbeatIndicatorType|undefined{switch(status){// 空包成功或 Token 验证成功后视为正常状态caseok-empty:caseok-token:returnok;// 发送中通常作为告警提示展示告知用户正在处理casesent:returnalert;// 连接或请求失败时标识为错误状态casefailed:returnerror;// 跳过的步骤不产生具体的 UI 指示caseskipped:returnundefined;}}// 全局变量缓存最近一次发出的心跳事件数据用于后续查询letlastHeartbeat:HeartbeatEventPayload|nullnull;// 全局变量维护一个集合存储所有监听心跳事件的回调函数constlistenersnewSet(evt:HeartbeatEventPayload)void();// 发射心跳事件逻辑包含自动填充时间和分发通知// 参数evt - 待发送的心跳基础数据对象不含时间戳// 业务逻辑生成完整时间戳更新本地缓存遍历并调用所有订阅者exportfunctionemitHeartbeatEvent(evt:OmitHeartbeatEventPayload,ts){// 将当前系统时间与传入事件合并形成完整的事件负载constenriched:HeartbeatEventPayload{ts:Date.now(),...evt};// 保存最新的心跳快照到全局上下文lastHeartbeatenriched;// 依次通知所有已注册的监听器for(constlisteneroflisteners){try{listener(enriched);}catch{// 捕获单个监听器可能抛出的异常确保不影响其他监听器的执行/* ignore */}}}// 注册心跳事件监听器// 参数listener - 当事件发生时将被执行的回调函数// 返回值返回一个取消订阅函数调用它可从监听列表中移除当前回调exportfunctiononHeartbeatEvent(listener:(evt:HeartbeatEventPayload)void):()void{listeners.add(listener);// 返回清理函数实现类似 React useEffect 的 cleanup 模式return()listeners.delete(listener);}// 获取系统内部记录的最后一个心跳事件快照// 返回值若曾有过心跳发射则返回 Payload 对象否则返回 nullexportfunctiongetLastHeartbeatEvent():HeartbeatEventPayload|null{returnlastHeartbeat;}2-TypeScript中监听器-简化版本// // 极简事件总线 - 感受 TS 函数即值的语法// // 1. 【核心】定义一个存函数的盒子// 注意这里直接存的是 (n: number) void 这个函数类型constcallbacksnewSet(n:number)void();// 2. 【订阅】把函数塞进盒子functionsubscribe(fn:(n:number)void):()void{callbacks.add(fn);console.log( 订阅成功当前共${callbacks.size}个监听者);// 返回取消订阅函数也是一个函数return(){callbacks.delete(fn);console.log( 取消订阅剩余${callbacks.size}个);};}// 3. 【广播】遍历盒子挨个调用存的函数functionbroadcast(value:number):void{console.log(\n 广播数字:${value});for(constfnofcallbacks){fn(value);// ← 这就是 Java 做不到的直接括号调用}}// // 测试代码// console.log( 测试开始 \n);// 测试1创建3个不同的函数像创建3个变量一样简单constlistenerA(n:number)console.log([A] 收到:${n}平方是${n*n});constlistenerB(n:number)console.log([B] 收到:${n}翻倍是${n*2});constlistenerC(n:number)console.log([C] 收到:${n}我是来捣乱的 );// 测试2订阅把函数值存进 SetconstunsubscribeAsubscribe(listenerA);constunsubscribeBsubscribe(listenerB);subscribe(listenerC);// 这个不保存取消函数就永远无法移除了 // 测试3广播broadcast(10);// 测试4取消 A 的订阅再广播console.log(\n--- 取消 A 的订阅 ---);unsubscribeA();broadcast(5);// 测试5取消 B 的订阅再广播只剩 C 了console.log(\n--- 取消 B 的订阅 ---);unsubscribeB();broadcast(99);console.log(\n 测试结束 );日志打印[LOG]: 测试开始 [LOG]: 订阅成功当前共 1 个监听者[LOG]: 订阅成功当前共 2 个监听者[LOG]: 订阅成功当前共 3 个监听者[LOG]: 广播数字: 10[LOG]: [A] 收到: 10平方是 100[LOG]: [B] 收到: 10翻倍是 20[LOG]: [C] 收到: 10我是来捣乱的 [LOG]: --- 取消 A 的订阅 ---[LOG]: 取消订阅剩余 2 个[LOG]: 广播数字: 5[LOG]: [B] 收到: 5翻倍是 10[LOG]: [C] 收到: 5我是来捣乱的 [LOG]: --- 取消 B 的订阅 ---[LOG]: 取消订阅剩余 1 个[LOG]: 广播数字: 99[LOG]: [C] 收到: 99我是来捣乱的 [LOG]: 测试结束 [LOG]: 测试开始 [LOG]: 订阅成功当前共 1 个监听者[LOG]: 订阅成功当前共 2 个监听者[LOG]: 订阅成功当前共 3 个监听者[LOG]: 广播数字: 10[LOG]: [A] 收到: 10平方是 100[LOG]: [B] 收到: 10翻倍是 20[LOG]: [C] 收到: 10我是来捣乱的 [LOG]:--- 取消 A 的订阅 ---[LOG]: 取消订阅剩余 2 个[LOG]: 广播数字: 5[LOG]: [B] 收到: 5翻倍是 10[LOG]: [C] 收到: 5我是来捣乱的 [LOG]:--- 取消 B 的订阅 ---[LOG]: 取消订阅剩余 1 个[LOG]: 广播数字: 99[LOG]: [C] 收到: 99我是来捣乱的 [LOG]: 测试结束 [LOG]: 测试开始 [LOG]: 订阅成功当前共 1 个监听者[LOG]: 订阅成功当前共 2 个监听者[LOG]: 订阅成功当前共 3 个监听者[LOG]: 广播数字: 10[LOG]: [A] 收到: 10平方是 100[LOG]: [B] 收到: 10翻倍是 20[LOG]: [C] 收到: 10我是来捣乱的 [LOG]: --- 取消 A 的订阅 ---[LOG]: 取消订阅剩余 2 个[LOG]: 广播数字: 5[LOG]: [B] 收到: 5翻倍是 10[LOG]: [C] 收到: 5我是来捣乱的 [LOG]: --- 取消 B 的订阅 ---[LOG]: 取消订阅剩余 1 个[LOG]: 广播数字: 99[LOG]: [C] 收到: 99我是来捣乱的 [LOG]: 测试结束 [LOG]: 测试开始 [LOG]: 订阅成功当前共 1 个监听者[LOG]: 订阅成功当前共 2 个监听者[LOG]: 订阅成功当前共 3 个监听者[LOG]: 广播数字: 10[LOG]: [A] 收到: 10平方是 100[LOG]: [B] 收到: 10翻倍是 20[LOG]: [C] 收到: 10我是来捣乱的 [LOG]: --- 取消 A 的订阅 ---[LOG]: 取消订阅剩余 2 个[LOG]: 广播数字: 5[LOG]: [B] 收到: 5翻倍是 10[LOG]: [C] 收到: 5我是来捣乱的 [LOG]: --- 取消 B 的订阅 ---[LOG]: 取消订阅剩余 1 个[LOG]: 广播数字: 99[LOG]: [C] 收到: 99我是来捣乱的 [LOG]: 测试结束 [LOG]: 测试开始 [LOG]: 订阅成功当前共 1 个监听者[LOG]: 订阅成功当前共 2 个监听者[LOG]: 订阅成功当前共 3 个监听者[LOG]: 广播数字: 10[LOG]: [A] 收到: 10平方是 100[LOG]: [B] 收到: 10翻倍是 20[LOG]: [C] 收到: 10我是来捣乱的 [LOG]: --- 取消 A 的订阅 ---[LOG]: 取消订阅剩余 2 个[LOG]: 广播数字: 5[LOG]: [B] 收到: 5翻倍是 10[LOG]: [C] 收到: 5我是来捣乱的 [LOG]: --- 取消 B 的订阅 ---[LOG]: 取消订阅剩余 1 个[LOG]: 广播数字: 99[LOG]: [C] 收到: 99我是来捣乱的 [LOG]: 测试结束 [LOG]: 测试开始 [LOG]: 订阅成功当前共 1 个监听者[LOG]: 订阅成功当前共 2 个监听者[LOG]: 订阅成功当前共 3 个监听者[LOG]: 广播数字: 10[LOG]: [A] 收到: 10平方是 100[LOG]: [B] 收到: 10翻倍是 20[LOG]: [C] 收到: 10我是来捣乱的 [LOG]: --- 取消 A 的订阅 ---[LOG]: 取消订阅剩余 2 个[LOG]: 广播数字: 5[LOG]: [B] 收到: 5翻倍是 10[LOG]: [C] 收到: 5我是来捣乱的 [LOG]: --- 取消 B 的订阅 ---[LOG]: 取消订阅剩余 1 个[LOG]: 广播数字: 99[LOG]: [C] 收到: 99我是来捣乱的 [LOG]: 测试结束 如何测试方式一在线运行最快30秒打开 TypeScript Playground把上面代码全选复制进去按CtrlEnter或点击Run按钮看右侧 Console 输出方式二本地运行# 1. 创建文件mkdirts-democdts-democatdemo.tsEOF [把上面代码粘贴到这里] EOF# 2. 初始化并运行npminit-ynpminstallts-node typescript --save-dev npx ts-node demo.ts