1.下載依賴
npm install mqttimport * as mqtt from "mqtt/dist/mqtt.min" ? 我是用的uniapp vue3 vite這里嘗試了很多方式,都導入不進去后來我就采用的本地引入方式, 把mqtt.min.js下載到本地然后在index.html 中導入<script src="./MEQX/mqtt.js" type="text/javascript">
2.在EMQX后臺創建一個JWT認證方式
并設置Secret,Payload根據子級需求設置,注意Expected Value不能大寫全部小寫
3.生成token
1.在線工具
通過在線網址生成 https://jwt.io/
PAYLOAD:DATA的值是需要和代碼對應的,如果不需要就的話就填寫{"password":""}
VERIFY SIGNATURE的Secret一定要記得填寫
?
生成好后將這個值填寫到password后
const options = {clientId,username,password: "生成的值"
}client = mqtt.connect(`${MQTT_IP}`, options)
2.通過jose包生成
下載jose npm i jose
?
payload參數根據自己需求
?
import { SignJWT } from 'jose'
//emqxsecret就是后臺的Secret
const secret = new TextEncoder().encode('emqxsecret')
export async function createJWT(username, clientId) {const payload = {username,clientId,}
?const jwt = await new SignJWT(payload).setProtectedHeader({ alg: 'HS256' }).setIssuedAt().setExpirationTime('2h').sign(secret)
?console.log(`Encoded JWT: ${jwt}`)return jwt
}4.最后進行連接和其他操作
import { userStore } from '@/store/user.js'
import { createJWT } from './jose.js'
?
const MQTT_IP = 'ws://192.168.31.20:8083/mqtt'
?
let client = null
?
const subscription = {topic: `topic`,qos: 1,
}
?
async function MEQXConnect(roomid = 1) {
?subscription.topic = `topic${roomid}`
?const userPinia = userStore()//傳給mqtt.connect要是字符串是數字的不行,我傳的數字失敗了const clientId = String(userPinia.userInfo.id)
?const username = String(userPinia.userInfo.nickName)
?const token = await createJWT(username, clientId)
?const options = {clientId,username,password: token}
?client = mqtt.connect(`${MQTT_IP}`, options)
?client.on('connect', () => {console.log('MEQX連接成功----------');doSubscribe()})
?client.on('error', () => {console.log('MEQX連接失敗------------');})
?client.on('reconnect', () => {console.log('MEQX重新連接----------');})
?client.on('end', () => {console.log('MEQX重新斷開------------');})
?client.on('close', () => {console.log('MEQX重新關閉------------');})
?client.on('offline', () => {console.log('MEQX客戶端下線------------');})
?client.on("message", (topic, message) => {console.log(`MEQX received message: ${message} from topic: ${topic}`);})
?//訂閱const doSubscribe = () => {client.subscribe(subscription.topic, subscription.qos,(error, granted) => {if (error) {console.log("subscribe error:", error)return}console.log("subscribe successfully:", granted)})}
}
?
//取消訂閱
export const doUnSubscribe = () => {client.unsubscribe(subscription.topic, subscription.qos, (error) => {if (error) {console.log("unsubscribe error:", error)return;}console.log(`unsubscribed topic: ${subscription.topic}`)})
}
?
export default MEQXConnect?參考地址
應用)
