Node-RED學習心得(操作篇)

架構圖

核心知識點

基本功能

本篇會介紹6項常用的子模塊,並適時使用案例來介紹它們的功能以及再使用上的一些細節

inject

共通模塊最常用到的子模塊之一,作為輸入用途,可以自行選擇payload類型

inject模塊

創立inject節點時點擊模塊可以進入設定,選單中主要分為5個要素:

  1. 模塊名稱
    • 為inject設定名稱
  2. 物件屬性
    • 預設為payload
    • 可以自行添加屬性
  3. 物件屬性資料類型
    • 指定屬性類型,包含常見的字串、數字、布林、json等
  4. 主題
    • 指定topic名
  5. 選擇輸入機制
    • 手動輸入模式
    • 循環輸入模式
    • 指定時間輸入模式
inject模塊設定

debug

輸出模塊,用來將輸入結果顯示在指定視窗上(通常是除錯視窗),點擊可以進入設定選單

debug模塊

設定選單主要包含:

debug模塊設定
  1. 輸出屬性
    • 預設payload
    • 亦可指定已存在的屬性
  2. 選擇輸出窗口
    • 選擇輸出視窗
  3. 模塊名稱
    • debug模塊名稱

function

使用javascript編寫的函式模塊,可以提供使用者自定義的功能,我們可以對傳入的物件屬性進行處理,透過返回msg物件,後續的模塊可以得到加工後的結果

function模塊

例如我編寫一個用來判斷result值是否為真的模塊,如果成立便新增一個新的屬性note,並給予它一個值

if(msg.payload.result == true){
    msg.payload.note = "test"
}
return msg;

或者編寫一個判斷屬性長度的模塊

var new_msg = {payload:msg.payload.length}
msg.payload = new_msg
return msg;

一樣點擊function模塊進入設定,在函數欄位編寫自定義的程式碼就可以了

編寫function模塊

change

改變物件屬性類型,可以進行增、刪、修改、轉移等操作

change模塊

點擊模塊後可以進入設定選單,change模塊的重點在操作指令

change模塊設定
  1. 模塊名稱
  • change模塊名稱
  1. 操作指令
    • 設定
      • 將屬性設定為指定值
      • 也可以用來新增一個屬性,並給值
    • 修改
      • 搜尋特定值然後取代
    • 刪除
      • 刪除物件中指定屬性
    • 轉移
      • 將物件中的屬性值轉移到另一個屬性上
  2. 物件屬性
    • 跟上面介紹得差不多,用來指定屬性,預設是payload

switch

這是一個很有趣的模塊,它類似程式中的switch語句,可以用來當作流程控制

switch(msg.payload){
        case 1:
        /*do something*/
        break;

        case 2:
        /*do something*/
        break;

        ...
}
switch模塊

選單中4個重點,分別對應switch的功能

switch模塊設定
  1. 屬性
    • switch(var)
    • 屬性欄位相當於設定var
  2. 判斷類型
    • 相當於條件判斷子
  3. 判斷值指定值
    • 依照不同判斷子填入的參數
    • case x:
    • 相當於x的功用

其實不只常見的判斷子,Node-RED提供非常多的判斷模式供使用者使用,這些就留給大家慢慢摸索

switch模塊判斷子選擇

template

template模塊可以提供使用者自定HTML模板

switch模塊設定

模板內可以輸入指定的HTML格式,舉個例子來看看這個模塊的功用,把以下html程式碼寫進template模塊內

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello~</title>
    </head>
    <body>
            <h2>This is Node-RED<h2>
    </body>
</html>

在側邊攔欄位找到httpin模塊,拖曳進來並起雙擊設定

  1. 請求方法
    • 選擇http協議的GET method
    • URL可以自訂,這裡設定絕對路徑/hello
    • 名稱表示模塊名,可有可無
httpin模塊設定

在側邊欄位找到將http response模塊,拖曳進來並將template尾部連上它。完成後應該會如下圖所示

連接模塊

最後然後按下deploy鍵,在網址欄為輸入url 127.0.0.1:1880/hello就可以看到我們設定的html內容

網頁顯示

實際案例練習

實現目標:

  1. 輸入一串json字串,將該字串轉換成json物件,例如
{"id":"device0","result":true}
{"id":"device1","result":false}
  1. 若判斷result為true,則新增一個屬性note,並且定義它的內容為test字串,並輸出json物件
  2. 若判斷result為false,則原封不動輸出json物件

方法一: 利用function

方法一
  1. 首先加入兩個inject模塊,payload類型均設定為字串,字串格請參考上面json案例
  2. 在解析欄位選擇json模塊,雙擊並設定操作欄位為JSON字串與物件互轉
  3. 選擇function模塊,然後輸入以下程式碼
if(msg.payload.result == true){
    msg.payload.note = "test"
}
return msg;
  1. 拉取debug模塊,並且把上述模塊都連接起來

方法二: 利用change與switch

方法二
  1. 首先加入兩個inject模塊,payload類型均設定為字串,字串格請參考上面json案例
  2. 在解析欄位選擇json模塊,雙擊並設定操作欄位為JSON字串與物件互轉
  3. 選擇switch模塊,設定payload.result的判斷式
設定判斷式

4. 若result為真,則從輸出端口一輸出,並且連接上change模塊,利用設定操作把payload.note設定成字串"test"

設定change模塊

5. 拉取debug模塊,並且把上述模塊都連接起來

輸出結果

手動注入inject模塊,經過測試可以發現右側除錯式窗成功打印我們要的結果,兩種方法接測試正確

輸出結果

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

%d 位部落客按了讚: