1. 项目缘起当两个StackChan“活”过来最近在捣鼓我的两个StackChan机器人看着它们可爱的脸蛋和呆萌的表情总觉得少了点什么。它们能通过内置的麦克风和扬声器进行简单的语音交互但这种交互是“被动”的需要我手动触发或者依赖云端服务。我就在想能不能让这两个小家伙“自己聊起来”让它们之间建立一种更直接、更实时的连接就像两个好朋友在面对面聊天一样。这个想法让我立刻想到了WebSocket。在传统的HTTP请求-响应模式下服务器无法主动向客户端推送消息要实现实时对话客户端需要不断地轮询服务器效率低下且延迟高。而WebSocket协议它能在单个TCP连接上提供全双工通信一旦握手成功服务器和客户端在这里就是两个StackChan就可以在任何时刻互相发送数据完美契合实时对话的需求。于是“Two StackChan Units Talk via WebSocket”这个项目就诞生了。它的核心目标很简单让两个独立的StackChan硬件单元通过一个中心化的WebSocket服务器作为“传话筒”实现文本或指令的实时双向通信。这不仅仅是让它们“说话”更是为后续更复杂的多机器人协作、分布式传感器网络、甚至是一个小小的机器人社群打下基础。下面我就来详细拆解我是如何一步步实现这个想法的。2. 技术选型与架构设计为什么是WebSocket M5Stack在开始动手之前明确技术栈和整体架构是成功的一半。这个项目涉及硬件端和服务器端需要综合考虑资源消耗、开发便利性和通信可靠性。2.1 硬件平台StackChan on M5Stack Core2StackChan本身是一个开源项目它通常运行在像M5Stack Core2这样的ESP32开发板上。选择M5Stack Core2有几个关键原因性能足够ESP32双核处理器、4MB PSRAM、16MB Flash足以运行复杂的图形界面LVGL和网络任务。生态完善M5Stack提供了丰富的库M5Unified和文档对Wi-Fi、HTTP、WebSocket等网络协议支持良好大大降低了开发门槛。外设齐全内置麦克风、扬声器、屏幕、按键、电池管理一个设备就集成了我们所需的大部分交互组件。因此我们的硬件基础就是两个运行着StackChan固件的M5Stack Core2设备。2.2 通信协议WebSocket的压倒性优势为什么不用HTTP轮询、MQTT或者蓝牙HTTP轮询客户端需要定时比如每秒向服务器询问“有新消息吗”会产生大量无效请求浪费电量和带宽且消息延迟可能在0-1秒之间波动不适合流畅对话。MQTT这是一个非常优秀的物联网消息协议轻量、支持发布/订阅模式。但对于我们这个简单的点对点通过服务器中转实时对话场景它的协议开销和需要引入Broker的复杂度显得有些“杀鸡用牛刀”。WebSocket更直接。蓝牙通信距离短通常10米内且需要先进行设备配对不适合通过互联网或局域网在固定位置设备间通信。WebSocket的优势在于真正的全双工连接建立后双方可随时发送数据服务器可以主动推送。低延迟没有HTTP头部的重复开销数据包更小传输更快。连接持久化一个连接用于多次通信避免了TCP连接建立和断开的开销。协议简单基于TCP容易理解和实现有成熟的客户端和服务器库。对于StackChan客户端和我们的中控服务器之间的通信WebSocket是最佳选择。2.3 整体架构设计整个系统的架构非常清晰分为三层客户端 (Client A B)即两个StackChan设备。它们运行着修改后的固件主要职责是连接至指定的WebSocket服务器。监听本地事件如按键按下、语音识别结果。将事件封装成约定格式的消息通过WebSocket发送给服务器。持续监听WebSocket连接接收来自服务器的消息即另一个StackChan发来的消息。解析收到的消息并触发本地动作如屏幕显示文字、播放语音、做出表情。服务器 (WebSocket Server)作为消息中转站和路由器。它的核心职责是接受来自多个客户端的WebSocket连接。维护一个连接池记录每个连接对应的客户端ID例如StackChan_A,StackChan_B。当一个客户端发来消息时解析消息头中的target_id字段。根据target_id从连接池中找到对应的WebSocket连接并将消息转发过去。处理连接断开、错误等异常情况清理连接池。通信协议 (Message Protocol)这是客户端和服务器之间约定的“语言”。为了清晰和可扩展我们使用JSON格式。一个基本的消息结构如下{ from: StackChan_A, to: StackChan_B, type: text, payload: 你好呀我是A, timestamp: 1697012345678 }from/to: 消息的发送方和接收方标识符。type: 消息类型如text文本、command控制命令如change_face: happy、audio_meta音频数据描述等方便接收方做不同处理。payload: 消息的实际内容。timestamp: 消息发送的时间戳用于调试和排序。这个架构的优点是解耦客户端不需要知道对方的IP地址只需要知道服务器的地址和自己的伙伴ID。服务器充当了“接线员”的角色负责精准路由。3. 服务器端实现搭建高效的消息中转站服务器是整个系统的中枢它的稳定性和效率直接决定了对话体验。我选择了Node.js ws库来实现因为它轻量、高效且JavaScript/JSON处理起来非常自然。3.1 环境搭建与核心代码首先初始化一个Node.js项目并安装依赖mkdir stackchan-websocket-server cd stackchan-websocket-server npm init -y npm install ws接下来是核心的服务器代码 (server.js)const WebSocket require(ws); const server new WebSocket.Server({ port: 8080 }); // 监听8080端口 // 用于存储所有活跃连接的Map键为客户端ID值为WebSocket连接对象 const clients new Map(); console.log(WebSocket 服务器启动在 ws://localhost:8080); server.on(connection, (ws, request) { console.log(新的客户端连接); let clientId null; // 监听客户端发来的消息 ws.on(message, (message) { try { const data JSON.parse(message.toString()); // 处理注册消息客户端首次连接时发送自己的ID if (data.type register data.clientId) { clientId data.clientId; if (clients.has(clientId)) { // 如果ID已存在通知旧连接并关闭它避免重复登录 const oldWs clients.get(clientId); oldWs.send(JSON.stringify({ type: error, payload: 重复登录连接被关闭 })); oldWs.close(); } clients.set(clientId, ws); console.log(客户端注册成功: ${clientId}); ws.send(JSON.stringify({ type: system, payload: 注册成功你的ID是 ${clientId} })); // 通知所有客户端更新在线列表可选功能 broadcastClientList(); return; // 注册消息不需要路由 } // 必须注册后才能发送其他消息 if (!clientId) { ws.send(JSON.stringify({ type: error, payload: 请先发送注册消息 })); return; } // 处理普通消息必须包含to字段 if (!data.to) { ws.send(JSON.stringify({ type: error, payload: 消息缺少接收者(to)字段 })); return; } console.log(消息路由: ${clientId} - ${data.to}, 类型: ${data.type}); // 路由消息到目标客户端 const targetWs clients.get(data.to); if (targetWs targetWs.readyState WebSocket.OPEN) { // 在转发前可以补充或修改消息例如确保from字段正确 const forwardMessage { ...data, from: clientId, // 确保发送方是当前连接ID timestamp: Date.now() }; targetWs.send(JSON.stringify(forwardMessage)); } else { // 目标不在线通知发送方 ws.send(JSON.stringify({ type: error, payload: 目标客户端 ${data.to} 不在线或不可达 })); } } catch (error) { console.error(消息处理错误:, error); ws.send(JSON.stringify({ type: error, payload: 消息格式错误 })); } }); // 处理连接关闭 ws.on(close, () { console.log(客户端断开连接: ${clientId || 未知}); if (clientId) { clients.delete(clientId); broadcastClientList(); // 更新在线列表 } }); // 处理错误 ws.on(error, (error) { console.error(客户端连接错误 (${clientId}):, error); }); }); // 广播当前在线客户端列表给所有连接用于UI显示 function broadcastClientList() { const clientList Array.from(clients.keys()); const listMessage JSON.stringify({ type: client_list, payload: clientList }); for (const [id, clientWs] of clients) { if (clientWs.readyState WebSocket.OPEN) { clientWs.send(listMessage); } } }3.2 服务器部署与优化要点这段代码实现了一个最核心的消息路由服务器。在实际部署时有几个关键点需要注意生产环境加固认证与授权上述代码仅通过register消息简单识别客户端。在生产中你需要引入更安全的机制例如连接时验证Token或者使用WSS (WebSocket Secure) 配合HTTPS。心跳机制网络可能不稳定。需要实现心跳包ping/pong定期检查连接是否存活及时清理clientsMap中的死连接。ws库内置了心跳支持。错误处理与日志需要更完善的错误捕获和日志记录方便排查线上问题。状态持久化目前客户端列表存储在内存中服务器重启就丢失。对于需要持久化会话或离线消息的场景需要引入数据库如Redis。性能考量单个Node.js进程可以处理数千个并发连接。如果连接数极大可以考虑使用集群Cluster模式或者使用专业的WebSocket网关如Socket.IO的适配器。消息广播如broadcastClientList在客户端很多时可能成为性能瓶颈需要谨慎使用或优化。内网穿透与公网访问为了让不在同一局域网的StackChan也能通信你需要将服务器部署在公网云主机上或者使用内网穿透工具如ngrok、frp将本机的8080端口暴露到公网。注意使用内网穿透工具时务必了解其安全策略避免服务被滥用。4. 客户端实现赋予StackChan“说话”的能力客户端是运行在M5Stack Core2上的Arduino程序基于PlatformIO。我们需要修改原有的StackChan固件集成WebSocket客户端功能。4.1 硬件准备与依赖库确保你的开发环境已配置好PlatformIO并且能正常编译、烧录M5Stack Core2的固件。StackChan项目本身依赖M5Unified、Avatar等库。我们需要新增一个WebSocket客户端库。对于ESP32一个常见的选择是WebSocketsClient库。你可以在platformio.ini文件中添加依赖[env:m5stack-core2] platform espressif32 board m5stack-core2 framework arduino monitor_speed 115200 lib_deps # M5Stack 官方库 m5stack/M5Unified^0.1.8 # StackChan 核心库 m5stack/Avatar^0.7.5 lovyan03/LovyanGFX^1.1.3 # WebSocket 客户端库 links2004/WebSockets^2.3.64.2 核心代码集成在Arduino主程序如main.cpp中我们需要集成以下逻辑引入头文件与全局变量#include M5Unified.h #include Avatar.h #include WebSocketsClient.h WebSocketsClient webSocket; const char* websocket_server ws://你的服务器IP或域名:8080; // 修改为你的服务器地址 const char* client_id StackChan_A; // 另一个设备改为 StackChan_B bool isConnected false; using namespace m5avatar; Avatar avatar;WebSocket事件回调函数这是处理所有网络事件的核心。void webSocketEvent(WStype_t type, uint8_t * payload, size_t length) { switch(type) { case WStype_DISCONNECTED: Serial.printf([WSc] 断开连接\n); isConnected false; avatar.setExpression(Expression::Doubt); // 显示断开表情 break; case WStype_CONNECTED: Serial.printf([WSc] 连接到服务器: %s\n, payload); isConnected true; avatar.setExpression(Expression::Happy); // 连接成功后立即发送注册消息 String registerMsg {\type\:\register\,\clientId\:\ String(client_id) \}; webSocket.sendTXT(registerMsg); break; case WStype_TEXT: Serial.printf([WSc] 收到文本: %s\n, payload); // 处理服务器发来的消息 handleIncomingMessage(payload); break; case WStype_ERROR: case WStype_FRAGMENT_TEXT_START: case WStype_FRAGMENT_BIN_START: case WStype_FRAGMENT: case WStype_FRAGMENT_FIN: // 其他事件暂时不需要处理 break; } }消息处理函数解析JSON并执行相应动作。void handleIncomingMessage(uint8_t *payload) { // 使用 ArduinoJson 库解析JSON需要在 platformio.ini 中添加依赖 // lib_deps bblanchon/ArduinoJson^6.21.3 DynamicJsonDocument doc(1024); DeserializationError error deserializeJson(doc, payload); if (error) { Serial.print(JSON解析失败: ); Serial.println(error.c_str()); return; } const char* msgType doc[type]; const char* from doc[from]; const char* msgPayload doc[payload]; if (strcmp(msgType, text) 0) { // 处理文本消息在屏幕上显示 Serial.printf(来自 %s 的消息: %s\n, from, msgPayload); avatar.setSpeechText(msgPayload); // 可以在这里触发TTS语音合成如果硬件支持 // speaker.speak(msgPayload); } else if (strcmp(msgType, command) 0) { // 处理控制命令例如改变表情 if (strcmp(msgPayload, change_face:happy) 0) { avatar.setExpression(Expression::Happy); } else if (strcmp(msgPayload, change_face:angry) 0) { avatar.setExpression(Expression::Angry); } } else if (strcmp(msgType, system) 0) { Serial.printf(系统消息: %s\n, msgPayload); } }发送消息函数封装消息发送逻辑。void sendMessageTo(const char* targetId, const char* type, const char* payload) { if (!isConnected) { Serial.println(未连接到服务器无法发送消息); return; } DynamicJsonDocument doc(256); doc[to] targetId; doc[type] type; doc[payload] payload; // from字段由服务器在转发时补充这里可以不填或填自己的ID String output; serializeJson(doc, output); webSocket.sendTXT(output); Serial.printf(发送消息: %s\n, output.c_str()); }在setup()中初始化void setup() { auto cfg M5.config(); M5.begin(cfg); avatar.init(); // 初始化Avatar // 连接Wi-Fi WiFi.begin(你的Wi-Fi SSID, 你的Wi-Fi密码); Serial.print(连接Wi-Fi); while (WiFi.status() ! WL_CONNECTED) { delay(500); Serial.print(.); } Serial.println(\nWi-Fi连接成功); Serial.print(IP地址: ); Serial.println(WiFi.localIP()); // 初始化WebSocket webSocket.begin(websocket_server, 8080, /); // 路径根据服务器设置调整 webSocket.onEvent(webSocketEvent); webSocket.setReconnectInterval(5000); // 断开后每5秒重连一次 }在loop()中维持连接并检测发送事件void loop() { M5.update(); // 更新M5设备状态按键等 webSocket.loop(); // 必须调用用于处理WebSocket事件 // 示例按下M5Stack的BtnA键向StackChan_B发送一条文本消息 if (M5.BtnA.wasPressed()) { sendMessageTo(StackChan_B, text, 你好我是A这是我按按钮发的); } // 示例每隔30秒发送一次心跳或状态可选 static unsigned long lastHeartbeat 0; if (millis() - lastHeartbeat 30000) { lastHeartbeat millis(); if (isConnected) { sendMessageTo(server, heartbeat, alive); // 可以发送给一个特殊的ID或忽略to字段由服务器处理 } } delay(10); // 短暂延迟防止CPU占用过高 }4.3 客户端开发中的坑与技巧内存管理是生命线ESP32的内存尤其是堆内存并不宽裕。务必注意使用ArduinoJson时准确估算DynamicJsonDocument的大小避免过大浪费内存过小导致解析失败。字符串操作尽量使用String类虽然有一定开销但方便或者更高效的字符数组。避免在循环中创建大量临时String对象。定期检查堆内存使用情况Serial.printf(Free Heap: %d\n, ESP.getFreeHeap());网络稳定性处理自动重连webSocket.setReconnectInterval(5000);这行代码至关重要它确保了网络波动或服务器重启后客户端能自动恢复连接。阻塞操作在webSocket.loop()和M5.update()中不要进行长时间的阻塞操作如delay(1000)这会阻碍网络数据的接收和处理。所有耗时操作应使用状态机和非阻塞延时millis()来重构。Wi-Fi连接优化在setup()中Wi-Fi连接最好有超时和重试机制而不是无限等待。可以考虑将Wi-Fi凭证存储在首选项Preferences中甚至提供Web配网如WiFiManager功能提升用户体验。调试信息输出合理利用串口打印Serial.printf在关键节点连接、断开、收/发消息输出信息这是排查问题最直接的手段。5. 功能扩展与实战场景让两个机器人互相发文本只是第一步。基于这个WebSocket通信框架我们可以扩展出许多有趣的功能。5.1 语音对话集成StackChan具备麦克风和扬声器我们可以集成语音识别ASR和语音合成TTS。发送端按下某个键开始录音录音完成后将音频数据通过WebSocket发送type: audiopayload为Base64编码的音频数据。或者为了节省带宽可以本地进行语音识别只发送识别后的文本。接收端收到audio类型的消息解码后通过扬声器播放收到text消息则调用本地的TTS引擎如Google TTS API或本地引擎合成语音后播放。注意直接传输原始PCM或WAV音频数据量很大需要考虑压缩如OPUS编码或使用更低的采样率。5.2 传感器数据共享与联动每个StackChan可以搭载不同的传感器如温湿度传感器、距离传感器。主动上报每个设备定时读取传感器数据封装成消息type: sensor_data,payload: {temp:25.6, humi:60}发送给服务器。服务器可以广播给所有设备或者只发给指定的“监控”设备。指令控制一个StackChan可以发送控制命令type: command,payload: led:on给另一个StackChan控制其板载LED灯。5.3 构建多机器人聊天室当前的服务器已经可以处理多个连接。我们可以修改客户端和服务器逻辑实现群聊服务器不再根据to字段精确路由而是引入“房间”room的概念。客户端加入一个房间服务器将该房间内任何客户端发送的消息广播给房间内所有其他客户端。客户端发送消息时to字段可以设为房间名如lobby。同时客户端需要能处理并显示来自多个发送方的消息。5.4 状态同步与远程控制想象一个场景你手动摆弄了StackChan_A的胳膊如果有舵机这个动作可以实时同步到StackChan_B上。客户端A检测到舵机角度变化立即发送消息type: pose,payload: {arm_left: 90, arm_right: 45}。客户端B收到pose消息解析后控制自己的舵机转到相同角度。这样就实现了简单的“镜像”或“远程操控”功能。6. 常见问题排查与优化心得在开发和测试过程中我遇到了不少坑这里总结一下希望能帮你绕过去。6.1 连接失败与超时症状客户端一直卡在“连接Wi-Fi”或“连接到服务器”阶段。排查检查Wi-Fi凭证确保SSID和密码正确特别是大小写和特殊字符。检查服务器地址和端口确保websocket_server字符串完全正确包括ws://前缀。如果服务器在公网检查防火墙是否开放了8080端口。使用网络调试工具在电脑上用ping测试服务器IP是否可达。用浏览器WebSocket测试工具如“WebSocket King”连接你的服务器地址看服务是否正常。查看服务器日志服务器端是否有连接进入如果没有问题可能在网络或客户端。6.2 消息发送成功但对方收不到症状客户端A显示发送成功但客户端B毫无反应。排查检查客户端ID确认发送方消息中的to字段和接收方注册时的clientId完全一致包括大小写。检查服务器路由逻辑在服务器console.log中查看消息是否被正确路由clients.get(data.to)是否找到了对应的WebSocket连接检查接收方连接状态接收方的isConnected是否为true它是否成功注册服务器端是否能看到它的连接检查消息格式确保发送的JSON字符串是有效的没有缺少引号或括号。可以在发送前用Serial.println(output)打印出来验证。6.3 设备运行一段时间后死机或重启症状设备运行几分钟或几小时后自动重启或卡死。排查与解决内存泄漏这是ESP32上最常见的问题。反复创建String或DynamicJsonDocument而不释放会导致堆内存耗尽。确保在函数内部创建的局部对象会在函数结束时被销毁。使用serializeJson(doc, output)时output如果是全局或静态变量要注意清空或复用。看门狗超时如果loop()函数中有长时间阻塞的操作如delay(10000)会导致看门狗定时器WDT复位。必须将长任务拆分成非阻塞的小任务。网络操作阻塞webSocket.loop()本身是非阻塞的但如果你在事件回调如onEvent中执行了非常耗时的操作如复杂的字符串处理、文件读写也会阻塞整个系统。回调函数应尽快返回。6.4 提升通信可靠性的技巧消息确认与重发对于重要指令可以实现简单的ACK机制。发送方在消息中带一个唯一ID接收方收到后回复一个ACK消息。发送方如果在规定时间内没收到ACK则重发。这能有效应对偶尔的网络丢包。消息队列在客户端实现一个简单的发送队列。当网络断开时将要发送的消息存入队列网络恢复后自动从队列中取出消息发送。防止数据丢失。连接状态UI提示在StackChan的屏幕上用不同的表情或图标清晰显示当前连接状态如笑脸代表已连接哭脸代表断开问号代表连接中。这能给用户最直观的反馈。实现两个StackChan通过WebSocket对话是一个软硬件结合的绝佳练习。它涉及了嵌入式开发、网络编程、实时通信协议等多个领域。当你看到自己搭建的服务器稳定运行两个小家伙真的能通过你的代码互相传递信息时那种成就感是无与伦比的。这个项目就像一个乐高底座上面可以搭建出无数有趣的创意应用。希望我的这份详细拆解能帮你顺利启动自己的机器人对话项目。