Comment résoudre les pièges rencontrés dans la connexion vue3+vite2+mqtt

pits rencontrés dans la connexion vue3+vite2+mqtt

La façon précédente de connecter mqtt à vue2 était la suivante :

1.yarn ajouter mqtt ou npm installer mqtt

2.importer mqtt depuis 'mqtt'

installation Une fois terminé, vous pouvez le citer directement sur la page et vous pouvez l'utiliser

C'est donc relativement simple dans le projet vue2.

Mais, mais mais, mais

J'ai rencontré diverses erreurs lorsque je suis passé à vue3, ReferenceError : global is not definition

Il était difficile de trouver la réponse que je voulais résoudre même si j'ai cherché sur l'ensemble du réseau.

J'ai donc mis à niveau et rétrogradé la version MQTT de différentes manières, et elle était facile à utiliser. Diverses références CDN, à l’usage de Mao Bird.

Enfin, allez dans le répertoire node_modules et constatez qu'il existe un répertoire dist, n'est-ce pas ? . .

Avec la mentalité de l'essayer, je l'ai changé pour ceci :

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

C'est parti, ça marche vraiment Après une journée complète de travail, j'ai enfin réussi.

Ce sentiment dépasse les mots, c'est peut-être l'une des joies d'être codeur !

vue3 Appel MQTT Problème

npm install mqtt -S

Create une nouvelle page MQTT sous utils

rreee

utils et créez une nouvelle page USEMQTT.ts sous Utils

rreee

use Page Call

rreee

or

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;

Use It directement sans encapsage. ws et wss sont différents

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!