node-red/nodes/core/io/21-httpin.html

<!--
  Copyright JS Foundation and other contributors, http://js.foundation

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<script type="text/x-red" data-template-name="http in">
    <div class="form-row">
        <label for="node-input-method"><i class="fa fa-tasks"></i> <span data-i18n="httpin.label.method"></span></label>
        <select type="text" id="node-input-method" style="width:70%;">
        <option value="get">GET</option>
        <option value="post">POST</option>
        <option value="put">PUT</option>
        <option value="delete">DELETE</option>
        <option value="patch">PATCH</option>
        </select>
    </div>
    <div class="form-row form-row-http-in-upload hide">
        <label>&nbsp;</label>
        <input type="checkbox" id="node-input-upload" style="display: inline-block; width: auto; vertical-align: top;">
        <label for="node-input-upload" style="width: 70%;" data-i18n="httpin.label.upload"></label>
    </div>
    <div class="form-row">
        <label for="node-input-url"><i class="fa fa-globe"></i> <span data-i18n="httpin.label.url"></span></label>
        <input id="node-input-url" type="text" placeholder="/url">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
    </div>
    <div class="form-row row-swagger-doc">
        <label for="node-input-swaggerDoc"><i class="fa fa-file-text-o"></i> <span data-i18n="httpin.label.doc"></span></label>
        <input type="text" id="node-input-swaggerDoc">
    </div>
    <div id="node-input-tip" class="form-tips"><span data-i18n="httpin.tip.in"></span><code><span id="node-input-path"></span></code>.</div>
</script>

<script type="text/x-red" data-help-name="http in">
    <p>Provides an input node for http requests, allowing the creation of simple web services.</p>
    <p>The resulting message has the following properties:
        <ul>
            <li>msg.req : <a href="http://expressjs.com/api.html#req">http request</a></li>
            <li>msg.res : <a href="http://expressjs.com/api.html#res">http response</a></li>
        </ul>
    </p>
    <p>For POST/PUT requests, the body is available under <code>msg.req.body</code>. This
       uses the <a href="http://expressjs.com/api.html#bodyParser">Express bodyParser middleware</a> to parse the content to a JSON object.
    </p>
    <p>
       By default, this expects the body of the request to be url encoded:
       <pre>foo=bar&amp;this=that</pre>
    </p>
    <p>
       To send JSON encoded data to the node, the content-type header of the request must be set to
       <code>application/json</code>.
    </p>
    <p>
       If file uploads are enabled for POST requests, the files will be available under
       <code>msg.req.files</code>.
    <p>
       <b>Note: </b>This node does not send any response to the http request.
       This should be done with a subsequent HTTP Response node.
    </p>

</script>

<script type="text/x-red" data-template-name="http response">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
    </div>
    <div class="form-row">
        <label for="node-input-statusCode"><i class="fa fa-long-arrow-left"></i> <span data-i18n="httpin.label.status"></span></label>
        <input type="text" id="node-input-statusCode" placeholder="msg.statusCode">
    </div>
    <div class="form-row" style="margin-bottom:0;">
        <label><i class="fa fa-list"></i> <span data-i18n="httpin.label.headers"></span></label>
    </div>
    <div class="form-row node-input-headers-container-row">
        <ol id="node-input-headers-container"></ol>
    </div>
    <div class="form-tips"><span data-i18n="[html]httpin.tip.res"></span></div>
</script>

<script type="text/x-red" data-help-name="http response">
    <p>Sends responses back to http requests received from an HTTP Input node.</p>
    <p>The response can be customised using the following message properties:</p>
    <ul>
        <li><code>payload</code> is sent as the body of the response</li>
        <li><code>statusCode</code>, if set, is used as the response status code (default: 200)</li>
        <li><code>headers</code>, if set, should be an object containing field/value
        pairs to be added as response headers.</li>
        <li><code>cookies</code>, if set, can be used to set or delete cookies.
    </ul>
    <p>The <code>statusCode</code> and <code>headers</code> can also be set within
    the node itself. If a property is set within the node, it cannot be overridden
    by the corresponding message property.</p>
    <h3>Cookie handling</h3>
    <p>The <code>cookies</code> property must be an object of name/value pairs.
    The value can be either a string to set the value of the cookie with default
    options, or it can be an object of options.<p>
    <p>The following example sets two cookies - one called <code>name</code> with
    a value of <code>nick</code>, the other called <code>session</code> with a
    value of <code>1234</code> and an expiry set to 15 minutes.</p>
    <pre>
msg.cookies = {
    name: 'nick',
    session: {
        value: '1234',
        maxAge: 900000
    }
}</pre>
    <p>The valid options include:</p>
    <ul>
    <li><code>domain</code> - (String) domain name for the cookie</li>
    <li><code>expires</code> - (Date) expiry date in GMT. If not specified or set to 0, creates a session cookie</li>
    <li><code>maxAge</code> - (String) expiry date as relative to the current time in milliseconds</li>
    <li><code>path</code> - (String) path for the cookie. Defaults to /</li>
    <li><code>value</code> - (String) the value to use for the cookie</li>
    </ul>
    <p>To delete a cookie, set its <code>value</code> to <code>null</code>.</p>

</script>

<script type="text/javascript">
(function() {
    RED.nodes.registerType('http in',{
        category: 'input',
        color:"rgb(231, 231, 174)",
        defaults: {
            name: {value:""},
            url: {value:"",required:true},
            method: {value:"get",required:true},
            upload: {value:false},
            swaggerDoc: {type:"swagger-doc", required:false}
        },
        inputs:0,
        outputs:1,
        icon: "white-globe.png",
        label: function() {
            if (this.name) {
                return this.name;
            } else if (this.url) {
                var root = RED.settings.httpNodeRoot;
                if (root.slice(-1) != "/") {
                    root = root+"/";
                }
                if (this.url.charAt(0) == "/") {
                    root += this.url.slice(1);
                } else {
                    root += this.url;
                }
                return "["+this.method+"] "+root;
            } else {
                return "http";
            }
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        },
        oneditprepare: function() {
            var root = RED.settings.httpNodeRoot;
            if (root.slice(-1) == "/") {
                root = root.slice(0,-1);
            }
            if (root == "") {
                $("#node-input-tip").hide();
            } else {
                $("#node-input-path").html(root);
                $("#node-input-tip").show();
            }
            if(!RED.nodes.getType("swagger-doc")){
                $('.row-swagger-doc').hide();
            }
            $("#node-input-method").change(function() {
                if ($(this).val() === "post") {
                    $(".form-row-http-in-upload").show();
                } else {
                    $(".form-row-http-in-upload").hide();
                }
            }).change();


        }

    });
    var headerTypes = [
        {value:"content-type",label:"Content-Type",hasValue: false},
        {value:"location",label:"Location",hasValue: false},
        {value:"other",label:"other",icon:"red/images/typedInput/az.png"}
       ]
    var contentTypes = [
        {value:"application/json",label:"application/json",hasValue: false},
        {value:"application/xml",label:"application/xml",hasValue: false},
        {value:"text/css",label:"text/css",hasValue: false},
        {value:"text/html",label:"text/html",hasValue: false},
        {value:"text/plain",label:"text/plain",hasValue: false},
        {value:"image/gif",label:"image/gif",hasValue: false},
        {value:"image/png",label:"image/png",hasValue: false},
        {value:"other",label:"other",icon:"red/images/typedInput/az.png"}
    ];

    RED.nodes.registerType('http response',{
        category: 'output',
        color:"rgb(231, 231, 174)",
        defaults: {
            name: {value:""},
            statusCode: {value:"",validate: RED.validators.number(true)},
            headers: {value:{}}
        },
        inputs:1,
        outputs:0,
        align: "right",
        icon: "white-globe.png",
        label: function() {
            return this.name||("http"+(this.statusCode?" ("+this.statusCode+")":""));
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        },
        oneditprepare: function() {
            function resizeRule(rule) {
                var newWidth = rule.width();
                rule.find('.red-ui-typedInput').typedInput("width",(newWidth-15)/2);

            }
            var headerList = $("#node-input-headers-container").css('min-height','150px').css('min-width','450px').editableList({
                addItem: function(container,i,header) {
                    var row = $('<div/>').appendTo(container);
                    var propertyName = $('<input/>',{class:"node-input-header-name",type:"text"})
                        .appendTo(row)
                        .typedInput({types:headerTypes});

                    var propertyValue = $('<input/>',{class:"node-input-header-value",type:"text",style:"margin-left: 10px"})
                        .appendTo(row)
                        .typedInput({types:
                            header.h === 'content-type'?contentTypes:[{value:"other",label:"other",icon:"red/images/typedInput/az.png"}]
                        });

                    var matchedType = headerTypes.filter(function(ht) {
                        return ht.value === header.h
                    });
                    if (matchedType.length === 0) {
                        propertyName.typedInput('type','other');
                        propertyName.typedInput('value',header.h);
                        propertyValue.typedInput('value',header.v);
                    } else {
                        propertyName.typedInput('type',header.h);

                        if (header.h === "content-type") {
                            matchedType = contentTypes.filter(function(ct) {
                                return ct.value === header.v;
                            });
                            if (matchedType.length === 0) {
                                propertyValue.typedInput('type','other');
                                propertyValue.typedInput('value',header.v);
                            } else {
                                propertyValue.typedInput('type',header.v);
                            }
                        } else {
                            propertyValue.typedInput('value',header.v);
                        }
                    }

                    matchedType = headerTypes.filter(function(ht) {
                        return ht.value === header.h
                    });
                    if (matchedType.length === 0) {
                        propertyName.typedInput('type','other');
                        propertyName.typedInput('value',header.h);
                    } else {
                        propertyName.typedInput('type',header.h);
                    }

                    propertyName.on('change',function(event) {
                        var type = propertyName.typedInput('type');
                        if (type === 'content-type') {
                            propertyValue.typedInput('types',contentTypes);
                        } else {
                            propertyValue.typedInput('types',[{value:"other",label:"other",icon:"red/images/typedInput/az.png"}]);
                        }
                    });



                    resizeRule(container);
                },
                resizeItem: resizeRule,
                removable: true
            });

            if (this.headers) {
                for (var key in this.headers) {
                    if (this.headers.hasOwnProperty(key)) {
                        headerList.editableList('addItem',{h:key,v:this.headers[key]});
                    }
                }
            }
        },
        oneditsave: function() {
            var headers = $("#node-input-headers-container").editableList('items');
            var node = this;
            node.headers = {};
            headers.each(function(i) {
                var header = $(this);
                var keyType = header.find(".node-input-header-name").typedInput('type');
                var keyValue = header.find(".node-input-header-name").typedInput('value');
                var valueType = header.find(".node-input-header-value").typedInput('type');
                var valueValue = header.find(".node-input-header-value").typedInput('value');
                var key = keyType;
                var value = valueType;
                if (keyType === 'other') {
                    key = keyValue;
                }
                if (valueType === 'other') {
                    value = valueValue;
                }
                if (key !== '') {
                    node.headers[key] = value;
                }
            });
        },
        oneditresize: function(size) {
            var rows = $("#dialog-form>div:not(.node-input-headers-container-row)");
            var height = size.height;
            for (var i=0; i<rows.size(); i++) {
                height -= $(rows[i]).outerHeight(true);
            }
            var editorRow = $("#dialog-form>div.node-input-headers-container-row");
            height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));

            $("#node-input-headers-container").editableList('height',height);
        }
    });
})();
</script>