为方便上手，放一个项目的参考链接https://github.com/xieyidi/mqtt
目前多数项目使用mqtt协议和前端通信，都没有在脚手架上，小编查阅了好多资料，亲测了一种可用的方法，手把手分享一下：
1、首先在项目的入口文件index html用script引入mqttws的js文件
引入mqtt.png
2、将mqtt通信逻辑封装成一个vue组件
<template>
<div id="mqttws">
<input type="text" id="msg" v-model="msg"/>
<input type="button" value="Send" @click="send" />
<input type="button" value="Start" @click="start"/>
<input type="button" value="Stop" @click="stop"/>
</div>
</template>
<style>
</style>
<script>
export default {
name: 'mqttws',
data() {
return {
hostname: '39.106.63.136',
port: 443,
clientId: 'clientId-NX75qTbKES',
timeout: 5,
keepAlive: 50,
cleanSession: false,
ssl: false,
userName: 'hj',
password: '123456',
topic: '001/in',
client:{},
options: {},
msg:'order',
count:0
}
},
created : function() {
this.client = new Paho.MQTT.Client('39.106.63.136', 443, 'clientId-NX75qTbKES');
console.log(this.client);
var _client=this.client;
var opt = this.options =
{
invocationContext: {
host: '39.106.63.136',
port: 443,
path: _client.path,
clientId: 'clientId-NX75qTbKES'
},
timeout: 5,
keepAliveInterval: 50,
cleanSession: false,
useSSL: false,
userName: 'hj',
password: '123456',
onSuccess: function() {
console.log("onConnected");
_client.subscribe('001/in');//订阅主题
},
onFailure: function (e) {
console.log(e);
}
};
this.client.connect(opt);//连接服务器并注册连接成功处理事件
this.client.onConnectionLost = this.onConnectionLost;//注册连接断开处理事件
this.client.onMessageArrived = this.onMessageArrived;//注册消息接收处理事件
// console.log('after onlost');
},
// mounted : function (){
// var opt = this.options;
// this.client.connect(opt);//连接服务器并注册连接成功处理事件
// this.client.onConnectionLost = this.onConnectionLost;//注册连接断开处理事件
//
// this.client.onMessageArrived = this.onMessageArrived;//注册消息接收处理事件
// console.log('after onlost');
// },
methods: {
onConnectionLost: function (responseObject) {
if (responseObject.errorCode !== 0) {
console.log("onConnectionLost:"+responseObject.errorMessage)
console.log("连接已断开")
}
},
onMessageArrived: function (message) {
console.log("收到消息:"+message.payloadString);
},
onConnect : function() {
console.log("onConnected");
this.client.subscribe('001/in');//订阅主题
},
send : function (){
var s = this.msg;
if(s){
s = "{time:"+new Date().Format("yyyy-MM-dd hh:mm:ss")+", content:"+(s)+", from: web console}";
var message = new Paho.MQTT.Message(s);
message.destinationName = this.topic;
this.client.send(message);
this.msg = '';
}
},
start : function(){
window.tester = window.setInterval(function(){
if(this.client.isConnected){
var s = "{time:"+new Date().Format("yyyy-MM-dd hh:mm:ss")+", content:"+(this.count++)+", from: web console}";
var message = new Paho.MQTT.Message(s);
message.destinationName = this.topic;
this.client.send(message);
}
}.bind(this), 1000);
},
stop : function (){
window.clearInterval(window.tester);
}
}
}
</script>
3、在主组件中引入这个子组件
引入组件.png
