[Node-RED] 安裝 MQTT 伺服器

Mosquitto 是開放原始碼的 MQTT 伺服器,可在 Windows、macOS、Linux 等作業系統上安裝執行,安裝程式可到 Mosquitto 官網 ( http://mosquitto.org/download ) 直接下載安裝。

  1. 我使用的是 Windows X64 系統,安裝後可以在「服務」中找到「mosquitto 服務」。
    在服務中找到mosquitto
  2. 按滑鼠右鍵,選擇「啟動」,來啟動該服務。服務啟動後,在「狀態」的欄位會顯示「執行中」。
    啟動MQTT
  3. MQTT 伺服器啟動後,會使用網路的「1883」通訊埠進行通訊。
  4. Windows 的防火牆預設是沒有開通 1883 埠,所以本機以外的通訊設備無法和 Mosquitto 伺服器連線。所以需要開通防火牆的 1883 埠。
  5. 測試MQTT伺服器是否正常運作:以管理者身分開啟兩個「終端機命令視窗」,並進入 mosquitto 資料夾。
    測試MQTT
  6. 在其中一個終端機命令視窗輸入「mosquitto_sub -t topicTest」模擬訂閱「topicTest」主題。
  7. 在另一個終端機命令視窗輸入「mosquitto_pub -h 127.0.0.1 -p 1883 -t topicTest -m “Hello World!!!”」。此時,在第一個終端機命令視窗(訂閱者)的畫面上,會出現(收到)發布者傳來的訊息。
    訂閱者收到訊息
  8. 如果要查詢 mosquitto 的指令,可在終端機命令視窗上輸入「mosquitto –help」。
  9. 用 Node-RED 測試 MQTT,開啟 Node-RED 後,使用「節點管理」安裝「MQTT」。
    安裝MQTT節點
  10. 安裝 MQTT 節點後,會在 Node-RED 左邊的節點清單「網絡」下找到「mqtt in」及「mqtt out」。
    MQTT節點
  11. 依序「mqtt in」、「debug」、「inject」、「mqtt out」等節點拖拉到流程視窗上。
  12. 編輯「mqtt in」,點擊下圖藍色框的鉛筆,可以進入進階的屬性設定。
    編輯mqtt in
  13. 在「連接」的頁面上,服務端輸入「node-red@localhost」,埠輸入「1883」。
    進階屬性設定_連接
  14. 在「消息」的頁面上,在「連接時發送的消息」選項上,主題輸入「topicTest」,內容輸入「Hi, Node-RED」,QoS 選擇「2」,最後點擊右上角的「更新」,回到上一層的屬性設定。
    QoS 若為 0 表示:最多傳一次。
    QoS 若為 1 表示:至少傳一次。
    QoS 若為 2 表示:確實傳一次。
    進階屬性_消息
  15. 「mqtt in」進階屬性設定完後如下圖:
    mqtt in 完整屬性
  16. 編輯「inject」屬性,msg.payload 輸入「再次發訊息」(也可以輸入任何您想輸入的訊息),如下圖:
    inject 屬性
  17. 編輯「mqtt out」,如下圖:
    mqtt out 屬性
  18. 最後將「mqtt in 」節點與「debug」節點連結起來,將「inject」節點與「mqtt out」節點連結起來。點擊「部署」按鈕,「mqtt in 」節點及「mqtt out」節點下方出現「已連接」,表示 MQTT 伺服器連線成功。
    MQTT連線成功
  19. 連線成功後,在 debug 視窗會出現「Hi, Node-RED, 123」,如果按下「inject」前面的方塊,則會出現「再次發訊息」(或是您輸入的訊息內容)。
    debug視窗的訊息

[Node-RED] 建立Hello World網頁

學習新的技術,第一步都要會的 Hello World 。

  1. 在 Node-RED 設計畫面的左邊節點清單中找到「網絡」下的「http in」,將他拖曳到流程畫面中,如下圖:
    建立HelloWorld01
  2. 設定該節點屬性,步驟1:在「http in」這個節點,將滑鼠左鍵點擊二下出現該節點的屬性內容;步驟2:「請求方式」選擇「GET」;步驟3:「URL」輸入「/hello」;步驟4:點選「完成」。
    建立HelloWorld02
  3. 接來,在左邊節點清單中找到「功能」下的「template」,將他拖曳到流程畫面中,如下圖:
    建立HelloWorld03
  4. 設定該節點屬性,步驟1:在「模板」這個節點,將滑鼠左鍵點擊二下出現該節點的屬性內容;步驟2:「名稱」輸入「hello」;步驟3:「語法高亮」選擇「HTML」;
    步驟4:「模板」輸入以下內容(此為html語法)
    <!DOCTYPE html>
    <html>
    <head>
    <title>Hello World</title>
    </head>
    <body>
    Hello World!!!
    </body>
    </html>
    步驟5:點選「完成」。
    建立HelloWorld04
  5. 接著,在左邊節點清單中找到「網路」下的「http response」,將他拖曳到流程畫面中,如下圖:
    建立HelloWorld05
  6. 接著,以拖拉的方式(在前一個節點最右端的圓圈處,按著滑鼠左鍵不放,拖拉到下一個節點最左端的圓圈處,再放掉滑鼠左鍵),依序將每個節點連結起來。
    建立HelloWorld06
  7. 最後,部署該流程,點擊視窗右上角的「部署」按鈕,即可完成部署。
    建立HelloWorld07
  8. 開啟瀏覽器,在網址列輸入:「http://127.0.0.1:1880/hello」,即可在瀏覽器看到 Hello World!!!
    建立HelloWorld08

[Node-RED] 安裝

  • 因為 Node-RED 是由 Node.js 設計的物聯網(IoT) 視覺程式設計環境,所以安裝 Node-RED 之前,要先安裝 Node.js。
  • 下載 Node.js (https://nodejs.org/zh-tw/download/)
    Nodejs下載
  • 選擇適合電腦的作業系統,我是使用 Windows 64bit 作業系統,所以就下載 Windows 64bit 安裝包版本。
  • 下載後安裝好 Node.js,在程式集中找到剛剛安裝好的「Node.js」,展開後,再點擊「Node.js command prompt」
    Node.js command prompt
  • 出現命令列視窗
    命令列視窗
  • 開始安裝 Node-RED,在命令列視窗輸入「npm install -g –unsafe-perm node-red」
    安裝Node-RED
  • 安裝完 Node-RED 後,會出現如下的畫面:
    安裝Node-RED完成
  • 執行 Node-RED ,在「Node.js command prompt」開啟的命令列視窗,輸入「node-red」按下「Enter」,出現如下圖畫面(出現 http://127.0.0.1:1880/),表示 Node-RED 執行成功。
    執行Node-RED

在瀏覽器輸入「http://127.0.0.1:1880/」,就可以看到 Node-RED 的編輯環境。
Node-RED環境