基于Vue的MQTT项目开发

新建vue3项目

# 新建 vite + vue3的项目
npm init vue@latest

yarn 安装依赖包

yarn add mqtt

初探 

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

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

export default {
name: 'LED',
setup() {
const deviceConfig = {
productKey: 'xx',
deviceName: 'led_1',
deviceSecret: 'xxxx',
regionId: 'cn-shanghai', // 根据自己的区域替换
}

const client = ref(null)

const connectToBroker = () => {
const options = initializeMqttOptions(deviceConfig)
console.log(options)
client.value = mqtt.connect(
'wss://productKey.iot-as-mqtt.cn-shanghai.aliyuncs.com',
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 = ()=>{
if (client.value) {
client.value.publish(`/sys/${deviceConfig.productKey}/${deviceConfig.deviceName}/thing/event/property/post`, {
"NightLightSwitch": "0"
})
}
}

const subscribe = ()=>{
client.value.subscribe('/productKey/deviceName/user/get', (err) => {
if (!err) {
console.log('Successfully subscribed!')
}
})
}
const initializeMqttOptions = (deviceConfig) => {
const params = {
productKey: deviceConfig.productKey,
deviceName: deviceConfig.deviceName,
timestamp: Date.now(),
clientId: Math.random().toString(36).substr(2),
}
const options = {
keepalive: 60,
clean: true,
protocolVersion: 4,
}
options.password = generateHmacSha1Signature(params, deviceConfig.deviceSecret)
options.clientId = `${params.clientId}|securemode=2,signmethod=hmacsha1,timestamp=${params.timestamp}|`
options.username = `${params.deviceName}&${params.productKey}`
return options
}

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()
})

return {
connectToBroker,
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 } from 'vue'
// import mqtt from 'mqtt'
// import hexHmacSha1 from '../utils/hex_hmac_sha1'

export default {
  name: 'LED',
  setup() {
    const deviceConfig = {
      username: 'admin',
      password: 'Tshun163',
      productKey: 'xx',
      deviceName: 'led_1',
      deviceSecret: 'xxxx',
      regionId: 'cn-shanghai', // 根据自己的区域替换
    }

    const client = ref(null)

    const connectToBroker = () => {
      const options = initializeMqttOptions(deviceConfig)
      console.log(options)
      client.value = mqtt.connect(
        'ws://170.11.0.200: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 '
      client.value.publish(`kaijie1`, message)
    }

    const subscribe = () => {
      client.value.subscribe('kaijie', (err) => {
        if (!err) {
          console.log('Successfully subscribed!')
        }
      })
    }
    const initializeMqttOptions = (deviceConfig) => {
      const params = {
        productKey: deviceConfig.productKey,
        deviceName: deviceConfig.deviceName,
        timestamp: Date.now(),
        clientId: Math.random().toString(36).substr(2),
      }
      const options = {
        keepalive: 60,
        clean: true,
        protocolVersion: 4,
      }
      options.password = generateHmacSha1Signature(
        params,
        deviceConfig.deviceSecret,
      )
      options.clientId = `${params.clientId}|securemode=2,signmethod=hmacsha1,timestamp=${params.timestamp}|`
      options.username = `${params.deviceName}&${params.productKey}`
      return options
    }

    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()
    })

    return {
      connectToBroker,
      subscribe,
      initializeMqttOptions,
      generateHmacSha1Signature,
      publish,
    }
  },
}
</script>

<style></style>