Creating Flow In Node Red - 2

2016-09-09

上一篇 Creating Flow In Node Red - 1 中，依照範例產生了三個 flow ，接下來試著佈建一個 flow 模擬常見的 http 行為 (requst/response)。

在這個範例中，除了利用既有的 node 建立流程外，也試著依範例自行建立一個 node　把輸入英文字串全改為小寫，方法如下

到 ~/.node-red/nodes 下建立一個資料夾 node-red-node-lowercase

在 node-rede-node-lowercase 下執行 npm init 產生 package.json 檔，內容為

package.json

{
  "name": "node-red-node-lowercase",
  "version": "1.0.0",
  "description": "Node Red node to lower text ",
  "main": "lower-case.js",
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
      "node-red",
      "lowercase"
  ],
  "node-red": {
      "nodes": {
          "lower-case": "lower-case.js"
      }
   },
  "author": "",
  "license": "ISC"
}

其中的 node-red 屬性要自行加入，不加 node-red 不會認得!

建立lower-case.js 及 lower-case.html 兩個案，內容分別如下

lower-case.js

module.exports = function(RED) {
    function LowerCaseNode(config) {
        RED.nodes.createNode(this,config);
        var node = this;
        this.on('input', function(msg) {
            msg.payload = msg.payload.toLowerCase();
            node.send(msg);
        });
    }
    RED.nodes.registerType("lower-case",LowerCaseNode);
}

lower-case.html

<script type="text/javascript">
    RED.nodes.registerType('lower-case',{
        category: 'function',
        color: '#a6bbcf',
        defaults: {
            name: {value:"Lower Case"}
        },
        inputs:1,
        outputs:1,
        icon: "file.png",
        label: function() {
            return this.name||"lower case";
        }
    });
</script>
<script type="text/x-red" data-template-name="lower-case">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>
<script type="text/x-red" data-help-name="lower-case">
    <p>A simple node that converts the message payloads into all lower-case characters</p>
</script>

重開 node-red，然後在左邊 sidebar 的 function 分類中，沒意外的話，就可以在左邊 sidebar 看到自行建立的 lower-case node

接著就可以拉 flow，拉好的的 flow 如下圖。流程進入點是一個 http request (input) node ，它在吃完參數後，一方面把 request 參數丟到 debug node ，另一方面餵給 lower-case node 把英文大寫轉小寫，再以 http response 的方式回傳。

其中 http request node 設定如下，其中 url 參數指定未來接收 request 的http url 路徑 Http request node setting

http request node 接收到的參數會放在 msg.req.query 中，丟給 function node 做一些處理再傳給 lower-case node Function node settings

source code in function node

1
2
3

msg.payload = 'the param passed is :' + msg.req.query.param1;
return msg;

lower-case node 這邊的作用就形同一般程式呼叫外部模組一樣，給定他要的 input （及參數)　，在沒有錯誤的情況下，就會得到你期外的 output ，這邊我們直接導給 http response node (http response node 除了顯示名稱沒，沒有其他需要設定的參數)。

都完成後，按下 deploy 紐，然後打開瀏覽器在網址列輸入 http://127.0.0.1:1880/flow2?param1=AcB ，瀏覽器應該會顯示

the param passed is :acb

打完，收工。只需要寫幾行程式，拉拉流程，就可以有一個收發資料的web server ，日子看起來美好的的，是吧 ?

The Moment

Creating Flow In Node Red - 2

Categories

Tags

Tag Cloud

Archives

Recents