vue 连接 MQTT 实现发布/订阅消息

最新推荐文章于 2024-07-25 11:05:20 发布

唐懒猫

最新推荐文章于 2024-07-25 11:05:20 发布

阅读量629

点赞数 3

分类专栏： MQTT VUE JavaScript 文章标签： vue.js javascript 前端物联网

本文链接：https://blog.csdn.net/QQ26843500/article/details/136705592

版权

JavaScript 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

VUE

4 篇文章 0 订阅

订阅专栏

MQTT

3 篇文章 0 订阅

订阅专栏

1. 安装依赖:

npm i mqtt@4.3.7

2.创建 MQTT_Config.js:

const mqtt = require('mqtt')
export const options = {
	clean :true,
	connectTimeout :4000,
	clientId: `mqtt_${Math.random().toString(16).slice(3)}`,
	username: 'admin',
	password: 'admin',
};
export const url = 'mqtt://ip:8083/mqtt';
export const themeList = ['test','state'];
export const themeObject = {
    test: "test",
    state: "state",
};

3.使用：

// 引入配置
import { options, url, themeList, themeObject }  from "@/config/mqttCOnfog.js";

// 全局客户端
let client = "";

mounted() {
        this.initMqtt();
        this.mqttReceive();
},
methods: {
    // 连接 MQTT
    initMqtt() {
        let _this = this;
        // 创建客户端
        var mqtt = require("mqtt");
        client = mqtt.connect(url, options);
        // 连接
        client.on("connect", () => {
            console.log("连接成功....");
            _this.mqttPublish();
        });
        // 连接失败输出
        client.on("error", (err) => {
            console.log("err => ", err);
            client.end();
        })
    },
    // MQTT 发布消息
    mqttPublish() {
        let obj = {
            message: "测试消息"
        }
        client.publish(themeObject.test, JSON.stringify(obj));
        console.log("主题 = ", themeObject.test, "发送成功 => ", obj);

    },
    // MQTT 监听消息
    mqttReceive() {
        // 订阅消息
        client.subscribe(themeObject.test, (err) => {
            if(!err) {
                console.log("subscribe success!");
            } else {
                console.log("err => ", err);
            }
        });
        // 接收消息
        client.on("message", (themeObject.test, message) => {
            console.log(new TextDecoder().decode(message));
        });
    },
}