参考esp32-idf环境安装配置.csdnespidf的esp32版的webClient.csdn飞书AI机器人agentMCPSkill设计与实现.csdn安装依赖npminstallaedes# 非必选npmi websocket-streammqttBrokerServer.jsimport{Aedes}fromaedesimport{createServer}fromnode:netimport{createServerascreateHttpServer}fromnode:httpimportwebsocketStreamfromwebsocket-streamconstMQTT_PORT1883constWS_PORT3000// // MQTT Broker// constbrokerawaitAedes.createBroker()// // Client 连接// broker.on(clientReady,(client){console.log([MQTT] Client connected:${client.id})})broker.on(clientDisconnect,(client){console.log([MQTT] Client disconnected:${client.id})})// // MQTT 发布// broker.on(publish,(packet,client){// client 为 null 时可能是 Broker 自己发布的消息if(!client){return}console.log([MQTT] PUBLISH,client${client.id},topic${packet.topic},payload${packet.payload.toString()})})// // MQTT 订阅// broker.on(subscribe,(subscriptions,client){console.log([MQTT] SUBSCRIBE,client${client.id},topics${subscriptions.map(itemitem.topic).join(, )})})// // MQTT Broker TCP Server// constservercreateServer(broker.handle)server.listen(MQTT_PORT,(){console.log()console.log(MQTT Broker started)console.log(MQTT: mqtt://localhost:${MQTT_PORT})console.log(Port:${MQTT_PORT})console.log()})// // MQTT Broker WebSocket Server// consthttpServercreateHttpServer()websocketStream.createServer({server:httpServer},broker.handle)httpServer.listen(WS_PORT,(){console.log(MQTT WS: ws://localhost:${WS_PORT})})// // 错误处理// server.on(error,(err){console.error([MQTT] Server error:,err)})broker.on(clientError,(client,err){console.error([MQTT] Client error: client${client?.id},err)})broker.on(connectionError,(client,err){console.error([MQTT] Connection error: client${client?.id},err)})测试postman 连接 mqtt# V3版本127.0.0.1:1883# 订阅topic led/## 发布topic led/1{led1}浏览器连接websocket!DOCTYPE htmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleMQTT LED Control/titlescriptsrchttps://unpkg.com/mqtt/dist/mqtt.min.js/scriptstyle*{margin:0;padding:0;box-sizing: border-box;}body{font-family: -apple-system, BlinkMacSystemFont,Segoe UI, sans-serif;background:#1a1a2e;color:#eee;min-height: 100vh;display: flex;justify-content: center;align-items: center;}.container{background:#16213e;border-radius: 16px;padding: 40px;width: 420px;box-shadow:08px 32px rgba(0,0,0,0.3);}h1{text-align: center;margin-bottom: 24px;font-size: 22px;color:#e94560;}.status{text-align: center;padding: 8px 16px;border-radius: 8px;margin-bottom: 24px;font-size: 14px;}.status.connected{background:#0f3460; color: #4ecca3; }.status.disconnected{background:#3d0000; color: #ff6b6b; }.controls{display: flex;gap: 16px;margin-bottom: 24px;}.controls button{flex:1;padding: 16px;border: none;border-radius: 12px;font-size: 18px;font-weight: bold;cursor: pointer;transition: transform0.1s, opacity0.2s;}.controls button:active{transform: scale(0.95);}.controls button:disabled{opacity:0.4;cursor: not-allowed;}.btn-on{background:#4ecca3;color:#1a1a2e;}.btn-off{background:#e94560;color:#fff;}.log-section h2{font-size: 14px;color:#888;margin-bottom: 8px;}.log{background:#0f0f23;border-radius: 8px;padding: 12px;height: 240px;overflow-y: auto;font-family:Courier New, monospace;font-size: 13px;line-height:1.6;}.log .time{color:#666; }.log .topic{color:#4ecca3; }.log .payload{color:#e94560; }.log .info{color:#6c9fff; }/style/headbodydivclasscontainerh1MQTT LED Control/h1dividstatusclassstatus disconnected未连接/divdivclasscontrolsbuttonclassbtn-onidbtnOndisabledLED ON/buttonbuttonclassbtn-offidbtnOffdisabledLED OFF/button/divdivclasslog-sectionh2消息日志订阅: led/#/h2divclasslogidlog/div/div/divscript//// 配置 //const BROKER_URLws://localhost:3000//// DOM 元素 //const statusEldocument.getElementById(status)const logEldocument.getElementById(log)const btnOndocument.getElementById(btnOn)const btnOffdocument.getElementById(btnOff)//// 连接 MQTT Broker //const clientmqtt.connect(BROKER_URL)client.on(connect,(){updateStatus(true)log(info,已连接到 Broker)// 订阅 led/#client.subscribe(led/#,{qos:1},(err){if(err){log(info,订阅失败: err.message)}else{log(info,已订阅: led/#)}})})client.on(close,(){updateStatus(false)log(info,连接已关闭)})client.on(error,(err){log(info,连接错误: err.message)})//// 接收消息 //client.on(message,(topic, message){log(msg, topic, message.toString())})//// 按键事件 //btnOn.addEventListener(click,(){const payloadJSON.stringify({id:[1]})client.publish(led/on, payload,{qos:1})log(info,已发布 → led/on payload)})btnOff.addEventListener(click,(){const payloadJSON.stringify({id:[1]})client.publish(led/off, payload,{qos:1})log(info,已发布 → led/off payload)})//// 工具函数 //functionupdateStatus(connected){if(connected){statusEl.textContent 已连接statusEl.classNamestatus connectedbtnOn.disabledfalsebtnOff.disabledfalse}else{statusEl.textContent 未连接statusEl.classNamestatus disconnectedbtnOn.disabledtruebtnOff.disabledtrue}}functionlog(type, topicOrMsg, payload){const nownew Date().toLocaleTimeString()lethtmlspanclasstime[${now}]/spanif(typemsg){htmlspanclasstopic${topicOrMsg}/span→spanclasspayload${payload}/span}else{htmlspanclassinfo${topicOrMsg}/span}logEl.innerHTMLhtml brlogEl.scrollToplogEl.scrollHeight}/script/body/html