vue3+vite2+mqtt連接遇到的坑及解決
vue3+vite2+mqtt連接遇到的坑
從vue2版本整合到vue3版本遇到的坑,其實也是自己不夠熟悉,哈哈
之前用vue2連接mqtt時是這樣的方式 :
1.yarn add mqtt 或 npm install mqtt
2.import mqtt from 'mqtt'
安裝完后直接在頁面引用,就可以用了
所以在vue2項目里是比較簡單的^_^
但是,但可是,可但是
移到vue3就遇到各種報錯了,ReferenceError: global is not defined
找遍整網(wǎng)也很難找到想關(guān)的答案。
于是就各種升降級改MQTT版本,毛用。各種CDN引用,毛鳥用。
最后去node_modules目錄看看,發(fā)現(xiàn)有個dist的目錄,難道。。。
抱著試試的心態(tài),就改為這樣:
import * as mqtt from "mqtt/dist/mqtt.min";? that.client = mqtt.connect('ws://' + mqttOption.server, mqttOption);
我去,還真的是可以了!搞足了一天,終于搞定。
那種心情是無法言語的,或許這就是碼農(nóng)的快樂之一吧!
vue3調(diào)用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, // 重連時間間隔 // 認(rèn)證信息 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") } //結(jié)束鏈接 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<MQTT | null>(null); const startMqtt = (val: string, callback: OnMessageCallback) => { //設(shè)置訂閱地址 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(() => { // //頁面銷毀結(jié)束訂閱 // if (PublicMqtt.value) { // PublicMqtt.value.unsubscribes(); // PublicMqtt.value.over(); // } // }); return { startMqtt, }; }
使用頁面調(diào)用
import useMqtt from '@/utils/usemqtt'; const { startMqtt } = useMqtt(); startMqtt(deviceSnsss, (topic, message) => { console.log(message) }
或者
<template> <div id="app"> <div class="head"> <p>天潤商城后臺管理系統(tǒng)</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" style="text-align: center; padding-top: 50px"> <el-button type="danger" style="width: 60%" @click="login" >登錄</el-button > </td> </tr> </table> </div> </div> </template> <script> import mqtt from 'mqtt' export default { data() { return { account:"12", password:"12", connection: { host: 'www.liufengtec.com', port: 8084, endpoint: '/mqtt', clean: true, // 保留會話 connectTimeout: 4000, // 超時時間 reconnectPeriod: 4000, // 重連時間間隔 // 認(rèn)證信息 clientId: 'mqttjs_3be2c321', username: 'admin', password: '3Ha86294', }, subscription: { topic: 'topic/mqttx', qos: 0, }, publish: { topic: 'topic/browser', qos: 0, payload: '{ "msg": "Hello, I am browser." }', }, receiveNews: '', qosList: [ { label: 0, value: 0 }, { label: 1, value: 1 }, { label: 2, value: 2 }, ], client: { connected: false, }, subscribeSuccess: false, } }, methods: { login(){ this.createConnection(); }, // 創(chuàng)建連接 createConnection() { let that=this; // 連接字符串, 通過協(xié)議指定使用的連接方式 // 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('mqtt.connect error', error) } this.client.on('connect', () => { console.log('Connection succeeded!') that.subscribe(); }) this.client.on('error', error => { console.log('Connection failed', error) }) this.client.on('message', (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>
不封裝直接使用。ws和wss不一樣
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
如何解決ElementUI導(dǎo)航欄重復(fù)點菜單報錯問題
這篇文章主要介紹了如何解決ElementUI導(dǎo)航欄重復(fù)點菜單報錯問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07vue中defineProperty和Proxy的區(qū)別詳解
這篇文章主要介紹了vue中defineProperty和Proxy的區(qū)別詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11解決vue axios的封裝 請求狀態(tài)的錯誤提示問題
今天小編就為大家分享一篇解決vue axios的封裝 請求狀態(tài)的錯誤提示問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue 中 filter 與 computed 的區(qū)別與用法解析
這篇文章主要介紹了Vue 中 filter 與 computed 的區(qū)別與用法,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11