JS HTML Web端使用MQTT通讯测试

VC MFC C++ MQTT VC编译MQTT VC调用MQTT dll eclipse-paho-mqtt

JS HTML Web端使用MQTT通讯测试

Android Studio MQTT 使用测试 eclipse.paho.mqtt

系统：windows10 64bit

开发工具：UEdit64

运行环境：360安全浏览器 12.1

测试工具：MQTTBox

一、编写简单布局

布局效果：

布局代码：

	
服务器地址：
	
	
心跳时间  ：
		
	
用户名    ：
	
	
密码      ：
	
	
	
　
		连接服务器   　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　    
	
		

	

		订阅消息　
		QoS
			0_Almost_Once
			1_Atleast_Once
			2_Exactly_Once
		　
		添加订阅信息   　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　    
	
	
	

		订阅列表
	
	
	

		

			

				
订阅消息
				
QoS
				
操作
			
		
	
	

		接收消息
	
		
	

		
	
	
	
　
		发布点：　
		发布消息：　　
		发送消息   　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　    
	

二、编写JS代码

连接代码

function MQTT_Connect(serveradd,KeepAlive,UserName,PassWord) {
		  //MQTT连接的配置
		  MQTT_Options: {
			  protocolVersion: 4; //MQTT连接协议版本
			  clientId: 'miniTest22222';
			  clean: false;
			  keepalive: KeepAlive;
			  password: UserName;
			  username: PassWord;
			  reconnectPeriod: 1000;			//1000毫秒，两次重新连接之间的间隔
			  connectTimeout: 10 * 1000; 		//1000毫秒，两次重新连接之间的间隔
			  resubscribe: true; //如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）
		  };
			//开始连接
			MQTT_Client = mqtt.connect(serveradd, this.MQTT_Options);
			MQTT_Client.on('connect',
				function (connack) {
					console.log('MQTT连接成功')
				})
			//服务器下发消息的回调
			MQTT_Client.on("message", function (topic, payload) {
				console.log(" 收到 topic:" + topic + " , payload :" + payload)
				var str = document.getElementById("textareaid").value;
	  		document.getElementById("textareaid").value = str + "\n"+"收到 topic:" + topic + " , payload :" + payload;
			})
			//服务器连接异常的回调
			MQTT_Client.on("error", function (error) { console.log("MQTT Server Error 的回调" + error) })
			//服务器重连连接异常的回调
			MQTT_Client.on("reconnect", function () { console.log("MQTT Server Reconnect的回调") })
			//服务器连接异常的回调
			MQTT_Client.on("offline", function (errr) { console.log("MQTT Server Offline的回调" + errr) })
		};

订阅一个主题代码

	MQTT_SubOne = function(Topic) {
		var ok = false;
		if (MQTT_Client && MQTT_Client.connected) {
			MQTT_Client.subscribe(Topic, function (err, granted) {
				if (!err) { 
					console.log('订阅主题 ' + Topic + ' 成功') 
					ok = true;
				}else { console.log('订阅主题 ' + Topic + ' 失败') 
					ok = false;
				}
			})
		} else {
			console.log('请先连接服务器')
			ok = false;
		}
		return ok;
	};

订阅多个主题代码

	function MQTT_SubMany() {
		if (MQTT_Client && MQTT_Client.connected) {
			MQTT_Client.subscribe({ 'Topic1': { qos: 0 }, 'Topic2': { qos: 1 } }, function (err, granted) {
				if (!err) {
					console.log('订阅多主题成功')
				} else {
					console.log('订阅多主题失败')
				}
			})
		} else {
			console.log('请先连接服务器')
		}
	};

发布消息代码

	MQTT_PubMsg = function(Topic, Msg) {
		if (MQTT_Client && MQTT_Client.connected) {
			MQTT_Client.publish(Topic, Msg);
			console.log('发布成功->' + Topic + '->' + Msg)
		} else {
			console.log('请先连接服务器')
		}
	};

取消订阅一个主题代码

	function MQTT_UnSubOne(Topic) {
		if (MQTT_Client && MQTT_Client.connected) {
			MQTT_Client.unsubscribe(Topic);
		} else {
			console.log('请先连接服务器')
		}
	};

 取消订阅多个主题代码

	function MQTT_unSubMany() {
		if (MQTT_Client && MQTT_Client.connected) {
			MQTT_Client.unsubscribe(['Topic1', 'Topic2']);
		} else {
			console.log('请先连接服务器')
		}
	};

三、实验效果