Coze Studio 前端 coze-common/websocket-manager-adapter对话区统一 WebSocket 连接管理适配器解析【免费下载链接】coze-studioAn AI agent development platform with all-in-one visual tools, simplifying agent creation, debugging, and deployment like never before. Coze your way to AI Agent creation.项目地址: https://gitcode.com/GitHub_Trending/co/coze-studio本篇以仓库中coze-common/websocket-manager-adapter包的 README 文档为主线完整覆盖该包的定位、特性清单与开发命令并结合同包源码与仓库内真实调用点深入解析ConnectionOptions、Connection、WebSocketManager三层 API 的设计意图与使用模式。读完本文你将能理解 Coze Studio 前端如何以“适配器 单例管理器”的方式收敛 WebSocket 连接以及对话区、头像/背景图生成等业务是如何基于这套契约消费实时消息的。一、包的定位README 声明的特性与工程约定按照 包 README 的说明coze-common/websocket-manager-adapter是一个面向 React 组件的前端包模板当前版本已具备以下工程特性eslint ts集成 ESLint 与 TypeScript 的类型检查esm bundle以 ESM 格式产出包产物umd bundle同时提供 UMD 构建storybook内置 Storybook 用于组件演示。从 package.json 可以核对包的基本事实包名为coze-common/websocket-manager-adapter版本0.0.1许可证 Apache-2.0main指向src/index.tsx即包入口直接暴露源码实现运行时依赖仅有classnames其余coze-arch/*系列、react、vitest、stylelint等均为 workspace 依赖或开发依赖脚本方面定义了linteslint ./ --cache、testvitest --run --passWithNoTests、test:covnpm run test -- --coverage而build脚本当前为exit 0从脚本结构看该包暂不执行独立打包产物构建交由仓库整体流程处理。README 给出的标准研发命令为场景命令初始化依赖rush update开发调试npm run dev构建npm run build这套命令对应仓库的 Rush monorepo 体系rush update负责在 workspace 内解析并安装跨包依赖package.json中大量workspace:*依赖即由此解析包级npm run脚本则用于单包 lint 与测试。此外该包还遵循了模板中的 Storybook 约定stories/目录下保留了 示例 story 与 mdx 文档入口可作为包内组件演示的挂载点。二、核心 APIConnectionOptions 参数契约适配器的公共入口是 src/index.tsx它导出了三个核心类型/类ConnectionOptions、FrontierEventMap、Connection以及默认导出的WebSocketManager单例。2.1 ConnectionOptions建连时的业务参数源码中 ConnectionOptions 接口 定义了业务侧建连所需的全部参数各字段语义如下字段类型是否必填说明bizstring是调用方的业务标识对应消息结构中[X-Coze-Biz]头部的业务参数用于服务端按业务维度投递/路由消息servicenumber否目标服务的 ID决定连接指向的后端服务acceptAllBizMessagesboolean否是否接收所有业务的消息默认false即onMessage只触发与当前biz相关的消息acceptBizstring[]否额外接受的业务白名单默认只接收传入biz对应的消息fwsOptionsany否FWSFrontier WebSocket 服务初始化透传参数从字段设计看这个接口把“业务隔离”做成了显式参数默认情况下一条连接只向调用方派发本biz的消息acceptAllBizMessages默认false若业务需要跨订阅则通过acceptBiz白名单显式声明。这种默认收窄、按需放开的策略是防止多业务共用一条 WS 通道时消息互相串扰的关键设计点。2.2 FrontierEventMap事件命名空间FrontierEventMap 接口 声明了连接上可监听的五类事件键export interface FrontierEventMap { error: any; message: any; open: any; close: any; ack: any; }这五类事件覆盖了 WebSocket 的典型生命周期open/close与业务语义message下行消息、ack发送确认、error异常。业务侧监听器注册时即以该映射为键约束保证事件名不出现拼写漂移。三、Connection 类单条连接的操作面Connection 类 是对单条 WebSocket 连接操作面的抽象其方法集可以按职责分为四组配置获取getInitConfig()、getLaunchConfig()——分别获取初始化配置与启动配置源码注释为 “Get connection parameters”事件监听addEventListener(event, listener)注册 FWS 事件监听removeEventListener(event, listener)移除监听注释 “Monitor fws” / “Remove fws listening”数据与链路维护send(data, options {})发送数据reconnect()重建连接pingOnce()单次心跳探测生命周期close()与destroy()。源码对close()特意留了注释“To close the connection, you need to notify the manager, and it will decide whether to really close the channel”——即业务侧调用close()只是向管理器表达“我要关闭”的意图是否真正关闭底层 channel 由管理器统一裁决。这条注释揭示了管理器与连接之间的职责边界连接负责表达意图管理器负责共享通道的引用计数式管理。值得注意的实现细节是当前仓库版本中这些方法体均为空实现。从源码结构看本包承担的是适配器契约层角色——它用 TypeScript 类型固定了 API 面、参数名与事件名真实链路实现由外部注入/替换上层业务只需依赖该契约编程而不必感知底层 WebSocket 传输细节。这也是包名中带 “adapter” 一词的由来。四、WebSocketManager单例管理器与设备标识WebSocketManager 类 与文件末的export default new WebSocketManager()共同构成了整个适配器的全局单例export class WebSocketManager { deviceId ; channel: any null; /** Create a connection instance */ createConnection(options: ConnectionOptions): Connection { return new Connection(options, this.channel); } /** Create a new WS channel without reusing the existing channel */ createChannel(options: ConnectionOptions) {} }三个关键成员deviceId管理器持有的设备标识。它是本包被仓库内消费最多的一处——多个对话区模块在构造消息扩展字段时读取websocketManager.deviceId见下文第五节channel当前共享的 WS 通道句柄createConnection时把它作为第二个参数传入Connection构造函数从而让多条逻辑连接复用同一条物理通道createConnection/createChannel前者在现有 channel 上创建一条逻辑连接默认路径复用通道后者按注释语义是不复用现有通道、新建一条物理 WS channel 的逃生口用于对通道隔离有硬性要求的场景。这套“管理器持有 channel 按业务创建逻辑连接”的模型与ConnectionOptions.biz的业务隔离参数形成闭环物理层少而共享逻辑层多而隔离。五、仓库内的真实消费模式5.1 头像/背景图生成结果实时推送仓库中最完整的消费示例是 avatar-background-socket/index.ts。该模块封装了AvatarBackgroundWebSocket类用于接收 Bot 头像/背景图GIF 或静态图生成完成后的实时通知展示了适配器的完整用法链路1建连与容错重试。createConnection方法中若已存在连接则直接返回幂等webSocketManager.createConnection({ biz, service })抛错时通过retry标志递归重试一次第二次失败不再重试避免无限递归createConnection(retry true) { if (this.connection) return; try { this.connection webSocketManager.createConnection({ biz: this.biz, // EditorPic service: this.service, }); this.addWSEventListener(); } catch (error) { if (retry) this.createConnection(false); } }2事件监听与清理。通过addEventListener注册message与error两类FrontierEventMap事件并把{ key, listener }存入eventListenerListdestroy()时逐项removeEventListener后调用close()——这与第三节中removeEventListener的 API 语义一一对应也演示了“注册-反注册”必须配对的纪律。3消息解析与业务分派。onSocketMessage中把event.message.payload经arrayBufferToObject还原为GenPicMessage先以taskSet对task.id做去重收到重复任务只记日志返回再按当前 Bot 与任务bot_id是否匹配、当前 dotStatus 是否处于Generating分派更新头像/背景四类模态状态IconGif、IconStatic、BackgroundGif、BackgroundStatic成功时pushImageList失败时Toast.error提示。4服务 ID 的区域映射。该模块还展示了ConnectionOptions.service的取值来源——按部署区域映射出不同的 plugin service IDboe/cn/sg/va四个键从区域常量REGION/IS_BOE中选择最终实例化为new AvatarBackgroundWebSocket(EditorPic, serviceID)。这说明biz与service的组合是后端路由消息的两级坐标。5.2 对话区消息发送中的 device_id 透传除实时下行消息外WebSocketManager.deviceId还承担了上行消息的设备关联职责。至少三处发送链路都在构造extendFiled消息扩展字段时写入device_idnew-message.tsuseSendTextMessage发文本消息时附带device_id: String(websocketManager.deviceId)resume-message.ts恢复消息发送时同样写入device_idshortcut.ts快捷指令query 类与模板类发送时把device_id与插件参数shortcut_cmd_id、toolList合并进扩展字段便于服务端将下行结果精准路由回发起请求的设备/会话。这一模式的实际效果是消息上行时携带设备标识服务端可据此把后续实时事件投递到该设备正在持有的连接上从而与biz维度的消息隔离共同完成“设备 × 业务”的双维寻址。六、使用方式小结与开发注意事项结合 README、package.json与上述消费点对该包的典型使用姿势可以归纳为导入方式默认导入单例import websocketManager from coze-common/websocket-manager-adapter具名导入类型Connection、FrontierEventMap消费点 shortcut.ts 与各 avatar-background-socket 均如此引用生命周期配对createConnection→addEventListener→ 消费 →removeEventListenerclose()close()只是通知管理器底层通道的真正释放由管理器决策参数最小化原则多数场景只需bizservice跨业务订阅才显式传acceptBiz/acceptAllBizMessages容错消费侧建议参照 avatar-background-socket 的写法在createConnection外层做幂等判断与有限次重试本地开发按 README 执行rush update初始化 workspace再在该包目录内npm run lint/npm run test做校验npm run build当前为占位脚本exit 0不代表产物构建入口。需要说明的适用前提本包当前版本的方法体为空实现属于契约/适配层实际 WebSocket 传输行为依赖运行时环境注入的真实实现因此本文对链路行为的描述均以仓库内类型契约与调用点证据为准不代表对底层传输实现的完整刻画。七、关键文件索引文件作用frontend/packages/common/websocket-manager-adapter/README.md包特性与研发命令说明本文主线文档frontend/packages/common/websocket-manager-adapter/src/index.tsxConnectionOptions/Connection/WebSocketManager契约定义与默认单例导出frontend/packages/common/websocket-manager-adapter/package.json包元信息、脚本与依赖声明frontend/packages/studio/stores/bot-detail/src/utils/avatar-background-socket/index.ts完整的建连、监听、消息分派、清理与重试示例frontend/packages/common/chat-area/chat-area/src/hooks/messages/use-send-message/new-message.ts文本消息发送中device_id透传frontend/packages/common/chat-area/chat-area/src/utils/resume-message.ts消息恢复发送中device_id透传frontend/packages/common/chat-area/plugin-chat-shortcuts/src/hooks/shortcut.ts快捷指令发送中device_id与插件参数合并【免费下载链接】coze-studioAn AI agent development platform with all-in-one visual tools, simplifying agent creation, debugging, and deployment like never before. Coze your way to AI Agent creation.项目地址: https://gitcode.com/GitHub_Trending/co/coze-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Coze Studio 前端 coze-common/websocket-manager-adapter对话区统一 WebSocket 连接管理适配器解析【免费下载链接】coze-studioAn AI agent development platform with all-in-one visual tools, simplifying agent creation, debugging, and deployment like never before. Coze your way to AI Agent creation.项目地址: https://gitcode.com/GitHub_Trending/co/coze-studio本篇以仓库中coze-common/websocket-manager-adapter包的 README 文档为主线完整覆盖该包的定位、特性清单与开发命令并结合同包源码与仓库内真实调用点深入解析ConnectionOptions、Connection、WebSocketManager三层 API 的设计意图与使用模式。读完本文你将能理解 Coze Studio 前端如何以“适配器 单例管理器”的方式收敛 WebSocket 连接以及对话区、头像/背景图生成等业务是如何基于这套契约消费实时消息的。一、包的定位README 声明的特性与工程约定按照 包 README 的说明coze-common/websocket-manager-adapter是一个面向 React 组件的前端包模板当前版本已具备以下工程特性eslint ts集成 ESLint 与 TypeScript 的类型检查esm bundle以 ESM 格式产出包产物umd bundle同时提供 UMD 构建storybook内置 Storybook 用于组件演示。从 package.json 可以核对包的基本事实包名为coze-common/websocket-manager-adapter版本0.0.1许可证 Apache-2.0main指向src/index.tsx即包入口直接暴露源码实现运行时依赖仅有classnames其余coze-arch/*系列、react、vitest、stylelint等均为 workspace 依赖或开发依赖脚本方面定义了linteslint ./ --cache、testvitest --run --passWithNoTests、test:covnpm run test -- --coverage而build脚本当前为exit 0从脚本结构看该包暂不执行独立打包产物构建交由仓库整体流程处理。README 给出的标准研发命令为场景命令初始化依赖rush update开发调试npm run dev构建npm run build这套命令对应仓库的 Rush monorepo 体系rush update负责在 workspace 内解析并安装跨包依赖package.json中大量workspace:*依赖即由此解析包级npm run脚本则用于单包 lint 与测试。此外该包还遵循了模板中的 Storybook 约定stories/目录下保留了 示例 story 与 mdx 文档入口可作为包内组件演示的挂载点。二、核心 APIConnectionOptions 参数契约适配器的公共入口是 src/index.tsx它导出了三个核心类型/类ConnectionOptions、FrontierEventMap、Connection以及默认导出的WebSocketManager单例。2.1 ConnectionOptions建连时的业务参数源码中 ConnectionOptions 接口 定义了业务侧建连所需的全部参数各字段语义如下字段类型是否必填说明bizstring是调用方的业务标识对应消息结构中[X-Coze-Biz]头部的业务参数用于服务端按业务维度投递/路由消息servicenumber否目标服务的 ID决定连接指向的后端服务acceptAllBizMessagesboolean否是否接收所有业务的消息默认false即onMessage只触发与当前biz相关的消息acceptBizstring[]否额外接受的业务白名单默认只接收传入biz对应的消息fwsOptionsany否FWSFrontier WebSocket 服务初始化透传参数从字段设计看这个接口把“业务隔离”做成了显式参数默认情况下一条连接只向调用方派发本biz的消息acceptAllBizMessages默认false若业务需要跨订阅则通过acceptBiz白名单显式声明。这种默认收窄、按需放开的策略是防止多业务共用一条 WS 通道时消息互相串扰的关键设计点。2.2 FrontierEventMap事件命名空间FrontierEventMap 接口 声明了连接上可监听的五类事件键export interface FrontierEventMap { error: any; message: any; open: any; close: any; ack: any; }这五类事件覆盖了 WebSocket 的典型生命周期open/close与业务语义message下行消息、ack发送确认、error异常。业务侧监听器注册时即以该映射为键约束保证事件名不出现拼写漂移。三、Connection 类单条连接的操作面Connection 类 是对单条 WebSocket 连接操作面的抽象其方法集可以按职责分为四组配置获取getInitConfig()、getLaunchConfig()——分别获取初始化配置与启动配置源码注释为 “Get connection parameters”事件监听addEventListener(event, listener)注册 FWS 事件监听removeEventListener(event, listener)移除监听注释 “Monitor fws” / “Remove fws listening”数据与链路维护send(data, options {})发送数据reconnect()重建连接pingOnce()单次心跳探测生命周期close()与destroy()。源码对close()特意留了注释“To close the connection, you need to notify the manager, and it will decide whether to really close the channel”——即业务侧调用close()只是向管理器表达“我要关闭”的意图是否真正关闭底层 channel 由管理器统一裁决。这条注释揭示了管理器与连接之间的职责边界连接负责表达意图管理器负责共享通道的引用计数式管理。值得注意的实现细节是当前仓库版本中这些方法体均为空实现。从源码结构看本包承担的是适配器契约层角色——它用 TypeScript 类型固定了 API 面、参数名与事件名真实链路实现由外部注入/替换上层业务只需依赖该契约编程而不必感知底层 WebSocket 传输细节。这也是包名中带 “adapter” 一词的由来。四、WebSocketManager单例管理器与设备标识WebSocketManager 类 与文件末的export default new WebSocketManager()共同构成了整个适配器的全局单例export class WebSocketManager { deviceId ; channel: any null; /** Create a connection instance */ createConnection(options: ConnectionOptions): Connection { return new Connection(options, this.channel); } /** Create a new WS channel without reusing the existing channel */ createChannel(options: ConnectionOptions) {} }三个关键成员deviceId管理器持有的设备标识。它是本包被仓库内消费最多的一处——多个对话区模块在构造消息扩展字段时读取websocketManager.deviceId见下文第五节channel当前共享的 WS 通道句柄createConnection时把它作为第二个参数传入Connection构造函数从而让多条逻辑连接复用同一条物理通道createConnection/createChannel前者在现有 channel 上创建一条逻辑连接默认路径复用通道后者按注释语义是不复用现有通道、新建一条物理 WS channel 的逃生口用于对通道隔离有硬性要求的场景。这套“管理器持有 channel 按业务创建逻辑连接”的模型与ConnectionOptions.biz的业务隔离参数形成闭环物理层少而共享逻辑层多而隔离。五、仓库内的真实消费模式5.1 头像/背景图生成结果实时推送仓库中最完整的消费示例是 avatar-background-socket/index.ts。该模块封装了AvatarBackgroundWebSocket类用于接收 Bot 头像/背景图GIF 或静态图生成完成后的实时通知展示了适配器的完整用法链路1建连与容错重试。createConnection方法中若已存在连接则直接返回幂等webSocketManager.createConnection({ biz, service })抛错时通过retry标志递归重试一次第二次失败不再重试避免无限递归createConnection(retry true) { if (this.connection) return; try { this.connection webSocketManager.createConnection({ biz: this.biz, // EditorPic service: this.service, }); this.addWSEventListener(); } catch (error) { if (retry) this.createConnection(false); } }2事件监听与清理。通过addEventListener注册message与error两类FrontierEventMap事件并把{ key, listener }存入eventListenerListdestroy()时逐项removeEventListener后调用close()——这与第三节中removeEventListener的 API 语义一一对应也演示了“注册-反注册”必须配对的纪律。3消息解析与业务分派。onSocketMessage中把event.message.payload经arrayBufferToObject还原为GenPicMessage先以taskSet对task.id做去重收到重复任务只记日志返回再按当前 Bot 与任务bot_id是否匹配、当前 dotStatus 是否处于Generating分派更新头像/背景四类模态状态IconGif、IconStatic、BackgroundGif、BackgroundStatic成功时pushImageList失败时Toast.error提示。4服务 ID 的区域映射。该模块还展示了ConnectionOptions.service的取值来源——按部署区域映射出不同的 plugin service IDboe/cn/sg/va四个键从区域常量REGION/IS_BOE中选择最终实例化为new AvatarBackgroundWebSocket(EditorPic, serviceID)。这说明biz与service的组合是后端路由消息的两级坐标。5.2 对话区消息发送中的 device_id 透传除实时下行消息外WebSocketManager.deviceId还承担了上行消息的设备关联职责。至少三处发送链路都在构造extendFiled消息扩展字段时写入device_idnew-message.tsuseSendTextMessage发文本消息时附带device_id: String(websocketManager.deviceId)resume-message.ts恢复消息发送时同样写入device_idshortcut.ts快捷指令query 类与模板类发送时把device_id与插件参数shortcut_cmd_id、toolList合并进扩展字段便于服务端将下行结果精准路由回发起请求的设备/会话。这一模式的实际效果是消息上行时携带设备标识服务端可据此把后续实时事件投递到该设备正在持有的连接上从而与biz维度的消息隔离共同完成“设备 × 业务”的双维寻址。六、使用方式小结与开发注意事项结合 README、package.json与上述消费点对该包的典型使用姿势可以归纳为导入方式默认导入单例import websocketManager from coze-common/websocket-manager-adapter具名导入类型Connection、FrontierEventMap消费点 shortcut.ts 与各 avatar-background-socket 均如此引用生命周期配对createConnection→addEventListener→ 消费 →removeEventListenerclose()close()只是通知管理器底层通道的真正释放由管理器决策参数最小化原则多数场景只需bizservice跨业务订阅才显式传acceptBiz/acceptAllBizMessages容错消费侧建议参照 avatar-background-socket 的写法在createConnection外层做幂等判断与有限次重试本地开发按 README 执行rush update初始化 workspace再在该包目录内npm run lint/npm run test做校验npm run build当前为占位脚本exit 0不代表产物构建入口。需要说明的适用前提本包当前版本的方法体为空实现属于契约/适配层实际 WebSocket 传输行为依赖运行时环境注入的真实实现因此本文对链路行为的描述均以仓库内类型契约与调用点证据为准不代表对底层传输实现的完整刻画。七、关键文件索引文件作用frontend/packages/common/websocket-manager-adapter/README.md包特性与研发命令说明本文主线文档frontend/packages/common/websocket-manager-adapter/src/index.tsxConnectionOptions/Connection/WebSocketManager契约定义与默认单例导出frontend/packages/common/websocket-manager-adapter/package.json包元信息、脚本与依赖声明frontend/packages/studio/stores/bot-detail/src/utils/avatar-background-socket/index.ts完整的建连、监听、消息分派、清理与重试示例frontend/packages/common/chat-area/chat-area/src/hooks/messages/use-send-message/new-message.ts文本消息发送中device_id透传frontend/packages/common/chat-area/chat-area/src/utils/resume-message.ts消息恢复发送中device_id透传frontend/packages/common/chat-area/plugin-chat-shortcuts/src/hooks/shortcut.ts快捷指令发送中device_id与插件参数合并【免费下载链接】coze-studioAn AI agent development platform with all-in-one visual tools, simplifying agent creation, debugging, and deployment like never before. Coze your way to AI Agent creation.项目地址: https://gitcode.com/GitHub_Trending/co/coze-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
