使用Vue连接Mqtt实现主题的订阅及消息发布-编程知识

使用Vue连接Mqtt实现主题的订阅及消息发布

效果如下：
在这里插入图片描述
直接贴代码，本地创建一个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://cdn.jsdelivr.net/npm/vue@2"></script><script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script><style>body {font-family: Arial, sans-serif;margin: 0;padding: 20px;}h2 {margin-top: 20px;}form, .controls {margin-bottom: 20px;}.button {padding: 10px 20px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;}.button:disabled {background-color: #ccc;cursor: not-allowed;}.message-area {width: 100%;height: 300px;resize: none;}</style>
</head>
<body><div id="app"><h2>MQTT服务器设置</h2><form><div class="controls"><label for="host">服务器地址:</label><input type="text" v-model="host" id="host" placeholder="ws://broker.emqx.io"><label for="port">服务器端口:</label><input type="text" v-model="port" id="port" placeholder="8083"></div><div class="controls"><label for="path">服务器路径:</label><input type="text" v-model="path" id="path" placeholder="/mqtt"><label for="clientID">客户端ID:</label><input type="text" v-model="clientID" id="clientID" placeholder="随机生成"></div><div class="controls"><label for="user">用户名:</label><input type="text" v-model="user" id="user" placeholder="test"><label for="password">密码:</label><input type="text" v-model="password" id="password" placeholder="123"></div></form><button class="button" @click="connectMQTT" :disabled="connected">连接</button><button class="button" @click="connectEND" :disabled="!connected">已断开</button><h2>MQTT订阅</h2><div class="controls"><label for="subtopic">主题:</label><input type="text" v-model="subtopic" id="subtopic" placeholder="test"></div><button class="button" @click="subscribe_topic">订阅</button><h2>MQTT消息发送</h2><div class="controls"><label for="topic">主题:</label><input type="text" v-model="topic" id="topic" placeholder="test"><label for="message">消息:</label><input type="text" v-model="message" id="message" placeholder="test"></div><button class="button" @click="sendMessage">发送</button><h1>消息框</h1><textarea class="message-area" id="messageTextArea" v-model="messageText" readonly></textarea></div><script>new Vue({el: '#app',data: {host: '',port: '8083',path: '/mqtt',clientID: '',user: 'test',password: 'test',connected: false,subtopic: 'test',topic: 'test',message: 'test',messageText: ''},methods: {connectMQTT() {var url = this.host + ':' + this.port + this.path;var options = {clientId: this.clientID || this.randomID(),username: this.user,password: this.password};this.client = mqtt.connect(url, options);this.client.on('connect', () => {this.connected = true;this.client.on('message', this.message_str);this.messageText += '已连接\n';});this.client.stream.on('error', (err) => {console.error('Connection error:', err);this.connectEND();});},connectEND() {if (this.client && this.client.connected) {this.client.end();this.connected = false;this.messageText += '已断开\n';}},sendMessage() {if (this.client && this.client.connected) {this.client.publish(this.topic, this.message);this.messageText += '已发送\n';}},subscribe_topic() {if (this.client && this.client.connected) {this.client.subscribe(this.subtopic);this.messageText += '已订阅' + this.subtopic + '\n';}},message_str(topic, message) {this.messageText += '收到来自主题:' + topic + '的消息:' + message.toString() + '\n';},randomID() {return 'clientID_' + Math.random().toString(16).substr(2, 8);}}});</script>
</body>
</html>