一、安装 mqtt 库
(网上说安装高版本容易出问题,所以安装版本为3.0.0的)
进入vue项目的根目录,然后执行安装命令:cnpm install mqtt@3.0.0 -S
安装成功后,在 package.json
文件中可以看到 mqtt 的版本号:
二、vue 代码实现
其中要注意 securemode 参数,使用 wss 方式连接时 securemode=2,使用 ws 方式连接时 securemode=3。(参考文章:MQTT-WebSocket连接通信 - 阿里云物联网平台 - 阿里云)
<template>
<div>
<button @click="doConnected">连接</button>
<button @click="doPublish">发布</button>
<button @click="doDisconnected">断开连接</button>
<p>收到的消息: {{recvData}}</p>
</div>
</template>
<script>
import mqtt from 'mqtt' // 引入mqtt模块
export default {
components: {},
data () {
return {
client: null,
options: {
connectTimeout: 4000, // 超时时间
clientId: 'gl9f****2vi.Car_Robot|securemode=3,signmethod=hmacsha256,timestamp=2524608000000|', // id
username: 'Car_Robot&gl9f****2vi', // 用户名
password: '541262081****ee538a659ca0aecc40ba7bf40861372be570e53dbdaf46fb4b9', // 密码
cleanSession: false,
keepAlive: 60 // 心跳值,心跳值太大可能会连接不成功,这个参考文档
},
subscription: {
topic: '/sys/gl9f****2vi/Car_Robot/thing/service/property/set',
qos: 0
},
publication: {
topic: '/sys/gl9f****2vi/Car_Robot/thing/event/property/post',
qos: 0,
payload: ''
},
recvData: '' // 接收的消息
}
},
methods: {
doConnected () {
console.log('正在连接...')
try {
this.client = mqtt.connect('ws://gl9f****2vi.iot-as-mqtt.cn-shanghai.aliyuncs.com:443', this.options)
} catch (error) {
console.log('mqtt连接失败: ', error)
}
this.client.on('connect', (e) => {
console.log('连接成功')
this.doSubscribe() // 订阅主题
})
// 接收消息处理
this.client.on('message', (topic, message) => {
console.log('收到来自', topic, '的消息', message.toString())
this.recvData = message.toString()
})
// 连接错误处理
this.client.on('error', (error) => {
console.log('连接出错: ', error)
})
// 重新连接处理
this.client.on('reconnect', () => {
console.log('重新连接...')
})
},
doDisconnected () {
try {
this.doUnSubscribe()
this.client.end()
console.log('断开连接')
} catch (error) {
console.log('断开连接失败: ', error.toString())
}
},
doSubscribe () {
const { topic, qos } = this.subscription
this.client.subscribe(topic, qos, (error) => {
if (!error) {
console.log('订阅成功')
} else {
console.log('订阅失败')
}
})
},
doUnSubscribe () {
const { topic } = this.subscription
this.client.unsubscribe(topic, error => {
if (error) {
console.log('取消订阅失败', error)
}
})
},
doPublish () {
const { topic, qos, payload } = this.publication
this.client.publish(topic, payload, qos, error => {
if (error) {
console.log('发布失败', error)
}
})
}
}
}
</script>
三、测试
执行 npm run dev
命令来运行项目,如果物联网平台上对应的设备显示【在线】的状态,则连接成功!