Vue2使用mqtt

Vue2使用mqtt

使用npm下载库，使用过高版本的mqtt库，vue2无法正常启动。亲测2.18.8版本可以使用。

npm install mqtt@2.18.8
// yarn
yarn add mqtt@2.18.8

在需要的页面引入mqtt

import mqtt from "mqtt"

在methods方法中添加openMqtt方法

openMqtt() {
    let clientId =  "test_" + new Date().getTime();
    let client = mqtt.connect('ws://XXXX', {
        clientId: clientId,
        username: 'admin',
        password: '123456'
    })
    let produceTopic = "topic/main";
    client.on('connect', () => {
        console.log('mqtt 已经连接成功');

        client.subscribe(produceTopic, (data) => {
            console.log("mqtt " + produceTopic + " 订阅成功");
        })

    });
    client.on('message', (topic, data) => {
        console.log("mqtt 收到" + topic + "的消息");
        console.log(data.toString());
        if (topic === produceTopic) {
            // 处理指定主题下的消息
            console.log(JSON.parse(data.toString()))
        }

    })
    client.on('reconnect', () => {
        console.log("mqtt reconnect");
    })
    client.on('offline', () => {
        console.log("mqtt offline");
    })
    client.on('error', (error) => {
        console.log("mqtt error");
        console.log(error);
    })
    client.on('close', () => {
        console.log("mqtt close");
    })
},

在mounted生命周期里添加该方法

this.openMqtt()

注：由于项目的产线环境为局域网使用的是http协议，所以mqtt的连接地址使用的是ws，ws在连接过程中的username和password都是非必填项。