vue+iview+mqtt(mqttws31.js) 简单实例
<!-- 作者区域 -->
<div class="author">
<a class="avatar" href="/u/2fb92d7e3f03">
<img src="//upload.jianshu.io/users/upload_avatars/4155235/5a052fc33f76?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96" alt="96">
<!-- 文章内容 -->
<div data-note-content="" class="show-content">
<div class="show-content-free">
<p>怎么新建一个项目工程,这里就不说了!主要说mqtt,怎么使用mqttws31.js,发送一个消息,怎么接收显示的问题!<br>
代码会放到我的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;
},
<span class="hljs-comment">//实时通信</span>
MQTTconnect() {
<span class="hljs-keyword">this</span>.mqtt = <span class="hljs-keyword">new</span> Paho.MQTT.Client( <span class="hljs-comment">//实例化一个对象</span>
host,
port,
<span class="hljs-string">"client"</span> + <span class="hljs-keyword">this</span>.getuuid(), <span class="hljs-comment">//防止多个浏览器打开,导致的问题,保证唯一性</span>
);
<span class="hljs-keyword">var</span> options = {
<span class="hljs-attr">timeout</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">useSSL</span>: useTLS,
<span class="hljs-attr">cleanSession</span>: cleansession,
<span class="hljs-comment">//如果为false(flag=0),Client断开连接后,Server应该保存Client的订阅信息。如果为true(flag=1),表示Server应该立刻丢弃任何会话状态信息。</span>
onSuccess: <span class="hljs-keyword">this</span>.onConnect,
<span class="hljs-attr">onFailure</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">message</span>) </span>{
<span class="hljs-comment">//连接失败定时重连</span>
setTimeout(<span class="hljs-keyword">this</span>.MQTTconnect, <span class="hljs-keyword">this</span>.reconnectTimeout);
}
};
<span class="hljs-keyword">this</span>.mqtt.onConnectionLost = <span class="hljs-keyword">this</span>.onConnectionLost;
<span class="hljs-keyword">this</span>.mqtt.onMessageArrived = <span class="hljs-keyword">this</span>.onMessageArrived;
<span class="hljs-comment">//用户名和密码的验证,我这里都为空;不加验证</span>
<span class="hljs-keyword">if</span> (username != <span class="hljs-literal">null</span>) {
options.userName = username;
options.password = password;
}
<span class="hljs-keyword">this</span>.mqtt.connect(options);
},
<span class="hljs-comment">//uuid随机生成</span>
getuuid() {
<span class="hljs-keyword">var</span> uid = [];
<span class="hljs-keyword">var</span> hexDigits = <span class="hljs-string">"0123456789abcdefghijklmnopqrst"</span>;
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-number">32</span>; i++) {
uid[i] = hexDigits.substr(<span class="hljs-built_in">Math</span>.floor(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">0x10</span>), <span class="hljs-number">1</span>);
}
uid[<span class="hljs-number">6</span>] = <span class="hljs-string">"4"</span>;
uid[<span class="hljs-number">15</span>] = hexDigits.substr((uid[<span class="hljs-number">15</span>] & <span class="hljs-number">0x3</span>) | <span class="hljs-number">0x8</span>, <span class="hljs-number">1</span>);
<span class="hljs-keyword">var</span> uuid = uid.join(<span class="hljs-string">""</span>);
<span class="hljs-keyword">return</span> uuid;
},
<span class="hljs-comment">//连接</span>
onConnect() {
<span class="hljs-comment">//连接成功,订阅主题</span>
<span class="hljs-keyword">this</span>.mqtt.subscribe(addtopic, {
<span class="hljs-attr">qos</span>: <span class="hljs-number">2</span>
<span class="hljs-comment">//QoS0,最多一次送达。也就是发出去就fire掉,没有后面的事情了。</span>
<span class="hljs-comment">// QoS1,至少一次送达。发出去之后必须等待ack,没有ack,就要找时机重发</span>
<span class="hljs-comment">// QoS2,准确一次送达。消息id将拥有一个简单的生命周期。</span>
});
<span class="hljs-comment">//发布一个消息,再连接成功后,发送一个响应,确保连接没有问题;</span>
<span class="hljs-keyword">this</span>.mqtt.send(<span class="hljs-string">"login"</span>, <span class="hljs-string">"{\"command\":\"login\",\"clientId\":\""</span> + <span class="hljs-keyword">this</span>.mqtt.clientId + <span class="hljs-string">"\"}"</span>, <span class="hljs-number">0</span>);
},
<span class="hljs-comment">//连接丢失</span>
onConnectionLost(response) {
<span class="hljs-comment">//console.log("异常掉线,掉线信息为:" + response.errorMessage);</span>
},
<span class="hljs-comment">//接收到消息,处理</span>
onMessageArrived(message) {
<span class="hljs-keyword">var</span> topics = message.destinationName;
<span class="hljs-keyword">var</span> msg = $.parseJSON(message.payloadString);
<span class="hljs-comment">//判断主题,调用方法,这里可以订阅多个主题,在此处判断,接受不同的主题,调用不同的方法!</span>
<span class="hljs-keyword">if</span> (topics == <span class="hljs-string">"add"</span>) {
<span class="hljs-comment">//添加</span>
<span class="hljs-keyword">this</span>.addtopic(msg);
}<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">return</span>;
}
},
},
}
</script>
<style>
.apps {
width: 100%;
overflow: hidden;
}
</style>
消息验证
提供一个这样的在线的测试工具;
介绍一下:
1.server: 消息队列服务所在的地址,保证和config.js里面的地址一样;
2.port:端口保证和config.js里面的地址一样;
3.订阅:是订阅主题的地方,要和config.js约定的主题相同,才可!
4.发布,填写topic,我们是“add”,payload,内容,如上图!随便写!
点击发布,在你的页面,就能看到你发送的信息了!
ok,结束了!拿去用到项目里吧!
github地址:https://github.com/sky-xsk/vue-iview-mqtt-mqttws31.js-
给个星星star,说明你看过!谢谢!
</div>
</div>
</div>