更新：新增 根据主题判断的增删改的逻辑

终于抽出来点时间更新一下了，还是上班的时间！

看了评论说项目跑不起来，特此更新了简单实例，现在可以跑起来了！

看好了给个小星星，支持一下！

怎么新建一个项目工程，这里就不说了！主要说mqtt，怎么使用mqttws31.js，发送一个消息，怎么接收显示的问题！

代码会放到我的GitHub上，往后看！

index.html

消息队列

//引入js

//引入主题配置文件

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

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;

}

},

},

}

.apps {

width: 100%;

overflow: hidden;

}

消息验证

提供一个这样的在线的测试工具；

(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，说明你看过！谢谢！