<script src="https://cdn.bootcdn.net/ajax/libs/mqtt/4.1.0/mqtt.min.js"></script>
<script>
  // 會(huì)在全局初始化一個(gè) mqtt 變量，直接使用就可以
  console.log(mqtt)
</script>

npm install mqtt --save

// 頁(yè)面使用，直接 import 就可以
import mqtt from 'mqtt';

// 連接地址，有很多連接失敗都是因?yàn)榈刂窙](méi)寫(xiě)對(duì)
const connectUrl = `ws://XXXX/mqtt/ws`;
// 客戶端ID
const clientId = `mqtt_${Math.random().toString(16).slice(3)}`;
// 連接設(shè)置
let options = {
  clean: true,	// 保留會(huì)話
  connectTimeout: 4000,	// 超時(shí)時(shí)間
  reconnectPeriod: 1000,	// 重連時(shí)間間隔
  // 認(rèn)證信息
  clientId,
  username: 'zhongketianji',
  password: 'zhongketianji123',
}
// 需要訂閱的主題
const topic = '/mqtt_backend/format_tracking/Uibox.car190';
const topic1 = '/mqtt_backend/format_tracking/Uibox.car191';

// 創(chuàng)建客戶端
var client = mqtt.connect(connectUrl, options);

// 成功連接后觸發(fā)的回調(diào)
client.on('connect', () => {
	console.log('已經(jīng)連接成功');
	// 訂閱主題，這里可以訂閱多個(gè)主題
	client.subscribe([topic, topic1], () => {
		console.log(`訂閱了主題 ${[topic, topic1].join('和')}`)
	})
});

// 當(dāng)客戶端收到一個(gè)發(fā)布過(guò)來(lái)的消息時(shí)觸發(fā)回調(diào)
/** 
 * topic：收到的報(bào)文的topic 
 * message：收到的數(shù)據(jù)包的負(fù)載playload 
 * packet：MQTT 報(bào)文信息，其中包含 QoS、retain 等信息
 */
client.on('message', function (topic, message, packet) {
	// 這里有可能拿到的數(shù)據(jù)格式是Uint8Array格式，可以直接用toString轉(zhuǎn)成字符串
	// let data = JSON.parse(message.toString());
	console.log("獲取到的數(shù)據(jù)：", message)
	console.log("數(shù)據(jù)對(duì)應(yīng)訂閱主題：", topic)
	console.log("獲取到的數(shù)據(jù)包：", packet)
});

// 關(guān)閉客戶端（斷開(kāi)連接）
client.end();

// 發(fā)送信息給 topic（主題）
client.publish(topic, '這是給topic發(fā)送的信息');

will: {
    topic: 'WillMsg',	// 發(fā)布消息的主題
    payload: 'Connection Closed abnormally!',	// 要發(fā)布的消息
    qos: 0,		// 消息等級(jí)
    retain: false	// 保留消息標(biāo)識(shí)
},

// 成功連接后觸發(fā)的回調(diào)
client.on('connect', () => {
	console.log('已經(jīng)連接成功');
});

// 當(dāng)客戶端收到一個(gè)發(fā)布過(guò)來(lái)的消息時(shí)觸發(fā)回調(diào)
/** 
 * topic：收到的數(shù)據(jù)包的topic 
 * message：收到的數(shù)據(jù)包的負(fù)載playload 
 * packet：MQTT 報(bào)文信息，其中包含 QoS、retain 等信息
 */
client.on('message', function (topic, message, packet) {
	// 這里有可能拿到的數(shù)據(jù)格式是Uint8Array格式，可以直接用toString轉(zhuǎn)成字符串
	// let data = JSON.parse(message.toString());
	console.log("獲取到的數(shù)據(jù)：", data_190)
	console.log("數(shù)據(jù)對(duì)應(yīng)訂閱主題：", topic)
	console.log("獲取到的數(shù)據(jù)包：", packet)
});

// 當(dāng)重新連接啟動(dòng)觸發(fā)回調(diào) 
client.on('reconnect', () => {
    console.log("正在重新連接")
});

// 連接斷開(kāi)后觸發(fā)的回調(diào) 
client.on("close",function () {
    console.log("已斷開(kāi)連接")
});

// 在收到 Broker（消息服務(wù)器） 發(fā)送過(guò)來(lái)的斷開(kāi)連接的報(bào)文時(shí)觸發(fā)的回調(diào)，參數(shù) packet 即為斷開(kāi)連接時(shí)接收到的報(bào)文。MQTT 5.0特性 
client.on("disconnect",function (packet) { 
    console.log("從broker接收到斷開(kāi)連接的報(bào)文："+packet); 
});

// 客戶端脫機(jī)下線觸發(fā)回調(diào) 
client.on("offline",function () {
    console.log("您已斷開(kāi)連接，請(qǐng)檢查網(wǎng)絡(luò)")
});

// 當(dāng)客戶端無(wú)法成功連接時(shí)或發(fā)生解析錯(cuò)誤時(shí)觸發(fā)的回調(diào)，參數(shù) error 為錯(cuò)誤信息
client.on("error",(error) =>{
    console.log("客戶端出現(xiàn)錯(cuò)誤：", error);
});

//當(dāng)客戶端發(fā)送任何數(shù)據(jù)包時(shí)發(fā)出。這包括publish()以及MQTT用于管理訂閱和連接的包 
client.on("packetsend",(packet)=>{
    console.log("客戶端已發(fā)出報(bào)文", packet); 
});

//當(dāng)客戶端接收到任何報(bào)文時(shí)發(fā)出。這包括來(lái)自訂閱主題的信息包以及MQTT用于管理訂閱和連接的信息 
client.on("packetreceive",(packet)=>{
    // 會(huì)在 client.on('message', function (topic, message, packet) {}); 之前觸發(fā)
    console.log("客戶端接收?qǐng)?bào)文", packet); 
});

Client.publish(topic, message, [options], [callback])

// 向 test 主題發(fā)送一條 QoS 為 0 的消息
client.publish('test', '這是一條信息', { qos: 0, retain: false }, function (error) {
  if (error) {
    console.log(error)
  } else {
    console.log('Published')
  }
})

Client.subscribe(topic/topic array/topic object, [options], [callback])

// 訂閱一個(gè)名為 test 且 QoS 為 0 的 Topic
client.subscribe('test', { qos: 0 }, function (error, granted) {
  if (error) {
    console.log("訂閱失敗:", error)
  } else {
    console.log("已訂閱：", granted[0].topic)
  }
})

Client.unsubscribe(topic/topic array, [options], [callback])

// 取消訂閱名為 test 的 Topic
client.unsubscribe('test', function (error) {
  if (error) {
    console.log(error)
  } else {
    console.log('已取消訂閱')
  }
})

Client.end([force], [options], [callback])

client.end();

const connectUrl = `ws://broker.emqx.io:8083/mqtt`;

client = mqtt.connect(connectUrl, {
  clean: true,
  connectTimeout: 4000,
  reconnectPeriod: 1000,
  clientId: 'emqx_test',
  username: 'emqx_test',
  password: 'emqx_test'
})

// 需要訂閱的主題
const topic = 'test';

//成功連接后觸發(fā)的回調(diào)
client.on('connect', () => {
  console.log('已經(jīng)連接成功');
  // 這里可以訂閱多個(gè)主題
  client.subscribe([topic], () => {
    console.log(`訂閱了主題 ${topic}`)
  })
});

// 當(dāng)客戶端收到一個(gè)發(fā)布過(guò)來(lái)的消息時(shí)觸發(fā)回調(diào)
client.on('message', function (message) {
  // 這里有可能拿到的數(shù)據(jù)格式是Uint8Array格式，所以可以直接用toString轉(zhuǎn)成字符串
  // let data = JSON.parse(message.toString());
  console.log("返回的數(shù)據(jù)：", message)
});

// 連接斷開(kāi)后觸發(fā)的回調(diào)
client.on("close", function () {
  console.log("已斷開(kāi)連接")
});