logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

ionic如何使用client MQTT – docoder

 liang1234_ 2019-04-26

ionic中使用client mqtt及在使用中的遇到的问题

1.mqtt介绍
1.1.MQTT（Message Queuing Telemetry Transport，消息队列遥测传输）是IBM开发的一个即时通讯协议，有可能成为物联网的重要组成部分。通过MQTT协议，目前已经扩展出了数十个MQTT服务器端程序，可以通过PHP，JAVA，Python，C，C#等系统语言来向MQTT发送相关消息。
1.2.特点：MQTT协议是为大量计算能力有限，且工作在低带宽、不可靠的网络的远程传感器和控制设备通讯而设计的协议，它具有以下主要的几项特性：
1.2.1使用发布/订阅消息模式，提供一对多的消息发布，解除应用程序耦合；
1.2.2.对负载内容屏蔽的消息传输；
1.2.3.使用 TCP/IP 提供网络连接；
1.2.4.有三种消息发布服务质量：
(1).“至多一次”，消息发布完全依赖底层 TCP/IP 网络。会发生消息丢失或重复。这一级别可用于如下情况，环境传感器数据，丢失一次读记录无所谓，因为不久后还会有第二次发送。
(2).“至少一次”，确保消息到达，但消息重复可能会发生。
(3).“只有一次”，确保消息到达一次。这一级别可用于如下情况，在计费系统中，消息重复或丢失会导致不正确的结果。
1.2.5.小型传输，开销很小（固定长度的头部是 2 字节），协议交换最小化，以降低网络流量；
1.2.6.使用 Last Will 和 Testament 特性通知有关各方客户端异常中断的机制；
1.3.官网：https://www./package/mqtt
1.4.mqtt.js库：https://cdnjs./ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js
1.5.封装调用的anguler-mqtt.js库:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
(function execute() {
    'use strict';
    angular.module('angular.mqtt', [])
        .provider('MQTT', function() {
            //mqtt是全局变量
            //monit分为三种状态
            // connected
            // disConnected
            // connecting
            var instance, scope = {};
            var inited;
            function initSth() {
                if (inited) return;
                inited = true;
                instance.subscribe(scope.TOPIC_MONIT);
                instance.on('error', function(err) {
                    console.error(err);
                    // instance.end();
                });
                instance.on('message', function(topic, payload) {
                    var data = JSON.parse(payload);
                    console.log("接收到消息----", data);
                    // var dataType = Object.prototype.toString.call(data);
                    // var isArray = dataType === '[object Array]';
                    // var isObject = dataType === '[object Object]';
                    if (topic === scope.TOPIC_MONIT) {
                        for (var index in data) {
                            var currentStatus = data[index];
                            (scope.monitHandler || defaultMonitHandler)(index, currentStatus);
                        }
                        console.log("currentStatusOne--", JSON.stringify(currentStatus));
                    }
                    if (topic === scope.TOPIC_STATUS) {
                        for (var index in data) {
                            var currentStatus = data[index];
                            (scope.statusHandler || defaultStatusHandler)(index, currentStatus);
                        }
                        console.log("currentStatusTwo--", JSON.stringify(data));
                    }
                });
                instance.on('connect', function() {
                    console.log('connected');
                });
                instance.on('reconnect', function() {
                    console.log('reconnected');
                    initSth();
                });
                instance.on('close', function() {
                    console.log('closed');
                });
            }
            //
            function defaultMonitHandler(robotIdentifer, toStatus) {
                console.log('robot', robotIdentifer, 'is', toStatus);
            }
            //
            function defaultStatusHandler(address, value) {
                console.log('the value on ', address, 'is change to', value);
            }
            var holder = {
                //先选择机器人
                selectRobot: function(identifier) {
                    console.log("选中机器人---", identifier);
                    var OLD_TOPIC_STATUS = scope.TOPIC_STATUS;
                    var NEW_TOPIC_STATUS = 'status/' + identifier;
                    scope.statusHandler = null;
                    scope.identifier = identifier;
                    scope.TOPIC_SET = 'set/' + identifier;
                    scope.TOPIC_STATUS = NEW_TOPIC_STATUS;
                    if (OLD_TOPIC_STATUS && instance) {
                        console.log("unsubscribe----");
                        instance.unsubscribe(OLD_TOPIC_STATUS);
                    }
                    if (NEW_TOPIC_STATUS && instance) {
                        console.log("subscribe-----", NEW_TOPIC_STATUS);
                        instance.subscribe(NEW_TOPIC_STATUS);
                    }
                },
                //设置具体参数
                setValue: function(address, value) {
                    var TOPIC_SET = scope.TOPIC_SET;
                    if (address && value) {
                        var payload = {
                            [address]: value
                        };
                        instance.publish(TOPIC_SET, JSON.stringify(payload));
                    }
                },
                //在rootscope或者其他位置调用
                onMonitPop: function(handler) {
                    scope.monitHandler = handler;
                },
                onStatusPop: function(handler) {
                    scope.statusHandler = handler;
                    // console.log("接收到消息---", scope.statusHandler);
                },
                removeMonitPop: function() {
                    scope.monitHandler = null;
                },
                removeStatusPop: function() {
                    scope.statusHandler = null;
                },
                //登陆先注册 
                registClient: function(user, address) {
                    console.log("user--", JSON.stringify(user), address);
                    if (instance) return instance;
                    var defaultOptions = {
                        keepalive: 60,
                        reconnectPeriod: 1000,
                        clientId: 'operator_' + user.id,
                        username: user.username,
                        password: user.password,
                        connectTimeout: 30 * 1000,
                    };
                    scope.TOPIC_MONIT = 'monit/' + user.id;
                    instance = mqtt.connect(address, defaultOptions);
                    initSth();
                    return instance;
                }
            };
            this.$get = function() {
                return holder;
            };
        })
})();

1.6.在ionic 中mqtt.js 与封装的anguler-mqtt.js 引用：
(1).放到lib下：
qtt
(2).在index.js文件中引用：
ag
(3).在controllers.js引用：
c
a
2.mqtt具体使用：
2.1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
(function execute() {
    'use strict';
    angular
        .module('myApp', ['angular.mqtt'])
        .controller('ctrl', ['$scope', 'MQTT', function($scope, MQTT) {
            console.log(MQTT);
            // 在登录成功以后，通过 用户名，密码，用户id来注册mqtt，
            MQTT.registClient({
                username: 'ming',
                password: 'mima',
                id: ABC   //用户id
            }, 'ws://122.22.223.44:3000');//ip 端口
            /**
             * onMonitPop： 用于在【报警界面】注册监控事件
             * @param robotId
             * @param connectStatus：会有下列四种情况
             *          connected： 刚刚连入
             *          disConnected： 刚刚断开
             *          connecting： 正处于连接状态
             *          notConnecting： 尚未连接
             */
            MQTT.onMonitPop(function(robotId, connectStatus) {
                console.log('robot', robotId, 'is', connectStatus);
            });
            // 在点击机器人的时候，选中查看实时信息的机器人  在选择机器人的前一个界面调用这句话
            MQTT.selectRobot('AB01');
            /* 下面两个方法，一定要在明确的选中的robot以后才可以调用 */
            // 在列表设置界面，注册实时状态发生改变的监听
            MQTT.onStatusPop(function(address, value) {
                console.log('address:', address, 'is change to', value);
            });
            //设置地址TD01的值为12.5
            MQTT.setValue('TD01', 12.5);
            //移除监控的事件
            // MQTT.removeMonitPop();
            //移除机器人状态事件
            // MQTT.removeStatusPop();
        }])
})();

2.2.添加ionic支持的web引擎插件android支持：https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview
(1).安装插件：

$ cordova plugin add cordova-plugin-crosswalk-webview

(2).安装完成build

$ $ cordova build android

(3).ios支持：https://github.com/apache/cordova-plugin-wkwebview-engine
（4).使用web引擎会使apk文件变大 如果有更好的方法请留言
(5).使用tcp协议的插件，项目中没用 https://www./package/cordova-plugin-mqtt

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： liang1234_ > 《IM模块》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多