Bagaimana untuk menyelesaikan masalah yang dihadapi dalam sambungan vue3+vite2+mqtt-View.js-php.cn

Bagaimana untuk menyelesaikan masalah yang dihadapi dalam sambungan vue3+vite2+mqtt

王林

Lepaskan： 2023-05-10 19:22:04

ke hadapan

2318 orang telah melayarinya

Perangkap yang dihadapi semasa menyambung ke vue3+vite2+mqtt

Kaedah sebelumnya apabila menggunakan vue2 untuk menyambung ke mqtt ialah ini:

1.yarn add mqtt atau npm install mqtt

2.import mqtt daripada 'mqtt'

Selepas pemasangan, anda boleh terus merujuknya pada halaman dan anda boleh menggunakannya

Jadi ia agak mudah dalam projek vue2.

Tetapi, tetapi, tetapi, tetapi

Saya menghadapi pelbagai ralat apabila saya berpindah ke vue3 ReferenceError: global tidak ditakrifkan

Sukar untuk mencarinya walaupun saya. cari seluruh rangkaian Ingin tahu jawapannya.

Bagaimana untuk menyelesaikan masalah yang dihadapi dalam sambungan vue3+vite2+mqtt

Jadi saya menaik taraf dan menurunkan versi MQTT dalam pelbagai cara, dan ia mudah digunakan. Pelbagai rujukan CDN, untuk kegunaan Mao Bird.

Akhir sekali, pergi ke direktori node_modules dan mendapati bahawa terdapat direktori dist, bukan? . .

Dengan mentaliti untuk mencuba, saya menukarnya kepada ini:

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

Salin selepas log masuk

Ini saya pergi, ia benar-benar berkesan Selepas seharian bekerja, akhirnya saya berjaya melakukannya.

Perasaan itu tidak terkata. Mungkin ini adalah salah satu kegembiraan menjadi seorang pengekod!

Masalah mqtt panggilan Vue3

npm install mqtt -S

Salin selepas log masuk

Buat halaman mqtt baharu di bawah utils

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

Salin selepas log masuk

Buat halaman usemqtt.ts baharu di bawah utils

import MQTT from &#39;@/utils/mqtt&#39;;
import { OnMessageCallback } from &#39;mqtt&#39;;
import { ref } from "vue";
 
export default function useMqtt() {
  const PublicMqtt = ref<MQTT | null>(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(&#39;message&#39;, callback);
    // @ts-ignore //忽略提示
    PublicMqtt.value?.get(callback);
  };
//   onUnmounted(() => {
//     //页面销毁结束订阅
//     if (PublicMqtt.value) {
//       PublicMqtt.value.unsubscribes();
//       PublicMqtt.value.over();
//     }
//   });
 
  return {
    startMqtt,
  };
}

Salin selepas log masuk

Gunakan panggilan halaman

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

Salin selepas log masuk

atau

<template>
  <div id="app">
    <div class="head">
      <p>天润商城后台管理系统</p>
    </div>
    <div class="login">
      <table border="0" cellspacing="20">
        <tr>
          <td>用户名：</td>
          <td>
            <el-input
              prefix-icon="iconfont icon-xingmingyonghumingnicheng"
              placeholder="请输入账号"
              v-model="account"
              clearable
            ></el-input>
          </td>
        </tr>
 
        <tr>
          <td>密码：</td>
          <td>
            <el-input
              prefix-icon="iconfont icon-mima"
              placeholder="请输入密码"
              v-model="password"
              show-password
            ></el-input>
          </td>
        </tr>
        <tr>
          <td colspan="2" >
            <el-button type="danger"  @click="login"
              >登录</el-button
            >
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
 
<script>
  import mqtt from &#39;mqtt&#39;
  
  export default {
    data() {
      return {
        account:"12",
        password:"12",
        connection: {
          host: &#39;www.liufengtec.com&#39;,
          port: 8084,
          endpoint: &#39;/mqtt&#39;,
          clean: true, // 保留会话
          connectTimeout: 4000, // 超时时间
          reconnectPeriod: 4000, // 重连时间间隔
          // 认证信息
          clientId: &#39;mqttjs_3be2c321&#39;,
          username: &#39;admin&#39;,
          password: &#39;3Ha86294&#39;,
        },
        subscription: {
          topic: &#39;topic/mqttx&#39;,
          qos: 0,
        },
        publish: {
          topic: &#39;topic/browser&#39;,
          qos: 0,
          payload: &#39;{ "msg": "Hello, I am browser." }&#39;,
        },
        receiveNews: &#39;&#39;,
        qosList: [
          { label: 0, value: 0 },
          { label: 1, value: 1 },
          { label: 2, value: 2 },
        ],
        client: {
          connected: false,
        },
        subscribeSuccess: false,
      }
    },
  
    methods: {
      login(){
         this.createConnection();
      },
      // 创建连接
      createConnection() {
        let that=this;
        // 连接字符串, 通过协议指定使用的连接方式
        // ws 未加密 WebSocket 连接
        // wss 加密 WebSocket 连接
        // mqtt 未加密 TCP 连接
        // mqtts 加密 TCP 连接
        // wxs 微信小程序连接
        // alis 支付宝小程序连接
        const { host, port, endpoint, ...options } = this.connection
        const connectUrl = `ws://www.liufengtec.com:8083/mqtt`
        try {
          this.client = mqtt.connect(connectUrl)
        } catch (error) {
          console.log(&#39;mqtt.connect error&#39;, error)
        }
        this.client.on(&#39;connect&#39;, () => {
          console.log(&#39;Connection succeeded!&#39;)
          that.subscribe();
          
        })
        this.client.on(&#39;error&#39;, error => {
          console.log(&#39;Connection failed&#39;, error)
        })
        this.client.on(&#39;message&#39;, (topic, message) => {
          this.receiveNews = this.receiveNews.concat(message)
          console.log(`Received message ${message} from topic ${topic}`)
        })
      },
      //订阅
   subscribe() {
    var topic = "system";
    var qos = 0;
    //logMessage("INFO", "Subscribing to: [Topic: ", topic, ", QoS: ", qos, "]");
    this.client.subscribe(topic, { qos: Number(qos) });
   },
   // called when a message arrives
    message() {
      var topic = "system";
   this.client.on("message", (topic, message) => {
      console.log(message)
    });
  }
 
 
    }
  }
  </script>
 
<style lang="less" scoped>
.head {
  height: 150px;
  width: 100vw;
  background-image: url(../assets/banner.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  p {
    font-size: 30px;
    color: white;
    line-height: 150px;
    margin-left: 50px;
  }
}
.bg-purple {
  background: #d3dce6;
}
 
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 400px;
  margin: 0px auto;
  border: 2px #f3f3f3 solid;
  padding: 100px;
}
</style>

Salin selepas log masuk

digunakan terus tanpa enkapsulasi. ws dan wss berbeza

Bagaimana untuk menyelesaikan masalah yang dihadapi dalam sambungan vue3+vite2+mqtt

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah yang dihadapi dalam sambungan vue3+vite2+mqtt. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!