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>

复制代码