vue3+vite2+mqtt连接遇到的坑怎么解决

vue3+vite2+mqtt连接遇到的坑

之前用vue2连接mqtt时是这样的方式 ：

1.yarn add mqtt 或 npm install mqtt2.import mqtt from 'mqtt'

安装完后直接在页面引用，就可以用了

所以在vue2项目里是比较简单的。

但是，但可是，可但是

移到vue3就遇到各种报错了，ReferenceError: global is not defined

立即学习“前端免费学习笔记（深入）”；

找遍整网也很难找到想关的答案。

于是就各种升降级改MQTT版本，毛用。各种CDN引用，毛鸟用。

最后去node_modules目录看看，发现有个dist的目录，难道。。。

抱着试试的心态，就改为这样：

绘蛙AI修图

绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色

下载

import * as mqtt from "mqtt/dist/mqtt.min"; 
that.client = mqtt.connect('ws://' + mqttOption.server, mqttOption);

我去，还真的是可以了!搞足了一天，终于搞定。

那种心情是无法言语的，或许这就是码农的快乐之一吧！

vue3调用mqtt问题

npm install mqtt -S

utils下面新建mqtt页面

import { MqttClient, OnMessageCallback } from 'mqtt';
import mqtt from 'mqtt';
 
class MQTT {
  url: string; // mqtt地址
  topic: string; //订阅地址
  client!: MqttClient;
  constructor(topic: string) {
    this.topic = topic;
    // 虽然是mqtt但是在客户端这里必须采用websock的链接方式
    this.url = 'ws://www.liufengtec.com:8083/mqtt';
  }
 
  //初始化mqtt
  init() {
    const options = {
        host: 'www.liufengtec.com',
        port: 8083,
        endpoint: '/mqtt',
        clean: true, // 保留会话
        connectTimeout: 4000, // 超时时间
        reconnectPeriod: 4000, // 重连时间间隔
        // 认证信息
        clientId: 'mqttjs_3be2c321',
        username: 'admin',
        password: '3Ha86294',
    };
    this.client = mqtt.connect(this.url, options);
    this.client.on('error', (error: any) => {
      console.log(error);
    });
    this.client.on('reconnect', (error: Error) => {
      console.log(error);
    });
  }
  //取消订阅
  unsubscribes() {
    this.client.unsubscribe(this.topic, (error: Error) => {
      if (!error) {
        console.log(this.topic, '取消订阅成功');
      } else {
        console.log(this.topic, '取消订阅失败');
      }
    });
  }
  //连接
  link() {
    this.client.on('connect', () => {
      this.client.subscribe(this.topic, (error: any) => {
        if (!error) {
          console.log('订阅成功');
        } else {
          console.log('订阅失败');
        }
      });
    });
  }
  //收到的消息
  get(callback: OnMessageCallback) {
    this.client.on('message', callback);
    // console.log(callback,"1010")
  }
  //结束链接
  over() {
    this.client.end();
  }
}
export default MQTT;

utils下面新建usemqtt.ts页面

import MQTT from '@/utils/mqtt';
import { OnMessageCallback } from 'mqtt';
import { ref } from "vue";
 
export default function useMqtt() {
  const PublicMqtt = ref(null);
 
  const startMqtt = (val: string, callback: OnMessageCallback) => {
    //设置订阅地址
    PublicMqtt.value = new MQTT(val);
    //初始化mqtt
    PublicMqtt.value.init();
    //链接mqtt
    PublicMqtt.value.link();
    getMessage(callback);
  };
  const getMessage = (callback: OnMessageCallback) => {
    //   console.log(callback,"18")
    // PublicMqtt.value?.client.on('message', callback);
    // @ts-ignore //忽略提示
    PublicMqtt.value?.get(callback);
  };
//   onUnmounted(() => {
//     //页面销毁结束订阅
//     if (PublicMqtt.value) {
//       PublicMqtt.value.unsubscribes();
//       PublicMqtt.value.over();
//     }
//   });
 
  return {
    startMqtt,
  };
}

使用页面调用

import useMqtt from '@/utils/usemqtt';
const { startMqtt } = useMqtt();
startMqtt(deviceSnsss, (topic, message) => {
console.log(message)
}

或者

不封装直接使用。ws和wss不一样