MQTT/网页访问的调试

zhgc · 发表于 2023-8-10 13:40:22

注意：
1、网页是用webSockets方式与MQTT交互的，所以MQTT服务端要支持websockets的方式
2、调通时的画面：

网页代码：const client = mqtt.connect('ws://localhost:8083/mqtt');

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MQTT.js Example</title>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
</head>
<body>
<h1>MQTT.js Example</h1>
<button onclick="connect()">Connect</button>
<button onclick="disconnect()">Disconnect</button>
<button onclick="subscribe()">Subscribe</button>
<button onclick="publish()">Publish</button>
<div id="message"></div>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script>
// 创建一个MQTT客户端对象
const client = mqtt.connect('ws://localhost:8083/mqtt');
// 当连接成功时执行以下函数
client.on('connect', function() {
console.log('Connected to the broker');
subscribe();
});
// 当收到消息时执行以下函数
client.on('message', function(topic, message) {
const output = document.getElementById('message');
output.innerHTML += `Received message on topic ${topic}: ${message.toString()}<br>`;
});
// 点击“订阅”按钮时执行以下函数
function subscribe() {
client.subscribe('test/topic', function(err) {
if (err) {
console.error(err);
} else {
console.log('subscribed');
}
});
}
// 点击“发布”按钮时执行以下函数
function publish() {
client.publish('test/topic', 'Hello World!');
}
</script>
</body>
</html>

复制代码

zhgc · 发表于 2023-8-14 21:29:48

  <button onclick="connect()">采数中...</button>
  <button onclick="disconnect()">停止</button>
  <button onclick="subscribe()">Subscribe</button>
  <button onclick="publish()">测试</button>
  <div id="message"></div>

		自动登录	找回密码
密码			立即注册

MQTT/网页访问的调试

浏览过的版块