Add more http flows

Author: knolleary

_includes/docs-toc.html

@@ -1,8 +1,20 @@
 <ul class="toc">
+    <li class="toc-expander"><div>V</div></li>
     <li class="tocheader"><span>Cookbook</span>
         <ul>
-            <li {% if page.url == "/index.html" %}class="active"{% endif %}><a href="/">Overview</a>
+            <li {% if page.url == "/" %}class="active"{% endif %}><a href="/">Overview</a>
             <li {% if page.url contains "/http/" %}class="active"{% endif %}><a href="/http/">HTTP</a>
         </ul>
     </li>
 </ul>
+<script>
+$(function() {
+    $(".toc-expander").click(function() {
+        if ($("ul.toc").hasClass('open')) {
+            $("ul.toc").removeClass('open');
+        } else {
+            $("ul.toc").addClass('open');
+        }
+    })
+});
+</script>

_layouts/default.html

@@ -18,6 +18,14 @@
     color: #555;
     white-space:nowrap;
 }
+.feedback {
+    float: right;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    padding: 3px 8px;
+    margin: 20px 0;
+    font-size: 12px;
+}
 </style>
 <div class="docs">
   <div class="grid">
@@ -28,6 +36,7 @@
       <div class="docs-content">
         <h1 class="docs-title">{{ page.title }}</h1>
         {{ content }}
+        <div class="feedback"><a href="https://github.com/node-red/cookbook.nodered.org/issues/new?title=Feedback%20on%20'{{page.title| xml_escape}}'">Got feedback about this page?  Let us know!</a></div>
       </div>
     </div>
   </div>

http/access-http-request-headers.md

@@ -9,7 +9,7 @@ You want to access the HTTP headers sent in a request.
 
 ### Solution
 
-Use the `req.headers` property of the message sent by the <code class="node">HTTP In</code>
+Use the `msg.req.headers` property of the message sent by the <code class="node">HTTP In</code>
 node to access the headers.
 
 #### Example
@@ -34,5 +34,5 @@ node to access the headers.
 
 ### Discussion
 
-The `msg.headers` property is an object of key/value pairs for each request header.
+The `msg.req.headers` property is an object of key/value pairs for each request header.
 The header names are all lower-cased regardless of how they appear in the request.

http/handle-query-parameters.md

@@ -11,7 +11,7 @@ You want to access the query parameters passed to an HTTP endpoint, such as:
 
 ### Solution
 
-Use the `req.query` property of the message sent by the <code class="node">HTTP In</code>
+Use the `msg.req.query` property of the message sent by the <code class="node">HTTP In</code>
 node to access the parameters.
 
 #### Example
@@ -36,7 +36,7 @@ node to access the parameters.
 
 ### Discussion
 
-The `req.query` property is an object of key/value pairs for each query parameter.
+The `msg.req.query` property is an object of key/value pairs for each query parameter.
 
 In the above example, a request to `/hello-query?name=Nick&colour=blue` results in the property
 containing:

http/handle-url-parameters.md

@@ -18,7 +18,7 @@ For example, a single endpoint that can handle requests to both:
 
 Use named path parameters in your <code class="node">HTTP In</code> node's `URL`
 property and then access the specific value provided in a request using the
-`req.params` property of the message.
+`msg.req.params` property of the message.
 
 #### Flow
 
@@ -49,7 +49,7 @@ path that can vary between requests.
 The `msg.req.params` property is an object of key/value pairs for each path parameter.
 
 In the above example, the node is configured with a URL of `/hello-params/:name`,
-so a request to `/hello-param/Nick` results in the message property containing:
+so a request to `/hello-param/Nick` results in the `msg.req.params` property containing:
 
 ~~~json
 {

http/index.md

@@ -10,8 +10,9 @@ title: HTTP Recipes
 - [Include data captured in another flow](include-data-from-another-flow.html)
 - [Serve JSON content](serve-json-content.html)
 - [Serve a local file](serve-a-local-file.html)
-- Post form/JSON data
-- Post raw data
+- [Post raw data to a flow](post-raw-data-to-a-flow.html)
+- [Post form data to a flow](post-form-data-to-a-flow.html)
+- [Post JSON data to a flow](post-json-data-to-a-flow.html)
 - Work with cookies
 - Simple GET request
 - Set the url of a request

http/post-form-data-to-a-flow.md

@@ -0,0 +1,68 @@
+---
+layout: default
+title: Post form data to a flow
+---
+
+### Problem
+
+You want to post form data to a flow.
+
+### Solution
+
+Use the <code class="node">HTTP In</code> node to listen for POST requests that
+have their `Content-Type` set to `application/x-www-form-urlencoded` and access
+the form data as properties of `msg.payload`.
+
+#### Example
+
+![](/images/http/http-flow-008.png)
+
+~~~json
+[{"id":"5b98a8ac.a46758","type":"http in","z":"3045204d.cfbae","name":"","url":"/hello-form","method":"post","swaggerDoc":"","x":120,"y":820,"wires":[["bba61009.4459f"]]},{"id":"bba61009.4459f","type":"template","z":"3045204d.cfbae","name":"page","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n    <head></head>\n    <body>\n        <h1>Hello {{ payload.name }}!</h1>\n    </body>\n</html>","x":290,"y":820,"wires":[["6ceb930a.93146c"]]},{"id":"6ceb930a.93146c","type":"http response","z":"3045204d.cfbae","name":"","x":430,"y":820,"wires":[]}]
+~~~
+{: .flow}
+
+~~~text
+[~]$ curl -X POST -d "name=Nick" http://localhost:1880/hello-form
+<html>
+    <head></head>
+    <body>
+        <h1>Hello Nick!</h1>
+    </body>
+</html>
+~~~
+{: .shell}
+
+### Discussion
+
+HTML Forms can be used to send data from the browser back to a server. If
+configured to `POST` the data, the browser will encode the data held in the
+`<form>` using a `content-type` of `application/x-www-form-urlencoded`.
+
+For example, when a form that looks like this is submitted:
+
+~~~html
+<form action="http://localhost:1880/hello-form" method="post">
+  <input name="name" value="Nick">
+  <button>Say hello</button>
+</form>
+~~~
+
+it results in the request:
+
+~~~text
+POST / HTTP/1.1
+Host: localhost:1880
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 9
+
+name=Nick
+~~~
+
+When the <code class="node">HTTP In</code> node receives such a request, it
+parses the body of the request and makes the form data available under
+`msg.payload`:
+
+~~~javascript
+var name = msg.payload.name;
+~~~

http/post-json-data-to-a-flow.md

@@ -0,0 +1,44 @@
+---
+layout: default
+title: Post JSON data to a flow
+---
+
+### Problem
+
+You want to post JSON data to a flow.
+
+### Solution
+
+Use the <code class="node">HTTP In</code> node to listen for POST requests that
+have their `Content-Type` set to `application/json` and access the parsed JSON as
+properties of `msg.payload`.
+
+#### Example
+
+![](/images/http/http-flow-008.png)
+
+~~~json
+[{"id":"5b98a8ac.a46758","type":"http in","z":"3045204d.cfbae","name":"","url":"/hello-form","method":"post","swaggerDoc":"","x":120,"y":820,"wires":[["bba61009.4459f"]]},{"id":"bba61009.4459f","type":"template","z":"3045204d.cfbae","name":"page","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n    <head></head>\n    <body>\n        <h1>Hello {{ payload.name }}!</h1>\n    </body>\n</html>","x":290,"y":820,"wires":[["6ceb930a.93146c"]]},{"id":"6ceb930a.93146c","type":"http response","z":"3045204d.cfbae","name":"","x":430,"y":820,"wires":[]}]
+~~~
+{: .flow}
+
+~~~text
+[~]$ curl -X POST -d '{"name":"Nick"}' -H "Content-type: application/json" http://localhost:1880/hello-form
+<html>
+    <head></head>
+    <body>
+        <h1>Hello Nick!</h1>
+    </body>
+</html>
+~~~
+{: .shell}
+
+### Discussion
+
+When the <code class="node">HTTP In</code> node receives a request with the `Content-Type`
+header set to `application/json` it parses the body of the request and makes the data
+available under `msg.payload`:
+
+~~~javascript
+var name = msg.payload.name;
+~~~

http/post-raw-data-to-a-flow.md

@@ -0,0 +1,42 @@
+---
+layout: default
+title: Post raw data to a flow
+---
+
+### Problem
+
+You want to raw text data to a flow.
+
+### Solution
+
+Use the <code class="node">HTTP In</code> node to listen for POST requests that
+have their `Content-Type` set to `text/plain` and access the posted data as `msg.payload`.
+
+#### Example
+
+![](/images/http/http-flow-009.png)
+
+~~~json
+[{"id":"3e1c5107.c1e3ae","type":"http in","z":"3045204d.cfbae","name":"","url":"/hello-raw","method":"post","swaggerDoc":"","x":120,"y":920,"wires":[["cf679478.309868"]]},{"id":"cf679478.309868","type":"template","z":"3045204d.cfbae","name":"page","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n    <head></head>\n    <body>\n        <h1>Hello {{ payload }}!</h1>\n    </body>\n</html>","x":290,"y":920,"wires":[["f3c1a3f0.0c3e6"]]},{"id":"f3c1a3f0.0c3e6","type":"http response","z":"3045204d.cfbae","name":"","x":430,"y":920,"wires":[]}]
+~~~
+{: .flow}
+
+~~~text
+[~]$ curl -X POST -d 'Nick' -H "Content-type: text/plain" http://localhost:1880/hello-raw
+<html>
+    <head></head>
+    <body>
+        <h1>Hello Nick!</h1>
+    </body>
+</html>
+~~~
+{: .shell}
+
+### Discussion
+
+When the <code class="node">HTTP In</code> node receives a request with the `Content-Type`
+header set to `text/plain` it makes the body of the available as `msg.payload`:
+
+~~~javascript
+var name = msg.payload;
+~~~