VUE 使用MQTT 配合 will遗嘱消息

?vue使用MQTT.js遗嘱失效问题?

https://segmentfault.com/q/1010000023264969?utm_source=sf-similar-question%20https://segmentfault.com/q/1010000023264969?utm_source=sf-similar-question

https://zhuanlan.zhihu.com/p/637574135

https://blog.csdn.net/xu275321143/article/details/129982081

function mqttRequest({
url,
port,
mac,
userName = "",
passWord = ""
}) {
let agreement;
//1.协议
// #ifdef H5
agreement = "ws://"
// #endif
// #ifdef MP-WEIXIN||APP-PLUS
agreement = "wx://"
// #endif
// 2.端口
url = `${agreement}${url}`;
console.log(url)
// 4.根据协议规则必须传递userName: 'admin',password: 'password',
let client = mqtt.connect(url, {
port: port,
username: userName,
clean: true, // 保留回话
// connectTimeout: 4000, // 超时时间
password: passWord,
mac: mac,
keepalive: 10,
keepAliveInterval: 4, //心跳包
timeout: 6, //超时时间
reconnect: true, //自动重连
will: {
topic: 'error',
payload: 'Connection Closed abnormally..!',
retain: false,
qos: 0,
},
})
return client
}

　综合资料尝试

<template>

? <div>

? ? <h1>LED - IOT</h1>

? ? <button @click="connectToBroker">链接</button>

? ? <button @click="subscribe">Subscribe</button>

? ? <button @click="publish">Publish</button>

? </div>

</template>

<script>

import { ref, onMounted, onBeforeUnmount } from 'vue'

// import mqtt from 'mqtt'

// import hexHmacSha1 from '../utils/hex_hmac_sha1'

export default {

? name: 'LED',

? setup() {

? ? const deviceConfig = {

? ? ? username: 'lkj123',

? ? ? password: 'Tshun163',

? ? ? productKey: 'xx',

? ? ? // defaultTopic: topic,

? ? ? // topic1,

? ? ? // test,

? ? ? timeout: 10, // 超时时间 （单位：秒）

? ? ? keepalive: 5, // 心跳 （单位：秒）

? ? ? keepAliveInterval: 4, //心跳包

? ? ? enabled: true, // 是否使用mqtt功能

? ? ? // reconnect: true, //自动重连

? ? ? will: {

? ? ? ? topic: 'error',

? ? ? ? payload: 'Connection Closed abnormally..!',

? ? ? ? qos: 0,

? ? ? },

? ? }

? ? const client = ref(null)

? ? const connectToBroker = () => {

? ? ? const options = deviceConfig

? ? ? console.log(options)

? ? ? client.value = mqtt.connect(

? ? ? ? 'ws://192.165.10.187:8083/mqtt',

? ? ? ? // 'ws://broker.emqx.io:8083/mqtt',

? ? ? ? options,

? ? ? )

? ? ? client.value.on('connect', () => {

? ? ? ? console.log('Successfully connected to the server')

? ? ? })

? ? ? client.value.on('message', (topic, message) => {

? ? ? ? let msg = message.toString()

? ? ? ? console.log('Received message: ' + msg)

? ? ? ? // Close the connection: client.value.end()

? ? ? })

? ? }

? ? const publish = () => {

? ? ? const message = 'h5message '

? ? ? //jsonstringify格式

? ? ? client.value.publish(`kaijie1`, message, {

? ? ? ? retain: true,

? ? ? })

? ? }

? ? const subscribe = () => {

? ? ? client.value.subscribe('kaijie1', (err) => {

? ? ? ? if (!err) {

? ? ? ? ? console.log('Successfully subscribed!')

? ? ? ? }

? ? ? })

? ? }

? ? const generateHmacSha1Signature = (params, deviceSecret) => {

? ? ? let keys = Object.keys(params).sort()

? ? ? const list = []

? ? ? keys.forEach((key) => {

? ? ? ? list.push(`${key}${params[key]}`)

? ? ? })

? ? ? const contentStr = list.join('')

? ? ? // return hexHmacSha1(deviceSecret, contentStr)

? ? }

? ? onMounted(() => {

? ? ? connectToBroker()

? ? })

? ? onBeforeUnmount(() => {

? ? ? client.value.end()

? ? ? client.value.publish(`kaijie1`, 'GUANBI')

? ? })

? ? return {

? ? ? connectToBroker,

? ? ? subscribe,

? ? ? // initializeMqttOptions,

? ? ? generateHmacSha1Signature,

? ? ? publish,

? ? }

? },

}

</script>

<style></style>

综合资料尝试

<template>

? <div>

? ? <h1>LED - IOT</h1>

? ? <button @click="connectToBroker">链接</button>

? ? <button @click="subscribe">Subscribe</button>

? ? <button @click="publish">Publish</button>

? </div>

</template>

<script>

import { ref, onMounted, onBeforeUnmount } from 'vue'

// import mqtt from 'mqtt'

// import hexHmacSha1 from '../utils/hex_hmac_sha1'

export default {

? name: 'LED',

? setup() {

? ? const deviceConfig = {

? ? ? username: 'lkj123',

? ? ? password: 'Tshun163',

? ? ? productKey: 'xx',

? ? ? // defaultTopic: topic,

? ? ? // topic1,

? ? ? // test,

? ? ? timeout: 10, // 超时时间 （单位：秒）

? ? ? keepalive: 5, // 心跳 （单位：秒）

? ? ? keepAliveInterval: 4, //心跳包

? ? ? enabled: true, // 是否使用mqtt功能

? ? ? // reconnect: true, //自动重连

? ? ? will: {

? ? ? ? topic: 'error',

? ? ? ? payload: 'Connection Closed abnormally..!',

? ? ? ? qos: 0,

? ? ? },

? ? }

? ? const client = ref(null)

? ? const connectToBroker = () => {

? ? ? const options = deviceConfig

? ? ? console.log(options)

? ? ? client.value = mqtt.connect(

? ? ? ? 'ws://192.165.10.187:8083/mqtt',

? ? ? ? // 'ws://broker.emqx.io:8083/mqtt',

? ? ? ? options,

? ? ? )

? ? ? client.value.on('connect', () => {

? ? ? ? console.log('Successfully connected to the server')

? ? ? })

? ? ? client.value.on('message', (topic, message) => {

? ? ? ? let msg = message.toString()

? ? ? ? console.log('Received message: ' + msg)

? ? ? ? // Close the connection: client.value.end()

? ? ? })

? ? }

? ? const publish = () => {

? ? ? const message = 'h5message '

? ? ? //jsonstringify格式

? ? ? client.value.publish(`kaijie1`, message, {

? ? ? ? retain: true,

? ? ? })

? ? }

? ? const subscribe = () => {

? ? ? client.value.subscribe('kaijie1', (err) => {

? ? ? ? if (!err) {

? ? ? ? ? console.log('Successfully subscribed!')

? ? ? ? }

? ? ? })

? ? }

? ? const generateHmacSha1Signature = (params, deviceSecret) => {

? ? ? let keys = Object.keys(params).sort()

? ? ? const list = []

? ? ? keys.forEach((key) => {

? ? ? ? list.push(`${key}${params[key]}`)

? ? ? })

? ? ? const contentStr = list.join('')

? ? ? // return hexHmacSha1(deviceSecret, contentStr)

? ? }

? ? onMounted(() => {

? ? ? connectToBroker()

? ? })

? ? onBeforeUnmount(() => {

? ? ? client.value.end()

? ? ? client.value.publish(`kaijie1`, 'GUANBI')

? ? })

? ? return {

? ? ? connectToBroker,

? ? ? subscribe,

? ? ? // initializeMqttOptions,

? ? ? generateHmacSha1Signature,

? ? ? publish,

? ? }

? },

}

</script>

<style></style>

?综合资料代码尝试
?

<template>
  <div>
    <h1>LED - IOT</h1>
    <button @click="connectToBroker">链接</button>
    <button @click="subscribe">Subscribe</button>
    <button @click="publish">Publish</button>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue'
// import mqtt from 'mqtt'
// import hexHmacSha1 from '../utils/hex_hmac_sha1'

export default {
name: 'LED',
setup() {
const deviceConfig = {
username: 'lkj123',
password: 'Tshun163',
productKey: 'xx',
// defaultTopic: topic,
// topic1,
// test,
timeout: 10, // 超时时间 （单位：秒）

keepalive: 5, // 心跳 （单位：秒）
keepAliveInterval: 4, //心跳包
enabled: true, // 是否使用mqtt功能
// reconnect: true, //自动重连

will: {
//遗嘱消息
topic: 'error', // 订阅的topic
payload: 'Connection Closed abnormally..!',
qos: 0,
},
}

const client </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> ref(</span><span style="background-color: #f5f5f5; color: #0000ff;">null</span><span style="background-color: #f5f5f5; color: #000000;">)

const connectToBroker </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> () </span><span style="background-color: #f5f5f5; color: #000000;">=&gt;</span><span style="background-color: #f5f5f5; color: #000000;"> {
  const options </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> deviceConfig

  console.log(options)
  client.value </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> mqtt.connect(
    </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">ws://192.165.10.187:8083/mqtt</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">,
    </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> 'ws://broker.emqx.io:8083/mqtt',</span>

options,
)
client.value.on('connect', () => {
console.log('Successfully connected to the server')
})
client.value.on('message', (topic, message) => {
let msg = message.toString()
console.log('Received message: ' + msg)
// Close the connection: client.value.end()
})
}
const publish = () => {
const message = 'h5message '
//jsonstringify格式
client.value.publish(kaijie1, message, {
retain: true,
})
}

const subscribe </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> () </span><span style="background-color: #f5f5f5; color: #000000;">=&gt;</span><span style="background-color: #f5f5f5; color: #000000;"> {
  client.value.subscribe(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">kaijie1</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">, (err) </span><span style="background-color: #f5f5f5; color: #000000;">=&gt;</span><span style="background-color: #f5f5f5; color: #000000;"> {
    </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;"> (</span><span style="background-color: #f5f5f5; color: #000000;">!</span><span style="background-color: #f5f5f5; color: #000000;">err) {
      console.log(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">Successfully subscribed!</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)
    }
  })
}

const generateHmacSha1Signature </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> (params, deviceSecret) </span><span style="background-color: #f5f5f5; color: #000000;">=&gt;</span><span style="background-color: #f5f5f5; color: #000000;"> {
  let keys </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> Object.keys(params).sort()
  const list </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> []
  keys.forEach((key) </span><span style="background-color: #f5f5f5; color: #000000;">=&gt;</span><span style="background-color: #f5f5f5; color: #000000;"> {
    list.push(`${key}${params[key]}`)
  })
  const contentStr </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> list.join(</span><span style="background-color: #f5f5f5; color: #000000;">''</span><span style="background-color: #f5f5f5; color: #000000;">)
  </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> return hexHmacSha1(deviceSecret, contentStr)</span>

}

onMounted(() </span><span style="background-color: #f5f5f5; color: #000000;">=&gt;</span><span style="background-color: #f5f5f5; color: #000000;"> {
  connectToBroker()
})
onBeforeUnmount(() </span><span style="background-color: #f5f5f5; color: #000000;">=&gt;</span><span style="background-color: #f5f5f5; color: #000000;"> {
  client.value.end()
  client.value.publish(`kaijie1`, </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">GUANBI</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)
})
</span><span style="background-color: #f5f5f5; color: #0000ff;">return</span><span style="background-color: #f5f5f5; color: #000000;"> {
  connectToBroker,
  subscribe,
  </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;"> initializeMqttOptions,</span>

generateHmacSha1Signature,
publish,
}
},
}
</script>

<style></style>

?在 VUE 项目中使用?mqtt?库连接到 MQTT 服务器，并通过?options?配置将?will?消息发送成功