Android webview mqtt,ionic如何使用client MQTT – docoder

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.npmjs.com/package/mqtt

1.4.mqtt.js库：https://cdnjs.cloudflare.com/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 indexin data) {

var currentStatus = data[index];

(scope.monitHandler || defaultMonitHandler)(index, currentStatus);

}

console.log("currentStatusOne--", JSON.stringify(currentStatus));

}

if (topic === scope.TOPIC_STATUS) {

for (var indexin 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下：

(2).在index.js文件中引用：

(3).在controllers.js引用：

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

/**

* 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();

}])

})();

$ cordova plugin add cordova-plugin-crosswalk-webview

(2).安装完成build

$ $ cordova build android