Websocket接入
更新时间 2025-06-16 18:55:29
最近更新时间: 2025-06-16 18:55:29
node环境
安装依赖
$ npm install mqtt --savejs代码示例
const mqtt = require('mqtt')
const fs = require('fs')
// 连接选项
const options = {
host: '127.0.0.1', // MQTT服务器地址。填入您的mqtt实例绑定的公网ip地址
port: 8084, // 端口号 (MQTTS通常用8883，MQTT用1883，WS用8083，WSS用8084)
path: '/mqtt', // WebSocket 路径参数
username: 'your-username', // 用户名
password: 'your-password', // 密码
protocol: 'wss', // 协议: mqtt, mqtts, ws, wss
rejectUnauthorized: false, // 如果需要禁用证书验证，如果使用wss协议，默认的服务端证书客户端需要开启该选项进行禁用证书验证
}
// 创建客户端连接
const client = mqtt.connect(options)
// 连接事件处理
client.on('connect', () => {
console.log('成功连接到MQTT服务器')
// 订阅主题
client.subscribe('test/topic', (err) => {
if (!err) {
console.log('成功订阅主题: test/topic')
// 发布消息
client.publish('test/topic', 'Hello MQTT!')
}
})
})
// 接收消息
client.on('message', (topic, message) => {
console.log(`收到消息 [${topic}]: ${message.toString()}`)
})
// 错误处理
client.on('error', (err) => {
console.error('连接错误:', err)
})
// 断开连接处理
client.on('close', () => {
console.log('连接已关闭')
})浏览器环境
html代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浏览器 MQTT 客户端</title>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
#messages {
height: 300px;
border: 1px solid #ccc;
padding: 10px;
overflow-y: auto;
margin-bottom: 10px;
}
.message {
margin-bottom: 5px;
padding: 5px;
background: #f5f5f5;
}
.controls {
margin-bottom: 20px;
}
input, button {
padding: 8px;
margin-right: 5px;
}
</style>
</head>
<body>
<h1>浏览器 MQTT 客户端</h1>
<div class="controls">
<input type="text" id="brokerUrl" placeholder="wss://broker.example.com/mqtt" value="ws://127.0.0.1:8083/mqtt">
<input type="text" id="username" placeholder="用户名", value="user1">
<input type="password" id="password" placeholder="密码", value="admin1">
<button id="connectBtn">连接</button>
<button id="disconnectBtn" disabled>断开</button>
</div>
<div class="controls">
<input type="text" id="subscribeTopic" placeholder="订阅主题" value="test/topic">
<button id="subscribeBtn" disabled>订阅</button>
<input type="text" id="publishTopic" placeholder="发布主题" value="test/topic">
<input type="text" id="publishMessage" placeholder="消息内容">
<button id="publishBtn" disabled>发布</button>
</div>
<div id="messages"></div>
<script>
// 全局变量
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 = '';
}
});
</script>
</body>
</html>
