為方便上手辩诞，放一個(gè)項(xiàng)目的參考鏈接https://github.com/xieyidi/mqtt
目前多數(shù)項(xiàng)目使用mqtt協(xié)議和前端通信蜈缤，都沒有在腳手架上到旦，小編查閱了好多資料笆包，親測了一種可用的方法猿推，手把手分享一下：
1宅此、首先在項(xiàng)目的入口文件index html用script引入mqttws的js文件
引入mqtt.png
2懂鸵、將mqtt通信邏輯封裝成一個(gè)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);//連接服務(wù)器并注冊連接成功處理事件
this.client.onConnectionLost = this.onConnectionLost;//注冊連接斷開處理事件
this.client.onMessageArrived = this.onMessageArrived;//注冊消息接收處理事件
// console.log('after onlost');
},
// mounted : function (){
// var opt = this.options;
// this.client.connect(opt);//連接服務(wù)器并注冊連接成功處理事件
// 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、在主組件中引入這個(gè)子組件
引入組件.png
