测试页面
这是一个HTML页面，包含两个输入框(一个用于输入Topic,另一个用于输入要发送的文本),以及一个按钮。当点击按钮时，会调用名为sendMessage的JavaScript函数。
在sendMessage函数中，首先获取两个输入框的值。如果这两个值都不存在，则弹出提示信息并返回。然后，创建一个随机的clientId,并设置MQTT连接的URL和选项。接着，使用mqtt.connect方法连接到MQTT服务器。
当连接出错时，会在控制台输出错误信息，并结束连接。当重新连接时，会在控制台输出“Reconnecting...”。当连接成功时，会在控制台输出“Client connected:”和clientId。
然后，订阅指定的主题，并在订阅成功后输出提示信息。接着，发布消息到指定的主题。如果发布消息出错，会在控制台输出错误信息。最后，当收到消息时，会在控制台输出接收到的消息内容和主题。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MQTT向nbzch.cn发送文本</title>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
</head>
<body>
<input type="text" id="inputTopic" placeholder="请输入Topic">
<input type="text" id="inputText" placeholder="请输入要发送的文本">
<button onclick="sendMessage()">连接并发送</button>
<script>
function sendMessage() {
const inputTopic = document.getElementById('inputTopic').value;
const inputText = document.getElementById('inputText').value;
if (!inputTopic || !inputText) {
alert('请输入Topic和要发送的文本');
return;
}
const clientId = 'mqttjs_' + Math.random().toString(16).substring(2, 8);
const connectUrl = 'ws://nbzch.cn:8083/mqtt';
const options = {
keepalive: 30,
clientId: clientId,
clean: true,
connectTimeout: 5000,
username: 'emqx_test',
password: 'emqx_test',
reconnectPeriod: 1000,
};
const client = mqtt.connect(connectUrl, options);
client.on('error', (err) => {
console.log('Connection error: ', err);
client.end();
});
client.on('reconnect', () => {
console.log('Reconnecting...');
});
client.on('connect', () => {
console.log('Client connected:' + clientId);
client.subscribe(inputTopic, { qos: 0 }, (error) => {
if (error) {
console.log('Subscribe error:', error);
return;
}
console.log(`Subscribed to topic ${inputTopic}`);
});
client.publish(inputTopic, inputText, { qos: 0 }, (error) => {
if (error) {
console.error(error);
}
});
});
client.on('message', (topic, payload) => {
console.log(
'Received Message: ' + payload.toString() + '\nOn topic: ' + topic
);
});
}
</script>
</body>
</html>上述方法每次点击都要重新连接和订阅所有输入过的主题，现修改如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MQTT向nbzch.cn发送文本</title>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
</head>
<body>
<input type="text" id="inputTopic" placeholder="请输入Topic">
<input type="text" id="inputText" placeholder="请输入要发送的文本">
<button onclick="sendMessage()">发送</button>
<script>
const clientId = 'mqttjs_' + Math.random().toString(16).substring(2, 8);
const connectUrl = 'ws://nbzch.cn:8083/mqtt';
const options = {
keepalive: 30,
clientId: clientId,
clean: true,
connectTimeout: 5000,
username: 'emqx_test',
password: 'emqx_test',
reconnectPeriod: 1000,
};
const client = mqtt.connect(connectUrl, options);
client.on('error', (err) => {
console.log('Connection error: ', err);
client.end();
});
client.on('reconnect', () => {
console.log('Reconnecting...');
});
client.on('connect', () => {
console.log('Client connected:' + clientId);
});
client.on('message', (topic, payload) => {
console.log(
'Received Message: ' + payload.toString() + '\nOn topic: ' + topic
);
});
let oldTopic = '';
function sendMessage() {
const inputTopic = document.getElementById('inputTopic').value;
const inputText = document.getElementById('inputText').value;
if (!inputTopic || !inputText) {
alert('请输入Topic和要发送的文本');
return;
}
client.publish(inputTopic, inputText, { qos: 0 }, (error) => {
if (error) {
console.error(error);
}
});
client.subscribe(inputTopic, { qos: 0 }, (error) => {
if (error) {
console.log('Subscribe error:', error);
return;
}
if (inputTopic != oldTopic) {
if (oldTopic) {
client.unsubscribe(oldTopic, (error) => {
if (error) {
console.log('Unsubscribe error:', error);
return;
}
})
console.log(`取消订阅 topic： ${oldTopic}`);
}
console.log(`新订阅 topic： ${inputTopic}`);
client.publish(inputTopic, inputText, { qos: 0 }, (error) => {
if (error) {
console.error(error);
}
});
oldTopic = inputTopic;
}
});
//document.getElementById('inputText').value = '';
}
</script>
</body>
</html>