溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JS、HTML、Web端怎么使用MQTT通訊測(cè)試

發(fā)布時(shí)間：2023-04-15 10:46:02 來(lái)源：億速云 閱讀：177 作者：iii 欄目：開(kāi)發(fā)技術(shù)

本文小編為大家詳細(xì)介紹“JS、HTML、Web端怎么使用MQTT通訊測(cè)試”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“JS、HTML、Web端怎么使用MQTT通訊測(cè)試”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

一、編寫(xiě)簡(jiǎn)單布局

布局效果：

JS、HTML、Web端怎么使用MQTT通訊測(cè)試

布局代碼：

<body >
	<div >服務(wù)器地址：<input  id="MQTT_ServerAdd" value="ws://www.passingworld.vip:8083/mqtt"></div>	
	<div >心跳時(shí)間  ：<input  id="MQTT_ConnHeartbeatTime" value="30"></div>		
	<div >用戶名    ：<input  id="MQTT_UserName" value="admin"></div>	
	<div >密碼      ：<input  id="MQTT_PassWord" value="public"></div>	
	
	<div>　
		<button onclick="MQTT_ConnServer()">連接服務(wù)器</button>   　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　    
	</div>		
 
	<div >
		訂閱消息<input id="MQTT_Subscribe_Msg">　
		QoS<select id="MQTT_Subscribe_QoS">
			<option>0_Almost_Once</option>
			<option>1_Atleast_Once</option>
			<option>2_Exactly_Once</option>
		</select>　
		<button onclick="Add_MQTT_Subscribe()">添加訂閱信息</button>   　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　    
	</div>
	
	<div >
		訂閱列表
	</div>	
	<div>
		<table  border="1">
			<tr >
				<td>訂閱消息</td>
				<td>QoS</td>
				<td>操作</td>
			</tr>
		</table>
	</div>
	<div >
		接收消息
	</div>		
	<div>
		<textarea id="textareaid" rows="5" cols="30" class="message1" ></textarea>
	</div>	
	<div>　
		發(fā)布點(diǎn)：<input id="MQTT_Publish_Text">　
		發(fā)布消息：<input id="MQTT_Publish_Msg">　　
		<button onclick="Send_MQTT_Msg()">發(fā)送消息</button>   　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　    
	</div>
</body>

二、編寫(xiě)JS代碼

連接代碼

function MQTT_Connect(serveradd,KeepAlive,UserName,PassWord) {
		  //MQTT連接的配置
		  MQTT_Options: {
			  protocolVersion: 4; //MQTT連接協(xié)議版本
			  clientId: 'miniTest22222';
			  clean: false;
			  keepalive: KeepAlive;
			  password: UserName;
			  username: PassWord;
			  reconnectPeriod: 1000;			//1000毫秒，兩次重新連接之間的間隔
			  connectTimeout: 10 * 1000; 		//1000毫秒，兩次重新連接之間的間隔
			  resubscribe: true; //如果連接斷開(kāi)并重新連接，則會(huì)再次自動(dòng)訂閱已訂閱的主題（默認(rèn)true）
		  };
			//開(kāi)始連接
			MQTT_Client = mqtt.connect(serveradd, this.MQTT_Options);
			MQTT_Client.on('connect',
				function (connack) {
					console.log('MQTT連接成功')
				})
			//服務(wù)器下發(fā)消息的回調(diào)
			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;
			})
			//服務(wù)器連接異常的回調(diào)
			MQTT_Client.on("error", function (error) { console.log("MQTT Server Error 的回調(diào)" + error) })
			//服務(wù)器重連連接異常的回調(diào)
			MQTT_Client.on("reconnect", function () { console.log("MQTT Server Reconnect的回調(diào)") })
			//服務(wù)器連接異常的回調(diào)
			MQTT_Client.on("offline", function (errr) { console.log("MQTT Server Offline的回調(diào)" + errr) })
		};

訂閱一個(gè)主題代碼

	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('請(qǐng)先連接服務(wù)器')
			ok = false;
		}
		return ok;
	};

訂閱多個(gè)主題代碼

	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('請(qǐng)先連接服務(wù)器')
		}
	};

發(fā)布消息代碼

	MQTT_PubMsg = function(Topic, Msg) {
		if (MQTT_Client && MQTT_Client.connected) {
			MQTT_Client.publish(Topic, Msg);
			console.log('發(fā)布成功->' + Topic + '->' + Msg)
		} else {
			console.log('請(qǐng)先連接服務(wù)器')
		}
	};

取消訂閱一個(gè)主題代碼

	function MQTT_UnSubOne(Topic) {
		if (MQTT_Client && MQTT_Client.connected) {
			MQTT_Client.unsubscribe(Topic);
		} else {
			console.log('請(qǐng)先連接服務(wù)器')
		}
	};

 取消訂閱多個(gè)主題代碼

	function MQTT_UnSubOne(Topic) {
		if (MQTT_Client && MQTT_Client.connected) {
			MQTT_Client.unsubscribe(Topic);
		} else {
			console.log('請(qǐng)先連接服務(wù)器')
		}
	};

三、實(shí)驗(yàn)效果

JS、HTML、Web端怎么使用MQTT通訊測(cè)試

讀到這里，這篇“JS、HTML、Web端怎么使用MQTT通訊測(cè)試”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手