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

最新推荐文章于 2024-05-24 16:38:00 发布

.993

最新推荐文章于 2024-05-24 16:38:00 发布

阅读量319

点赞数 3

文章标签： vue.js 前端 javascript 物联网

本文链接：https://blog.csdn.net/weixin_44665047/article/details/138580745

版权

效果如下：
在这里插入图片描述
直接贴代码，本地创建一个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>