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

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

.993

712人浏览 · 2024-05-08 17:56:03

.993 · 2024-05-08 17:56:03 发布

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

GitHub 加速计划 / vu / vue

100

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：17 天前 )

9e887079 [skip ci] 11 个月前

73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

沁言学术 vs Grammarly：中文学术写作与语料库本地化支持的表现剖析

Grammarly是全球写作工具，语料库以英文为主，支持基本中文检查；沁言学术是本土AI平台，语料库深度本地化，针对中文学术设计。中文学术写作：Grammarly基础语法/拼写（本地化弱），沁言学术AI生成/优化（深度支持）。语料库本地化：Grammarly通用库（英文主导），沁言学术本土库（CNKI等集成）。整体：Grammarly免费版通用，付费版高级；沁言学术免费版入门，AI付费优化。表现亮