Websocket接入 messages { height: 300px; border: 1px solid ccc; padding: 10px; overflowy: auto; marginbottom: 10px; } .message { marginbottom: 5px; padding: 5px; background: f5f5f5; } .controls { marginbottom: 20px; } input, button { padding: 8px; marginright: 5px; } 浏览器 MQTT 客户端 连接 断开 订阅 发布 // 全局变量 let client null; // DOM 元素 const connectBtn document.getElementById('connectBtn'); const disconnectBtn document.getElementById('disconnectBtn'); const subscribeBtn document.getElementById('subscribeBtn'); const publishBtn document.getElementById('publishBtn'); const messagesDiv document.getElementById('messages'); // 添加消息到界面 function addMessage(text, isError false) { const messageDiv document.createElement('div'); messageDiv.className 'message'; messageDiv.style.color isError ? 'red' : 'black'; messageDiv.textContent [${new Date().toLocaleTimeString()}] ${text}; messagesDiv.appendChild(messageDiv); messagesDiv.scrollTop messagesDiv.scrollHeight; } // 连接MQTT服务器 connectBtn.addEventListener('click', () > { const brokerUrl document.getElementById('brokerUrl').value; const username document.getElementById('username').value; const password document.getElementById('password').value; if (!brokerUrl) { addMessage('请输入MQTT服务器地址', true); return; } // 连接选项 const options { username: username undefined, password: password undefined // 对于WebSocket连接,路径通常包含在URL中 // 例如: wss://broker.example.com/mqtt // 如果需要单独设置: // wsOptions: { // path: '/mqtt' // }, }; addMessage(正在连接到: ${brokerUrl}); try { client mqtt.connect(brokerUrl, options); // 连接成功 client.on('connect', () > { addMessage('连接成功'); connectBtn.disabled true; disconnectBtn.disabled false; subscribeBtn.disabled false; publishBtn.disabled false; }); // 接收消息 client.on('message', (topic, message) > { addMessage(收到消息 [${topic}]: ${message.toString()}); }); // 错误处理 client.on('error', (err) > { addMessage(错误: ${err.message}, true); }); // 断开连接 client.on('close', () > { addMessage('连接已关闭'); connectBtn.disabled false; disconnectBtn.disabled true; subscribeBtn.disabled true; publishBtn.disabled true; }); } catch (err) { addMessage(连接失败: ${err.message}, true); } }); // 断开连接 disconnectBtn.addEventListener('click', () > { if (client) { addMessage('正在断开连接...'); client.end(); } }); // 订阅主题 subscribeBtn.addEventListener('click', () > { const topic document.getElementById('subscribeTopic').value; if (topic && client) { client.subscribe(topic, (err) > { if (err) { addMessage(订阅失败: ${err.message}, true); } else { addMessage(已订阅主题: ${topic}); } }); } }); // 发布消息 publishBtn.addEventListener('click', () > { const topic document.getElementById('publishTopic').value; const message document.getElementById('publishMessage').value; if (topic && message && client) { client.publish(topic, message); addMessage(已发布消息到 [${topic}]: ${message}); document.getElementById('publishMessage').value ''; } });