[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] dashboard儀表板

  1. 安裝dashboard。
    安裝dashboard01
  2. 切換到「安裝」的頁面,再輸入「dashboard」查詢,找到「node-red-dashboard」後,點擊「安裝」。
    安裝dashboard02
  3. 點擊安裝後,會出現下圖,繼續點擊「安裝」。(如果有興趣也可以點擊「打開節點資訊」,來看要安裝的節點資訊)
    安裝dashboard03
  4. 安裝完畢後,剛剛安裝的前顯示「安裝」的文字,就被改成「已安裝」,然後點擊「關閉」來關閉節點管理的視窗
    安裝dashboard04
  5. 安裝完節點後,就可以在左邊的節點清單找到剛剛安裝的「dashboard」。
    安裝dashboard05
  6. 測試 dashboard,在左邊的節點清單找到「共通」下的「inject」,並將這個節點拖曳到流程畫面中,如下圖:
    dashboard01
  7. 在「時間戳」節點上,連續點擊滑鼠左鍵二下,設定該節點屬性如下圖:
    dashboard02
  8. 在左邊的節點清單找到「功能」下的「function」,並將這個節點拖曳到流程畫面中,如下圖:
    dashboard03
  9. 在「函數」節點上,連續點擊滑鼠左鍵二下,設定該節點屬性如下圖:
    步驟3的函數內容:
    msg.payload = Math.random();
    return msg;
    dashboard04
  10. 在左邊的節點清單找到「dashboard」下的「chart」,並將這個節點拖曳到流程畫面中,如下圖:
    dashboard05
  11. 在「chart」節點上,連續點擊滑鼠左鍵二下,設定該節點屬性如下圖:
    dashboard06
    步驟1的設定內容如下圖:
    dashboard07
  12. 以上設定完成後,將所有節點連接起來。
    dashboard08
  13. 最後,部署流程。
    dashboard09
  14. 部署成功後,開啟瀏覽器,輸入網址「http://127.0.0.1:1880/ui/」,即可看到每秒產生一個亂數的折線圖。
    dashboard10
  15. 如果要使用儀表板,其設定跟折線圖一樣,設定後再重新部署。
    dashboard11
  16. 回到瀏覽器,可以看到折線圖及儀表板。
    dashboard12

[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環境