更新：新增 根据主题判断的增删改的逻辑
终于抽出来点时间更新一下了，还是上班的时间！
看了评论说项目跑不起来，特此更新了简单实例，现在可以跑起来了！
看好了给个小星星，支持一下！
怎么新建一个项目工程，这里就不说了！主要说mqtt，怎么使用mqttws31.js，发送一个消息，怎么接收显示的问题！
代码会放到我的GitHub上，往后看！
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>消息队列</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 ,自己配的消息队列服务，这里用的在线的服务，测试工具的话也会放到github；地址在最下方！
port = 9001; //端口
addtopic = 'add'; //约定的主题
//下面暂时不用在意，下次会讲
useTLS = false;
username = null;
password = null;
cleansession = false;
上面东西配好后，下面就是重点了: 具体代码解释，会写到注释里！
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;
},
//实时通信
MQTTconnect() {
this.mqtt = new Paho.MQTT.Client( //实例化一个对象
host,
port,
"client" + this.getuuid(), //防止多个浏览器打开，导致的问题，保证唯一性
);
var options = {
timeout: 10,
useSSL: useTLS,
cleanSession: cleansession,
//如果为false(flag=0)，Client断开连接后，Server应该保存Client的订阅信息。如果为true(flag=1)，表示Server应该立刻丢弃任何会话状态信息。
onSuccess: this.onConnect,
onFailure: function(message) {
//连接失败定时重连
setTimeout(this.MQTTconnect, this.reconnectTimeout);
}
};
this.mqtt.onConnectionLost = this.onConnectionLost;
this.mqtt.onMessageArrived = this.onMessageArrived;
//用户名和密码的验证，我这里都为空；不加验证
if (username != null) {
options.userName = username;
options.password = password;
}
this.mqtt.connect(options);
},
//uuid随机生成
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，最多一次送达。也就是发出去就fire掉，没有后面的事情了。
// QoS1，至少一次送达。发出去之后必须等待ack，没有ack，就要找时机重发
// QoS2，准确一次送达。消息id将拥有一个简单的生命周期。
});
//发布一个消息，再连接成功后，发送一个响应，确保连接没有问题；
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);
//判断主题，调用方法，这里可以订阅多个主题，在此处判断，接受不同的主题，调用不同的方法！
if (topics == "add") {
//添加
this.addtopic(msg);
}else {
return;
}
},
},
}
</script>
<style>
.apps {
width: 100%;
overflow: hidden;
}
</style>
消息验证
提供一个这样的在线的测试工具；
(SJBLQ$O)6JCDOT13P65R1F.png
介绍一下：
1.server： 消息队列服务所在的地址，保证和config.js里面的地址一样；
2.port：端口保证和config.js里面的地址一样；
3.订阅：是订阅主题的地方，要和config.js约定的主题相同，才可！
4.发布，填写topic，我们是“add”，payload,内容，如上图！随便写！
点击发布，在你的页面，就能看到你发送的信息了！
1526366434(1).jpg
ok，结束了！拿去用到项目里吧！
github地址：[https://github.com/sky-xsk/vue-mqtt-mqttws31.js-]
给个星星star，说明你看过！谢谢！
网友评论