bluemix node-red part i
TRANSCRIPT
![Page 1: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/1.jpg)
© 2016 IBM Corporation
使用 IBM Bluemix Node-RED 打造智慧物聯網應用 (Part I)
Joseph Chang
Cloud Architect - Bluemix
IBM Cloud, Taiwan
Take me to BluemixClick Here
新增用 Node-RED 撰寫 Websocket 網頁範例
![Page 2: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/2.jpg)
© 2016 IBM Corporation
PaaS 平台對IT 的改變 , 不只是建立 AP 環境變快了更巨大的影響在AP 與AP 間的連結 也變得容易了 .
2
![Page 3: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/3.jpg)
© 2016 IBM Corporation
讓 Internet 上的電子設備 , 資料庫 , 分析軟體 , API, 網頁 相互對話
3
IOT Gateway(Control)
IOT Gateway(Sensor)
Open Data
Enterprise System
visual wiring tool for the Internet of Things
other tools for interconnect
![Page 4: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/4.jpg)
© 2016 IBM Corporation4
第一章 入門篇 -- 溫度感測與通知第二章 排程器與網頁爬蟲第三章 用 Node-RED 寫 HTML , Websocket
及組合 REST API
使用 IBM Bluemix Node-RED 打造智慧物聯網應用 (Part I)
![Page 5: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/5.jpg)
© 2016 IBM Corporation5
第四章 在 Node-RED 中撰寫 Javascript 程式第五章 擴充 Node-RED 工具盒第六章 元件型態 DIY
使用 IBM Bluemix Node-RED 打造智慧物聯網應用 (Part II)
第七章 資料儲存第八章 dashDB-R 與機器學習 第九章 Watson 感知元件
使用 IBM Bluemix Node-RED 打造智慧物聯網應用 (Part III)
第十章 啟用安全設定第十一章 MQTT & IBM IOT
第十二章 用 Node-RED 做為行動後台
使用 IBM Bluemix Node-RED 打造智慧物聯網應用 (Part IV)
![Page 6: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/6.jpg)
© 2016 IBM Corporation6
-- Sensor -- MQTT Broker -- Notification
第一章 入門篇 -- 溫度感測與通知
![Page 7: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/7.jpg)
© 2016 IBM Corporation
溫度感應與通知 Node-RED Diagram
7
![Page 8: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/8.jpg)
© 2016 IBM Corporation
建置步驟 :
在 Chrome 或 Firefox 中開啟 https://console.ng.bluemix.net/catalog/
點選樣板中的 Internet of Things 圖示 , 以建立服務
8
當服務建立完成 , 點選畫面中的連結 , 以開啟 Node-RED
![Page 9: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/9.jpg)
© 2016 IBM Corporation
建置步驟 :
進入網站首頁後 , 點選 “Go to your Node-RED flow editor”
.
9
進入 Node-RED 編輯器 , 可看到預建的溫度感測流程範本
.
![Page 10: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/10.jpg)
© 2016 IBM Corporation
建置步驟 :
接下來我們要配置模擬溫度感測器 , 請開啟以下網址 :
http://quickstart.internetofthings.ibmcloud.com/iotsensor
10
開啟後 , 點選 Mac Address 以開啟 Device DashBorad
記下 Mac Address 等會在 Node-RED Editor 中會用到
![Page 11: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/11.jpg)
© 2016 IBM Corporation
建置步驟 :
回到 Node-RED flow editor, Double-Click on “IBM Iot App in” 節點 , 系統跳出設定視窗.
11
填入前頁取得的Mac Address, 然後點選 “ OK”
![Page 12: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/12.jpg)
© 2016 IBM Corporation
建置步驟 :
12
此時因為內容有改變 , 右上角的 Deploy 鈕變成Active 狀態 , 請按下” Deploy 讓變更生效” .
![Page 13: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/13.jpg)
© 2016 IBM Corporation
建置步驟 :
13
點選 debug 可看到視窗中 , 感測器不斷傳入新的訊息
![Page 14: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/14.jpg)
© 2016 IBM Corporation
節點說明 (function node):
14
msg.payload( 內容如下 ) 流進此節點 ,取其中的 d:{temp:15} 回傳
function node 可以用來撰寫 javascript 程式
將 text 重新轉成payload 型式再回傳 .
![Page 15: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/15.jpg)
© 2016 IBM Corporation
節點說明 :
15
將前頁傳入的payload ( 值 =15) 送入做比較 . 決定要走那個 flow
switch node 可以用來設定判斷條件 , 依決果決定資料流動的路線
![Page 16: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/16.jpg)
© 2016 IBM Corporation
節點說明 :
16
將前頁傳入的payload ( 值 =15) 帶入範本 , 產出新的內容 ( Temperature (15) within safe limits)
template node 可以快速組合範本及變數 , 產生輸出內容
![Page 17: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/17.jpg)
© 2016 IBM Corporation
玩個小把戲– 當溫度超過臨界值時自動發送簡訊 :
17
1. 在 T wilio 網站註冊個 帳號https://www.twilio.com/try-twilio Twilio 提供免費試用帳號 , 註冊時需提供手機號碼 . 測試期間發信到註冊的手機號碼時免費的
![Page 18: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/18.jpg)
© 2016 IBM Corporation
當溫度超過臨界值時自動發送簡訊 :
18
2. 取得電話號碼及 SID , AUTH TOKEN3. 檢查 Messing 受信國家的權限是否開啟
Twilio 配發的手機號碼
記下 Account ID 和Auth Token
![Page 19: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/19.jpg)
© 2016 IBM Corporation
當溫度超過臨界值時自動發送簡訊 -- 加入 Twilio 節點 :
19
填入自己的手機號碼
填入 Twilio 發的電話號碼與 SID,Token
![Page 20: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/20.jpg)
© 2016 IBM Corporation
檢視手機是否收到簡訊
20
將模擬器溫度調到41 以上
你成功了嗎 ?
![Page 21: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/21.jpg)
© 2016 IBM Corporation
第一章 結束
21
![Page 22: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/22.jpg)
© 2016 IBM Corporation
第二章 排程器與網頁爬蟲
22
-- Injection & Timer-- parse HTML
![Page 23: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/23.jpg)
© 2016 IBM Corporation23
網頁爬蟲 Node-RED Diagram
如果我想透過雲端程式 , 每天幫我過濾 CNN 財經新聞 , 遇到關鍵新聞通知我 , 有可能嗎 ?
![Page 24: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/24.jpg)
© 2016 IBM Corporation24
網頁爬蟲 Node-RED Diagram
透過 Node-RED 分析網頁內容很簡單
![Page 25: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/25.jpg)
© 2016 IBM Corporation
節點說明 :
25
設定爬蟲發動的週期
Inject node 可以設定排程 , 發動事件
![Page 26: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/26.jpg)
© 2016 IBM Corporation
節點說明 :
26
在此我們用 cnn 財經網為範例
http request node 可以執行開啟網頁的動作 , 如同 curl
Yes, 如果是 UTF-8 編碼就可以 , 你可以用http://news.yahoo.com.tw 試試看
可以爬中文網站嗎 ?
![Page 27: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/27.jpg)
© 2016 IBM Corporation
節點說明 :
27
先觀察網頁原始碼 , 找到想擷取的 tag
html node 可以用來擷取 html 網頁中 , 某個指定的 tag 內容 , 輸出的部份可以把每個tag 拆成不同的 package.
![Page 28: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/28.jpg)
© 2016 IBM Corporation
節點說明 :
28
填入要抓取的 tag 名稱 , 在此我們想要分析 <article>
撰則multiple messages, 較容易分析
![Page 29: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/29.jpg)
© 2016 IBM Corporation
節點說明 :
29
Edit switch 我們在第一章介紹過 , 在此我們用 contains 設定過濾條件
如果要設更多keyword 可考慮使用 matches regex
![Page 30: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/30.jpg)
© 2016 IBM Corporation
節點說明 :
30
帶有 keyword 的新聞會導入 News Template. 再透過twillio 傳送到我的手機 , 通知我看新聞
![Page 31: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/31.jpg)
© 2016 IBM Corporation
第二章 結束
31
![Page 32: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/32.jpg)
© 2016 IBM Corporation32
-- Simple Web Page-- REST API-- Websocket
第三章 用 Node-RED 寫 HTML, WebSocket及組合 REST API
![Page 33: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/33.jpg)
© 2016 IBM Corporation
Simple Web Page
33
![Page 34: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/34.jpg)
© 2016 IBM Corporation
簡單網頁 -- Node-RED
34
![Page 35: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/35.jpg)
© 2016 IBM Corporation
節點說明 :
35
Ex. Node-RED 網站為http://iot-demo101.mybluemix.net/
存取網址為 :http://iot-demo101.mybluemix.net/hello
如要傳入參數 :http://iot-demo101.mybluemix.net/hello?id=jojo
http in node 的使用很簡單 , 只要給定 URL, 就可以從 http://<node-server>/<url> 存取此網頁
![Page 36: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/36.jpg)
© 2016 IBM Corporation
節點說明 :
36
要讀取輸入參數請用msg.req.query.<parameter>
Ex. http://iot-demo101.mybluemix.net/hello?id=jojomsg.req.query.id 傳回值是 jojo
Function node 在此可以接收輸入參數 , 撰寫業務邏輯 , 將輸出參數傳給下一個節點
要建立輸出參數請用msg.payload.<variable>
![Page 37: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/37.jpg)
© 2016 IBM Corporation
節點說明 :
37
讀取前節點傳入的參數
Template node 可以用來定義 HTML 網頁的格式 , 內容可插入前節點傳進的參數
![Page 38: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/38.jpg)
© 2016 IBM Corporation
節點說明 :
38
Http response node 必須與 http in 節點搭配使用
在此沒有特別的參數需要填寫 , 但是傳出的內容會帶有 :payload : 文件的 BodystatusCode : 預設值 200headers: 文件的 Header
所以最終看到的內容就是
![Page 39: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/39.jpg)
© 2016 IBM Corporation
Call REST API
39
![Page 40: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/40.jpg)
© 2016 IBM Corporation
Call REST API in Node-RED
40
Node-RED 亦可很容易的用來 call 任何的REST API, 包括 open data 的 API, 在此我們用 Yahoo Finance API 查詢台積電股價為例
![Page 41: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/41.jpg)
© 2016 IBM Corporation
節點說明 :
41
在 http request 的 url 參數中可以讀取由前節點傳入的變數
我們在此設定一個msg.stock_id 變數 , 它將在接下來的 http request 節點的 url 中 , 以{{stock_id}} 的格式被取用 .
![Page 42: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/42.jpg)
© 2016 IBM Corporation
節點說明 :
42
在 http request 節點 , 可呼叫 REST API
在此我們以 Yahoo Finance API 為例 , 查詢 台灣股票價格
回傳內容為 JSON 格式 , 我們可以在 node-RED 中很容易的用程式做進階處理
![Page 43: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/43.jpg)
© 2016 IBM Corporation
在 Bluemix 中的 Runtime 都可以成為 REST API provider,透過 Node-RED http request 元件彼此就可以輕鬆溝通
43
![Page 44: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/44.jpg)
© 2016 IBM Corporation
Websocket
44
![Page 45: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/45.jpg)
© 2016 IBM Corporation
Websocket 網頁
45
每 5 秒時間自動更新
![Page 46: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/46.jpg)
© 2016 IBM Corporation
匯入程式碼
46
請利用 Node-RED 的 Import 功能 將下一 頁的內容貼到 Clipboard, 以完成匯入工作
![Page 47: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/47.jpg)
© 2016 IBM Corporation
匯入程式碼 – Websocket Sample
[{"id":"90b29f2a.2acff","type":"inject","z":"55fcf298.0cc50c","name":"Tick every 5 secs","topic":"test","payload":"","payloadType":"date","repeat":"5","crontab":"","once":false,"x":181,"y":270,"wires":[["6e1c0c9b.d96554"]]},{"id":"9ee75a8e.3fc23","type":"websocket out","z":"55fcf298.0cc50c","name":"","server":"10c785bd.09c96a","client":"","x":702,"y":250,"wires":[]},{"id":"3754bfea.ee9c38","type":"http response","z":"55fcf298.0cc50c","name":"","x":680,"y":147,"wires":[]},{"id":"e080cd3b.52c388","type":"http in","z":"55fcf298.0cc50c","name":"","url":"/simple","method":"get","swaggerDoc":"","x":186,"y":147,"wires":[["f36b1a3d.55ce3"]]},{"id":"f36b1a3d.55ce3","type":"template","z":"55fcf298.0cc50c","name":"Simple Web Page","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE HTML>\n<html>\n <head>\n <title>Simple Live Display</title>\n <script type=\"text/javascript\">\n var ws;\n var wsUri = \"ws:\";\n var loc = window.location;\n console.log(loc);\n if (loc.protocol === \"https:\") { wsUri = \"wss:\"; }\n // This needs to point to the web socket in the Node-RED flow\n // ... in this case it's ws/simple\n wsUri += \"//\" + loc.host + loc.pathname.replace(\"simple\",\"ws/simple\");\n\n function wsConnect() {\n console.log(\"connect\",wsUri);\n ws = new WebSocket(wsUri);\n //var line = \"\"; // either uncomment this for a building list of messages\n ws.onmessage = function(msg) {\n var line = \"\"; // or uncomment this to overwrite the existing message\n // parse the incoming message as a JSON object\n var data = msg.data;\n //console.log(data);\n // build the output from the topic and payload parts of the object\n line += \"<p>\"+data+\"</p>\";\n // replace the messages div with the new \"line\"\n document.getElementById('messages').innerHTML = line;\n //ws.send(JSON.stringify({data:data}));\n }\n ws.onopen = function() {\n // update the status div with the connection status\n document.getElementById('status').innerHTML = \"connected\";\n //ws.send(\"Open for data\");\n console.log(\"connected\");\n }\n ws.onclose = function() {\n // update the status div with the connection status\n document.getElementById('status').innerHTML = \"not connected\";\n // in case of lost connection tries to reconnect every 3 secs\n setTimeout(wsConnect,3000);\n }\n }\n \n function doit(m) {\n if (ws) { ws.send(m); }\n }\n </script>\n </head>\n <body onload=\"wsConnect();\" onunload=\"ws.disconnect();\">\n <font face=\"Arial\">\n <h1>Simple Live Display</h1>\n <div id=\"messages\"></div>\n <button type=\"button\" onclick='doit(\"click\");'>Click to send message</button>\n <hr/>\n <div id=\"status\">unknown</div>\n </font>\n </body>\n</html>\n","x":462,"y":146,"wires":[["3754bfea.ee9c38"]]},{"id":"6e1c0c9b.d96554","type":"function","z":"55fcf298.0cc50c","name":"format time nicely","func":"msg.payload = Date(msg.payload).toString();\nreturn msg;","outputs":1,"noerr":0,"x":443,"y":247,"wires":[["9ee75a8e.3fc23"]]},{"id":"5dd67905.c96da","type":"websocket in","z":"55fcf298.0cc50c","name":"","server":"10c785bd.09c96a","client":"","x":432,"y":369,"wires":[["a2da50ee.cab7e8"]]},{"id":"a2da50ee.cab7e8","type":"debug","z":"55fcf298.0cc50c","name":"","active":true,"console":"false","complete":"false","x":648,"y":364,"wires":[]},{"id":"10c785bd.09c96a","type":"websocket-listener","z":"55fcf298.0cc50c","path":"/ws/simple","wholemsg":"false"}]
47
![Page 48: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/48.jpg)
© 2016 IBM Corporation
節點說明 :
48
建立一個名為simple 的頁面
![Page 49: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/49.jpg)
© 2016 IBM Corporation
節點說明 :
49
Websocket 網頁程式
接收來自 wss://<host>/ws/simple 的訊息
![Page 50: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/50.jpg)
© 2016 IBM Corporation
節點說明 :
50
當收到 Websocket 資料時 , 會 trigger ws.onmessage 動 作
我們要更新網頁中名為” message” 的 <div>
![Page 51: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/51.jpg)
© 2016 IBM Corporation
節點說明 :
51
畫面開啟時 , 即啟動 “聽取” webscoket 資料
當 ws.onmessage 收到資料時 , 會更新 此 <div> 的內容
![Page 52: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/52.jpg)
© 2016 IBM Corporation
節點說明 :
52
不需填資料
![Page 53: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/53.jpg)
© 2016 IBM Corporation
節點說明 :
53
每隔 5 秒送出一個 timestamp 字串
![Page 54: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/54.jpg)
© 2016 IBM Corporation
節點說明 :
54
格式化時間字串
![Page 55: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/55.jpg)
© 2016 IBM Corporation
節點說明 :
55
設定 Websocket 的服務路徑
發送 Websocket
![Page 56: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/56.jpg)
© 2016 IBM Corporation
節點說明 :
56
接收由網頁 click button 時發出的Websocket
![Page 57: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/57.jpg)
© 2016 IBM Corporation
Exercise:
57
動手練習一下 , 改用 Websocket 網頁技術顯示即時溫度
![Page 58: Bluemix Node-Red Part I](https://reader033.vdocuments.us/reader033/viewer/2022061504/5872a0081a28ab07208b5843/html5/thumbnails/58.jpg)
© 2016 IBM Corporation
第三章 結束
58