1.在index.html中引入mqttws31.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="./static/tools//mqttws31.js"></script> <!-- 引入mqttws31.js -->
<title>********</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2.封装mqtt通信组件
<template>
<div></div>
</template>
<script>
export default {
name: 'mqttws',
data () {
return {
client: null
}
},
methods: {
// 建立新连接
buildConnect () {
let clientParams = {
hostname: '',
port: 8083,
clientId:'',
userName: '',
password: ''
}
// eslint-disable-next-line
this.client = new Paho.MQTT.Client(
clientParams.hostname,
clientParams.port,
clientParams.clientId
)
// 建立客户端实例
let options = {
invocationContext: {
host: clientParams.hostname,
port: clientParams.port,
path: this.client.path,
clientId: clientParams.clientId
},
timeout: 5,
keepAliveInterval: 50,
cleanSession: true,
useSSL: false,
userName: clientParams.userName,
password: clientParams.password,
onSuccess: this.clientSuccess,
onFailure: this.clientFailure
}
this.client.connect(options) // 连接服务器并注册连接成功处理事件
this.client.onConnectionLost = this.onConnectionLost // 注册连接断开处理事件
this.client.onMessageArrived = this.onMessageArrived // 注册消息接收处理事件
},
// mqtt连接成功
clientSuccess () {
console.log('连接成功')
this.$emit('messageArrived', '连接成功')
this.client.subscribe(`machine/h5`) // 订阅主题
},
// mqtt连接失败
clientFailure (e) {
console.log('连接失败')
console.log(e)
this.$emit('messageArrived', '连接失败')
},
// 连接丢失
onConnectionLost (responseObject) {
if (responseObject.errorCode === 0) {
console.log('连接已断开')
} else {
console.log('异常：连接丢失' + responseObject.errorMessage)
}
},
// 接收消息事件
onMessageArrived (message) {
console.log('收到消息:' + message.payloadString)
this.$emit('messageArrived', JSON.parse(message.payloadString))
},
// 断开mqtt连接
disconnect () {
this.client.disconnect()
}
}
}
</script>
<style>
</style>
- 在需要通信的页面引入mqtt组件
<template>
<div>
<!-- mqtt通信组件 -->
<Mqtt ref="mqtt" @messageArrived="onMessageArrived"></Mqtt>
</div>
</template>
<script>
import Mqtt from '@/components/Mqtt'
export default {
components: {
Mqtt
},
data () {
return {
}
},
mounted () {
this.$refs.mqtt.buildConnect() // 建立mqtt通信
},
beforeDestroy () {
this.$refs.mqtt.disconnect() // 关闭页面断开mqtt连接
},
methods: {
// 接收mqtt消息
onMessageArrived (msg) {
console.log(msg)
}
}
}
</script>
<style>
</style>
附：
网址：http://www.eclipse.org/paho/downloads.php
然后去github 下载 mqttws31.js
地址：https://github.com/eclipse/paho.mqtt.javascript
网友评论