Maison > interface Web > Voir.js > le corps du texte

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

王林
Libérer: 2023-05-10 19:22:04
avant
2362 Les gens l'ont consulté

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.

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

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);
Copier après la connexion

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
Copier après la connexion

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;
Copier après la connexion

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

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

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!

Étiquettes associées:
source:yisu.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal