保亭黎族苗族自治县网站建设_网站建设公司_动画效果_seo优化

前文分享了小智AI自定义唤醒词+表情包+背景图的基本原理：

小智AI 如何自定义唤醒词+背景图：原理+流程拆解

远程控制+文字唤醒，小智Pro开放API调用，释放小智无限潜力

有朋友好奇：

浏览器生成的assets.bin是如何发送给设备的？

今日分享，聊聊前端-后端-设备端的三方通信逻辑。

基于此，给出小智Pro的具体实现方案。

1. 架构设计

回到前文的问题：

浏览器生成的assets.bin如何发送给设备端？

参考：https://github.com/78/xiaozhi-assets-generator

来看小智的实现思路：一个非常巧妙的三方通信架构：

• 前端 ↔️ 后端：WebSocket (控制通道)
• 设备 ↔️ 后端：HTTP (数据通道)
• 后端：作为中间协调者，连接两端

简单画个流程图：

为啥要这么搞？

• 解耦设计：前端不直接与设备通信
• 协议桥接：WebSocket ↔ HTTP 的实时数据转发
• 状态同步：通过事件机制实现三端状态一致
• 安全机制：临时URL，防止未授权访问

2. 完整流程

了解了架构，我们来看完整流程：

阶段1-2：前端准备阶段

前端通过WebSocket告诉后端：“我要上传一个文件”

const createMessage = { type: 'create_file', fileName: 'assets.bin', fileSize: blob.size }; this.ws.send(JSON.stringify(createMessage));

阶段3：后端生成URL

后端创建临时文件会话并返回下载URL：

阶段4：前端配置设备

前端拿到URL后告诉设备去下载：

await callMcpTool('self.assets.set_download_url', { url: downloadUrl // 这就是上面的download_url })

阶段5：设备端HTTP下载

// 设备端直接HTTP GET请求 if (!http->Open("GET", url)) { ESP_LOGE(TAG, "Failed to open HTTP connection"); return false; }

阶段6：后端转发数据给设备

当设备请求下载时，后端检测到这个请求对应某个session，不从文件系统读取，而是实时转发前端通过WebSocket发送的二进制数据：

阶段7：后端通知前端传输开始

当后端开始向设备提供HTTP数据时，发送transfer_started事件给前端：

case 'transfer_started': this.currentSession.transferStarted = true if (this.onTransferStarted) { this.onTransferStarted() // 通知前端可以开始发送数据了 }

阶段8：前端传输完成 & 后端下载完成

当前端传输的数据，被后端全部接收后，销毁session，完结撒花！

3. 小智Pro 实现

免费体验👇：

https://mkwyqeoebedx.sealosbja.site

基于以上原理和流程，小智Pro 服务端，现已支持自定义唤醒词+背景图：

注：需下载小智Pro-v2.0.5.1及以上版本固件体验：

https://github.com/hougeai/xiaozhiPro/releases

写在最后

本文分享了小智AI实现固件更新的前端-后端-设备端的三方通信逻辑。。

如果对你有帮助，不妨点赞收藏备用。

欢迎来聊。