angular項目實現mqtt的訂閱與發布 ngx-mqtt

angular項目實現mqtt的訂閱與發布

如果要寫一個exe可執行文件，可以使用angular編寫，然后使用electron打包成一個exe文件。

https://github.com/maximegris/angular-electron

 

 

 我們可以使用現成的angular鏈接mqtt的插件實現訂閱和發布——ngx-mqtt

https://github.com/sclausen/ngx-mqtt

安裝 ngx-mqtt

首先在angular項目中安裝 ngx-mqtt

npm install ngx-mqtt --save

配置mqtt服務器

然后需要在app.module.ts或者使用mqtt的組件中配置mqtt服務器信息。

import {
  IMqttMessage,
  MqttModule,
  IMqttServiceOptions
} from 'ngx-mqtt';

export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
  hostname: '192.168.1.123',  // mqtt 服務器ip
  port: 8083,  // mqtt 服務器端口
  path: '/mqtt'
};

@NgModule({
  declarations: [HomeComponent],
  imports: [CommonModule, FormsModule, SharedModule, HomeRoutingModule, MqttModule.forRoot(MQTT_SERVICE_OPTIONS)]
})

 在需要的組件中使用ngx-mqtt訂閱和發布消息。

首先引入

import {Subscription} from 'rxjs';
import {IMqttMessage, MqttService} from 'ngx-mqtt';

 構造函數中注入依賴

 constructor(private _mqttService: MqttService) {
    // ...
  }

訂閱mqtt消息

this.subscription = this._mqttService.observe('my/topic').subscribe((message: IMqttMessage) => {
      console.log(message.payload.toString()); 
});

　　其中  this._mqttService.observe(“ 這里面是要訂閱的主題——topic ”)，回調函數 message 為訂閱后，發布者發布相關主題數據時收到的數據。

 發布消息

this._mqttService.unsafePublish(topicText, messageText, {qos: 1, retain: true});

 　　topicText：是發布的主題（topic）　　　　

　　messageText：是發布的內容（payload）     

　　{qos: 1, retain: true}

　　retain參數：

　　當我們使用MQTT客戶端發布消息（PUBLISH）時，如果將RETAIN標志位設置為true，那么MQTT服務器會將最近收到的一條RETAIN標志位為true的消息保存在服務器端（內存或文件），例如開啟系統，查看設備的開關狀態，我們可以獲取上一次設備的狀態直接設置開關的開關狀態，使開關和設備的真實狀態對應起來。

　　qos 參數：

1. QOS0不可靠，因此適合大量數據的傳輸，因為很大量的數據，完全避免不丟包是很難的，網絡環境、現實環境什么的。想要保證的話，大量的數據，一般是要做斷點續傳。而且小編的經驗，像類似 “輪詢” 這樣不斷地得到一些檢測數據，這種數據，中間丟幾包是基本不會影響業務的。
2. QOS1可靠，一般的場景夠用，因為總能接到數據嘛。缺點就是 “可能造成” 1條數據，接了多次。
3. QOS2嚴格可靠，保證相同的消息只接收一條，（請稍微構思一下內部的實現…雖然不復雜，但要一定的流程來保證的，對吧），在每一次通訊都這樣執行的話，勢必會造成性能的考驗，因此小編對QOS2的意見是 “如非必要，慎用，特別是個人/小團隊，沒有那么多資金租用特別好的服務器”。

 然后根據自己的具體邏輯，就可以實現angular mqtt消息的訂閱和轉發了！

連接mqtt服務器

配置好 mqtt 服務器后，運行會自動連接設置好的mqtt服務器，直接進行訂閱或者發布消息就可以。

export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
  hostname: '192.168.1.123',  // mqtt 服務器ip
  port: 8083,  // mqtt 服務器端口
  path: '/mqtt'
};

但是！BUT！

如果運行過程中需要切換mqtt服務器，因此需要重新配置mqtt服務器，然后重新連接。

首先在界面引進配置mqtt的參數

import {MQTT_SERVICE_OPTIONS} from './home.module';

然后重新配置一下連接mqtt服務器的參數

MQTT_SERVICE_OPTIONS.hostname = "這個地方填修改的mqtt服務器ip";
MQTT_SERVICE_OPTIONS.port = Number("這個地方填寫修改的mqtt服務器的端口");
// 如果需要其他的配置自己添加修改

配置信息修改完成，重新連接

this._mqttService.connect(MQTT_SERVICE_OPTIONS);