Emqx3.4.4(企業版試用) web端 js實現消息的發佈接收

原創

2020-06-28 15:25

本文只介紹如何進行消息的發佈，接收，至於emqx服務器需要靠小夥伴們自己
本文章emq服務器爲企業版試用，但消息的接收發布與emqx broker是一樣的

Paho.mqtt.js
Paho 是 Eclipse 的一個 MQTT 客戶端項目，Paho JavaScript Client 是其基於瀏覽器 JavaScript 運行環境的庫，它使用 WebSockets 連接到 MQTT 服務器。相較於 MQTT.js 來說，其功能較少，不推薦使用。

MQTT.js 可用於 Node.js 環境和瀏覽器環境。在 Node.js 上可以通過全局安裝使用命令行連接，同時還支持 MQTT ，MQTT TLS 證書連接；值得一提的是 MQTT.js 對微信小程序有較好的支持。

實現一個簡單的客戶端
mqtt.js 在瀏覽器環境下支持 WebSocket MQTT 連接，Node.js 環境下支持 TCP(SSL/TLS) MQTT 連接，請根據您的使用場景選擇對應的連接方式：

使用 connect() 函數連接並返回一個 client 實例
client 有多個事件，在 client 事件中使用回調函數處理相關邏輯：
- connect：連接成功事件
- reconnect：連接錯誤、異常斷開後重連的事件 error：連接錯誤、終止連接事件
- message：收到訂閱消息事件
client有多個基本函數
- 使用 subscribe() 函數訂閱主題
- 使用 publish() 函數發佈消息
- 使用 end() 函數連斷開和 broker 的連接
  這裏我們只對 MQTT.js 客戶端做簡單的介紹，關於該客戶端的更詳盡的說明請參閱 MQTT.js 文檔

好了直接上代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- <script src="js/mqtt.min.js"></script> -->
	<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script> <!-- emqx官方提供的js-->
	<body>
		<script>
			// WebSocket 連接字符串
			const WebSocket_URL = 'ws://localhost:8083/mqtt'
			
			// TCP/TLS 連接字符串，僅限 Node.js 環境
			const TCP_URL = 'mqtt://localhost:1883'
			const TCP_TLS_URL = 'mqtts://localhost:8883'
			// 連接選項
			const options = {
			      // 超時時間
			      connectTimeout: 4000,
			
			      // 認證信息
			      clientId: 'emqx', //可自己定義，最好不要重複
			       username: 'admin', //emq 用戶名（我這裏用的默認的）
			       password: 'public',  //密碼
			
			      // 心跳時間
			      keepalive: 60,
			      clean: true,
			}
			
			const client = mqtt.connect(WebSocket_URL, options)
			// 連接成功後初始化訂閱
			client.on('connect', () => {
			  console.log('Connected to', WebSocket_URL)
			
			  // 訂閱主題
			  client.subscribe('hello', (err) => {
			    console.log(err || '訂閱成功')
			  })
			
			  // 發佈消息
			  /* client.publish('hello', 'Hello EMQ X', (err) => {
			    console.log(err || '發佈成功')
			  }) */ 這裏需要自己測試哦
			
			})
			// 爲 message 時間添加處理函數
			client.on('message', (topic, message) => {
			  console.log('收到來自', topic, '的消息:', message.toString());
			  alert('收到來自' +topic+'的消息:'+ message);
			
			  // 斷開連接
			  //client.end() ；//只能接收一次消息，因爲關閉了連接
			  //client.end() ；//若要一直接收消息，則不能關閉連接,本案例這裏沒有關閉
			})
		</script>
	</body>
</html>

運行該html後，在emqx管理界面可以看到訂閱信息

連接信息

在管理界面自帶的工具消息，看看web界面能收到消息不，輸入用戶名，密碼，點擊連接