阿裡雲物聯網套件(iot)設備間通信(M2M)在web端的實踐

 npm install --save mqtt

然後在main.js導入  

import mqtt from 'mqtt'

將mqtt掛載到Vue全局  

Object.defineProperty(Vue.prototype, 'mqtt', {value: mqtt});

這時就可以在全局使用mqtt了，於是在App.vue中使用mqtt，由於之前邏輯是nodejs進行連接，那麼做簽名和HTTPS認證都是在服務端進行的，現在挪到web端流程改為由後端進行簽名和HTTPS，前端請求後端介面返回必要欄位進行mqtt連接(這裡的必要欄位包括mqtt連接需要的clientId,username,password。username對應的返回值為iotId,password對應的返回值為iotToken)，拿到後端HTTPS認證之後的返回值前端進行mqtt連接：(示例) 

var host = `ws://${productKey}.iot-as-mqtt.cn-shanghai.aliyuncs.com:443`; //這裡需要註意，在服務端是基於TCP的連接(var host = `mqtt://${productKey}.iot-as-mqtt.cn-shanghai.aliyuncs.com:1883`;)，而在web端需要是基於websocket的連接，這個地方的坑踩了兩天o(╥﹏╥)o
var options = {
    clientId: clientId, //請求後端返回的clientId
    username: iotId, //後端HTTPS認證返回的iotId
    password: iotToken //後端HTTPS認證返回的iotToken
}
var client = this.mqtt.connect(host, options); //mqtt連接
client.on('connect', function(){
    //設備連接成功
    client.subscribe(topic); //進行主題的訂閱
})
client.on('error', function(){
    //連接出錯
})
client.on('close', function(){
    //連接斷開
    //client.end(); //結束連接
    //client = null; //將client對象置空
})
client.on('message', function(topic, message){
    //topic: 主題 message: 內容
    //收到消息這裡的message是buffer，使用toString()轉換為字元串
})

{
    toDevice: 'deviceB', //這裡值為需要發送的設備deviceName
    data: data //這裡data為客戶端之間約定的數據，可以為任意對象，只有大家約定好就行
}

4.設備deviceB訂閱/產品key/deviceB/m2m，(這裡訂閱的主題為deviceB自身)，將收到如下格式數據： 

{
        fromDevice: 'deviceA',
        toDevice: 'deviceB',
        messageId: '',
        data: data //deviceA發來的data
}

//在連接時訂閱自身topic
client.subscribe(`/${productKey}/deviceA/m2m`);

在連接或者收到消息時,當前設備為deviceA：
var msgObj = {
    toDevice: 'deviceB',
    data: data //約定的data
}
client.publish(`/${productKey}/deviceA/m2m`);

以上為物聯網套件M2M的關鍵代碼。