簡介
MQTT.js (opens new window)是 JavaScript 編寫的，實現了 MQTT 協議客戶端功能的模塊，可以在瀏覽器 和 Node.js 環境中使用。
由於 JavaScript 單線程特性，MQTT.js 是全異步 MQTT 客戶端，MQTT.js 支持 MQTT 與 MQTT over WebSocket，在不同運行環境支持的度如下：
- 瀏覽器環境：MQTT over WebSocket（包括微信小程序、支付寶小程序等定制瀏覽器環境）
- Node.js 環境：MQTT、MQTT over WebSocket
不同環境里除了少部分連接參數不同，其他 API 均是相同的。
API
詳細描述在：https://www.npmjs.com/package/mqtt
mqtt.**connect()**mqtt.**Client()**mqtt.Client#**publish()**mqtt.Client#**subscribe()**mqtt.Client#**unsubscribe()**mqtt.Client#**end()**mqtt.Client#**removeOutgoingMessage()**mqtt.Client#**reconnect()**mqtt.Client#**handleMessage()**mqtt.Client#**connected**mqtt.Client#**reconnecting**mqtt.Client#**getLastMessageId()**mqtt.**Store()**mqtt.Store#**put()**mqtt.Store#**del()**mqtt.Store#**createStream()**mqtt.Store#**close()**
代碼
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
float: left;
border: red solid 1px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" ></script>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js" ></script>
<script type="text/javascript">
$(function () {
const options = {
clean: true,
connectTimeout: 4000,
clientId: 'emqx_client_h5',
username: "admin",
password: 'public'
}
const connectUrl = 'ws://192.168.40.128:8083/mqtt'
const client = mqtt.connect(connectUrl, options);
//當重新連接啟動觸發回調
client.on('reconnect', () => {
$("#div1").text("正在重連.....");
});
//連接斷開后觸發的回調
client.on("close",function () {
$("#div1").text("客戶端已斷開連接.....");
});
//從broker接收到斷開連接的數據包后發出。MQTT 5.0特性
client.on("disconnect",function (packet) {
$("#div1").text("從broker接收到斷開連接的數據包....."+packet);
});
//客戶端脫機下線觸發回調
client.on("offline",function () {
$("#div1").text("客戶端脫機下線.....");
});
//當客戶端無法連接或出現錯誤時觸發回調
client.on("error",(error) =>{
$("#div1").text("客戶端出現錯誤....."+error);
});
//當客戶端發送任何數據包時發出。這包括published()包以及MQTT用於管理訂閱和連接的包
client.on("packetsend",(packet)=>{
$("#div1").text("客戶端已發出數據包....."+packet);
});
//當客戶端接收到任何數據包時發出。這包括來自訂閱主題的信息包以及MQTT用於管理訂閱和連接的信息包
client.on("packetreceive",(packet)=>{
$("#div1").text("客戶端已收到數據包....."+packet);
});
//成功連接后觸發的回調
client.on("connect",function (connack) {
$("#div1").text("成功連接上服務器"+new Date());
//訂閱某主題
/**
* client.subscribe(topic/topic array/topic object, [options], [callback])
* topic:一個string類型的topic或者一個topic數組,也可以是一個對象
* options
*/
client.subscribe("testtopic/#",{qos:2});
//每隔2秒發布一次數據
setInterval(publish,2000)
});
function publish() {
//發布數據
/**
* client.publish(topic,message,[options], [callback])
*
* message: Buffer or String
* options:{
* qos:0, //默認0
* retain:false, //默認false
* dup:false, //默認false
* properties:{}
* }
* callback:function (err){}
*/
const message = "h5 message "+Math.random()+new Date();
client.publish("testtopic/123",message,{qos:2});
$("#div2").text("客戶端發布了數據:"+message);
}
//當客戶端接收到發布消息時觸發回調
/**
* topic:收到的數據包的topic
* message:收到的數據包的負載playload
* packet:收到的數據包
*/
client.on('message', (topic, message,packet) => {
$("#div3").text("客戶端收到訂閱消息,topic="+topic+";消息數據:"+message+";數據包:"+packet);
});
//頁面離開自動斷開連接
$(window).bind("beforeunload",()=>{
$("#div1").text("客戶端窗口關閉,斷開連接");
client.disconnect();
})
});
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
測試
emqx dashboard中也可以看到客戶端以及訂閱的主題
