小智Pro支持固件在线更新：原理+流程拆解（续）

前文分享了小智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实现固件更新的前端-后端-设备端的三方通信逻辑。。

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

欢迎来聊。