mqtt를 vue2와 연결하는 이전 방법은 다음과 같습니다.
1.yarn mqtt 추가 또는 npm 설치 mqtt
2.'mqtt'에서 mqtt 가져오기
installation 완성 후 페이지에 직접 인용해서 사용하시면 됩니다
그래서 vue2 프로젝트에서는 비교적 간단합니다.
하지만, 하지만, 하지만
vue3으로 이동하면서 다양한 오류가 발생했습니다. ReferenceError: global is not Defined
네트워크 전체를 검색해도 해결하고 싶은 답을 찾기가 어려웠습니다.
그래서 MQTT 버전을 여러가지 방법으로 업그레이드, 다운그레이드했는데 사용하기 편했어요. Mao Bird 사용을 위한 다양한 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
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 아래에 새 mqtt 페이지를 생성하고 utils
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 연결에서 발생하는 함정을 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!