溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“vue3+vite2+mqtt連接遇到的坑怎么解決”，在日常操作中，相信很多人在vue3+vite2+mqtt連接遇到的坑怎么解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue3+vite2+mqtt連接遇到的坑怎么解決”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
之前用vue2連接mqtt時是這樣的方式 ：
1.yarn add mqtt 或 npm install mqtt
2.import mqtt from 'mqtt'
安裝完后直接在頁面引用，就可以用了
所以在vue2項目里是比較簡單的。
但是，但可是，可但是
移到vue3就遇到各種報錯了，ReferenceError: global is not defined
找遍整網也很難找到想關的答案。
于是就各種升降級改MQTT版本，毛用。各種CDN引用，毛鳥用。
最后去node_modules目錄看看，發現有個dist的目錄，難道。。。
抱著試試的心態，就改為這樣：
import * as mqtt from "mqtt/dist/mqtt.min";
that.client = mqtt.connect('ws://' + mqttOption.server, mqttOption);我去，還真的是可以了!搞足了一天，終于搞定。
那種心情是無法言語的，或許這就是碼農的快樂之一吧！
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<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('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)
}或者
<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 'mqtt'
export default {
data() {
return {
account:"12",
password:"12",
connection: {
host: 'www.liufengtec.com',
port: 8084,
endpoint: '/mqtt',
clean: true, // 保留會話
connectTimeout: 4000, // 超時時間
reconnectPeriod: 4000, // 重連時間間隔
// 認證信息
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();
},
// 創建連接
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('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不一樣
到此，關于“vue3+vite2+mqtt連接遇到的坑怎么解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
