vue+iview+mqtt（mqttws31.js）简单实例

最新推荐文章于 2024-05-24 16:38:00 发布

u011024421

最新推荐文章于 2024-05-24 16:38:00 发布

阅读量2.4k

点赞数

分类专栏：物联网

物联网专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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">

白无声_FE

关注

2018.05.15 14:41*
字数 275
阅读 874 评论 1 喜欢 2

    <!-- 文章内容 -->
    <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 &lt; <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>] &amp; <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>

消息验证

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

(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-iview-mqtt-mqttws31.js-

给个星星star，说明你看过！谢谢！

      </div>
    </div>
</div>

u011024421

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue+iview+mqtt（mqttws31.js）简单实例

vue+iview+mqtt（mqttws31.js）简单实例 &lt;!-- 作者区域 --&gt; &lt;div class="author"&gt; &lt;a class="avatar" href="/u/2fb92d7e3f03"&gt; &lt;img src="//upload.jianshu.io/u
复制链接

扫一扫