[Web] Angular 監聽並接收來自MQTT Server的訊息

 在實作網頁前端時，想收MQTT來的訊息，即時顯示在網頁上。

這個問題卡了我非常久，但解法卻非常簡單。

PS: 似乎也有從NODEJS傳送MQTT訊息到前端ANGULAR，再即時顯示的做法。

實作ANGULAR前端將網路上常見的MQTT程式範例時，會遇到一個問題就是傳送到網頁端的MQTT是有的，但卻無法正確的顯示在網頁上。按F12打開來看會顯示什麼websocket error ...，確切的error message己經忘了（有點久了，太久才想著要寫這篇記錄）。依循著這段錯誤訊息最後才找到解法。

簡單的說，一般的MQTT在傳送的時候，會有分protocol是MQTT還是websocket，或許有其他protocol但我並不清楚，這次是改成websocket讓前端的angular可接收。

說明就到以上為止，接下來我們來實作如何完整的把所有流程完成

我們是用Ubuntu，MQTT的SERVER也是掛在Ubuntu上。以下是改寫掛在UBUNTU上MQTT SERVER的設定檔，若是用WINDOWS架設MQTT的人會不適用喔。

1. 更改MQTT Server設定檔

sudo gedit /etc/mosquitto/mosquitto.conf

編輯mosquitto.conf檔

//-------------------//

listener 1883

protocol mqtt

listener 9001

protocol websockets

//-------------------//

小解釋一下多加了一段listener 9001, protocol websockets

儲存後並關閉，輸入以下指令重跑MQTT SERVER

mosquitto -c /etc/mosquitto/mosquitto.conf

2. Python Client傳送端改寫程式

import paho.mqtt.publish as publish

publish.single(sub_title, data_out, qos, hostname="localhost", port=9001)

3. Angular 前端程式

in app.module.ts

import { MqttModule } from "ngx-mqtt";

export const MQTT_SERVICE_OPTIONS = {

//connectOnCreate: false,

hostname: 'mqtt server ip',

port: 8883,

path: '/mqtt'

};

import [MqttModule.forRoot(MQTT_SERVICE_OPTIONS)]

in yourComponents.component.ts

constructor(private mqttService: MqttService) {

this.subscription = this.mqttService.observe('MQTT_sub_title')

.subscribe((message: IMqttMessage) => {

        let obj: MyObj = JSON.parse(message.payload.toString());

    }

}

PS: PYTHON用websockets傳送訊息出去會比一般MQTT PROTOCOL速度還要慢很多，MQTT PROTOCOL瞬間就傳出去了，但是websockets大概要0.X秒才傳出去。但至少在網頁前端可以即時接收來自MQTT的訊息並顯示在網頁上了。

參考 references:

https://stackoverflow.com/questions/35621075/mqtt-over-websocket-in-python