一、目录
1. 实验目的
- 掌握 node-red 的 http 协议节点的使用
2. 实验内容
2.1 使用 http responds 节点响应请求
-
按下图搭建节点
- http in 节点中，设置 get 请求的内容为/hello
- template 节点中，设置为如下网页的内容
<html>
<head></head>
<body>
<h1>Hello {{req.query.name}}!</h1>
</body>
</html>
- 部署后，在网址http://127.0.0.1:1880/hello 你能看到什么?
- 尝试给 http 请求添加一个参数，你能看到什么？
http://127.0.0.1:1880/hello?name=Linus
- 实验说明：
– http in 与 http responds 节点成对出现，中间不能断联
– http responds 节点使用 payload 属性的内容作为响应的 body
– template 节点将网页内容嵌入到 flow 里
– 当有额外的参数请求，可使用 {{req.query. 参数名}} 获取该参数的值
– msg.req.query 属性是一个键值对对象，可以保存多组参数
– 多组参数，可使用 & 号隔开，比如，如下的请求:
/hello?name=Nick&colour=blue
相当于
{
"name": "Nick",
"colour": "blue"
}
– 当存在多个同名参数，请求表现为数组，如以下请求：
相当于：
{
"colour": [ "blue ","red" ]
}
2.2 http 节点控制路径参数
有一些情况下，http 的请求使用 / 来区分参数，如以下请求：
http://example.com/hello-param/Nick
http://example.com/hello-param/Dave
• 此时，可以使用 msg.req.params 属性范围具体的参数，实验步骤如下：
• 按下图建立流
image.png
http in 节点属性编辑如下：
image.png
• template 节点编辑如下
image.png
访问如下路径，查看效果
http://localhost:1880/hello−param/jacklisp
http://localhost:1880/hello-param/:name
2.3 数据更新接入 http 流
- 在物联网中间件系统中，从设备节点获取相关数据后，可将最新的数据存入 flow 流，并在 http responds 节点展示最新的数据
-
按下图建立流：
-change 节点可以将数据赋值到你想设置的信息载体或变量、或不同的存储区域中，这里我们将时间戳保存到 flow 区
-
第二个 change 节点 Copy time 将数值从 flow 拷贝到 payload
-
template 节点建立展示的页面和需要调用的参数
- 查看页面是否能够显示最新的时间戳
2.3 数据更新接入 http 流
- 在 Lab08 的实验中，你已经学会了如何通过串口节点获取协调器传递过来的数据，请你利用本次实验学习到的知识，将传感器的数据实时保存到流中，并自建一个展示模板，通过 http 请求模式在浏览器端显示出感知层的实时温度和湿度数据。
3. 实现1 使用 http responds 节点响应请求
1.使用 http responds 节点响应请求， 按下图搭建节点
2.http in 节点中，设置 get 请求的内容为/hello
3.template 节点中，设置为如下网页的内容
<html>
<head></head>
<body>
<h1>Hello {{req.query.name}}!</h1>
</body>
</html>
4. 部署后，在网址http://127.0.0.1:1880/hello ，查看效果
5. 尝试给 http 请求添加一个参数后，查看效果
http://127.0.0.1:1880/hello?name=Linus
4. 实现2 http 节点控制路径参数
1.http 节点控制路径参数， 按下图搭建节点
2. http in 节点属性编辑如下：
/hello-param/:name
3.template 节点编辑如下
<html>
<head></head>
<body>
<h1>Hel1o {{req.params.name}}!</h1>
<h2>this is respondsed page</h2>
</body>
</html >
4.部署后，访问如下路径，查看效果
http://localhost:1880/hello-param/:name
4. 实现3 数据更新接入 http 流
1.按下图建立流：
第一个节点流
设置第一个节点流的参数
timestamp
payload
第二个节点流
设置第二个节点流的参数
/hello-data
timestamp
template 节点建立展示的页面和需要调用的参数
<html>
<head></head>
<body>
<h1>Time: {{ timestamp }}</h1>
</body>
</html>
进入下面连接，查看页面是否能够显示最新的时间戳
http://localhost:1880/hello-data
全部代码
[
{
"id": "4b1d38f7928dfe08",
"type": "tab",
"label": "流程 6",
"disabled": false,
"info": "",
"env": []
},
{
"id": "91c2a422484233af",
"type": "http in",
"z": "4b1d38f7928dfe08",
"name": "",
"url": "/hello",
"method": "get",
"upload": false,
"swaggerDoc": "",
"x": 100,
"y": 120,
"wires": [
[
"85d3e9867b9bfb63"
]
]
},
{
"id": "4d373df9b1e5fa1a",
"type": "http response",
"z": "4b1d38f7928dfe08",
"name": "",
"statusCode": "",
"headers": {},
"x": 90,
"y": 300,
"wires": []
},
{
"id": "85d3e9867b9bfb63",
"type": "template",
"z": "4b1d38f7928dfe08",
"name": "",
"field": "payload",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "<html>\n <head></head>\n <body>\n <h1>Hello {{req.query.name}}!</h1>\n </body>\n</html>\n",
"output": "str",
"x": 110,
"y": 220,
"wires": [
[
"4d373df9b1e5fa1a"
]
]
},
{
"id": "eedb5e2ddc33f1a1",
"type": "http in",
"z": "4b1d38f7928dfe08",
"name": "",
"url": "/hello-param/:name",
"method": "get",
"upload": false,
"swaggerDoc": "",
"x": 170,
"y": 420,
"wires": [
[
"c7ef102bb81de58e"
]
]
},
{
"id": "c7ef102bb81de58e",
"type": "template",
"z": "4b1d38f7928dfe08",
"name": "",
"field": "payload",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "<html>\n<head></head>\n <body>\n <h1>Hel1o {{req.params.name}}!</h1>\n <h2>this is respondsed page</h2>\n </body>\n</html >\n",
"output": "str",
"x": 110,
"y": 500,
"wires": [
[
"b4c67de7edd01508"
]
]
},
{
"id": "b4c67de7edd01508",
"type": "http response",
"z": "4b1d38f7928dfe08",
"name": "",
"statusCode": "",
"headers": {},
"x": 110,
"y": 560,
"wires": []
},
{
"id": "483e9a01d1e18fa6",
"type": "inject",
"z": "4b1d38f7928dfe08",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 110,
"y": 740,
"wires": [
[
"818decca69abf970"
]
]
},
{
"id": "818decca69abf970",
"type": "change",
"z": "4b1d38f7928dfe08",
"name": "",
"rules": [
{
"t": "set",
"p": "timestamp",
"pt": "flow",
"to": "payload",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 340,
"y": 740,
"wires": [
[]
]
},
{
"id": "bfe3fbb106dae299",
"type": "http in",
"z": "4b1d38f7928dfe08",
"name": "",
"url": "/hello-data",
"method": "get",
"upload": false,
"swaggerDoc": "",
"x": 160,
"y": 920,
"wires": [
[
"dfbf90a2a8573cb9"
]
]
},
{
"id": "dfbf90a2a8573cb9",
"type": "change",
"z": "4b1d38f7928dfe08",
"name": "",
"rules": [
{
"t": "set",
"p": "timestamp",
"pt": "msg",
"to": "timestamp",
"tot": "flow"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 180,
"y": 1000,
"wires": [
[
"7ea851cd909c4ab2"
]
]
},
{
"id": "7ea851cd909c4ab2",
"type": "template",
"z": "4b1d38f7928dfe08",
"name": "",
"field": "payload",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "<html>\n <head></head>\n <body>\n <h1>Time: {{ timestamp }}</h1>\n </body>\n</html>\n",
"output": "str",
"x": 170,
"y": 1080,
"wires": [
[
"573660b43f185122"
]
]
},
{
"id": "573660b43f185122",
"type": "http response",
"z": "4b1d38f7928dfe08",
"name": "",
"statusCode": "",
"headers": {},
"x": 130,
"y": 1160,
"wires": []
}
]
