更新：新增 根據(jù)主題判斷的增刪改的邏輯
終于抽出來點(diǎn)時(shí)間更新一下了，還是上班的時(shí)間！
看了評(píng)論說項(xiàng)目跑不起來，特此更新了簡單實(shí)例，現(xiàn)在可以跑起來了！
看好了給個(gè)小星星，支持一下！
怎么新建一個(gè)項(xiàng)目工程，這里就不說了！主要說mqtt，怎么使用mqttws31.js，發(fā)送一個(gè)消息，怎么接收顯示的問題！
代碼會(huì)放到我的GitHub上，往后看！
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>消息隊(duì)列</title>
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="/dist/main.css">
<script src="./tools/mqttws31.js" type="text/javascript"></script> //引入js
<script src="./tools/config.js" type="text/javascript"></script> //引入主題配置文件
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/dist/vendors.js"></script>
<script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>
config.js
host = '222.73.204.54'; // hostname or IP address ,自己配的消息隊(duì)列服務(wù)，這里用的在線的服務(wù)，測(cè)試工具的話也會(huì)放到github；地址在最下方！
port = 9001; //端口
addtopic = 'add'; //約定的主題
//下面暫時(shí)不用在意，下次會(huì)講
useTLS = false;
username = null;
password = null;
cleansession = false;
上面東西配好后，下面就是重點(diǎn)了: 具體代碼解釋，會(huì)寫到注釋里！
app.vue
<template>
<div>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
data() {
return {
reconnectTimeout: 2000,
mqtt: {},
msg:"",
}
},
mounted() {
this.MQTTconnect();
},
methods: {
addtopic(msg) {
this.msg = msg;
},
//實(shí)時(shí)通信
MQTTconnect() {
this.mqtt = new Paho.MQTT.Client( //實(shí)例化一個(gè)對(duì)象
host,
port,
"client" + this.getuuid(), //防止多個(gè)瀏覽器打開，導(dǎo)致的問題，保證唯一性
);
var options = {
timeout: 10,
useSSL: useTLS,
cleanSession: cleansession,
//如果為false(flag=0)，Client斷開連接后，Server應(yīng)該保存Client的訂閱信息。如果為true(flag=1)，表示Server應(yīng)該立刻丟棄任何會(huì)話狀態(tài)信息。
onSuccess: this.onConnect,
onFailure: function(message) {
//連接失敗定時(shí)重連
setTimeout(this.MQTTconnect, this.reconnectTimeout);
}
};
this.mqtt.onConnectionLost = this.onConnectionLost;
this.mqtt.onMessageArrived = this.onMessageArrived;
//用戶名和密碼的驗(yàn)證，我這里都為空；不加驗(yàn)證
if (username != null) {
options.userName = username;
options.password = password;
}
this.mqtt.connect(options);
},
//uuid隨機(jī)生成
getuuid() {
var uid = [];
var hexDigits = "0123456789abcdefghijklmnopqrst";
for (var i = 0; i < 32; i++) {
uid[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
uid[6] = "4";
uid[15] = hexDigits.substr((uid[15] & 0x3) | 0x8, 1);
var uuid = uid.join("");
return uuid;
},
//連接
onConnect() {
//連接成功，訂閱主題
this.mqtt.subscribe(addtopic, {
qos: 2
//QoS0，最多一次送達(dá)。也就是發(fā)出去就fire掉，沒有后面的事情了。
// QoS1，至少一次送達(dá)。發(fā)出去之后必須等待ack，沒有ack，就要找時(shí)機(jī)重發(fā)
// QoS2，準(zhǔn)確一次送達(dá)。消息id將擁有一個(gè)簡單的生命周期。
});
//發(fā)布一個(gè)消息，再連接成功后，發(fā)送一個(gè)響應(yīng)，確保連接沒有問題；
this.mqtt.send("login", "{\"command\":\"login\",\"clientId\":\"" + this.mqtt.clientId + "\"}", 0);
},
//連接丟失
onConnectionLost(response) {
//console.log("異常掉線，掉線信息為:" + response.errorMessage);
},
//接收到消息，處理
onMessageArrived(message) {
var topics = message.destinationName;
var msg = $.parseJSON(message.payloadString);
//判斷主題，調(diào)用方法，這里可以訂閱多個(gè)主題，在此處判斷，接受不同的主題，調(diào)用不同的方法！
if (topics == "add") {
//添加
this.addtopic(msg);
}else {
return;
}
},
},
}
</script>
<style>
.apps {
width: 100%;
overflow: hidden;
}
</style>
消息驗(yàn)證
提供一個(gè)這樣的在線的測(cè)試工具；
(SJBLQ$O)6JCDOT13P65R1F.png
介紹一下：
1.server： 消息隊(duì)列服務(wù)所在的地址，保證和config.js里面的地址一樣；
2.port：端口保證和config.js里面的地址一樣；
3.訂閱：是訂閱主題的地方，要和config.js約定的主題相同，才可！
4.發(fā)布，填寫topic，我們是“add”，payload,內(nèi)容，如上圖！隨便寫！
點(diǎn)擊發(fā)布，在你的頁面，就能看到你發(fā)送的信息了！
1526366434(1).jpg
ok，結(jié)束了！拿去用到項(xiàng)目里吧！
github地址：[https://github.com/sky-xsk/vue-mqtt-mqttws31.js-]
給個(gè)星星star，說明你看過！謝謝！
