Load the following flow:
[{"id":"fa584e82.630fc","type":"websocket-listener","path":"/ws/input","wholemsg":"false"},{"id":"905f9119.13ba58","type":"subflow","name":"Input Listen","in":[],"out":[{"x":1026.9999389648438,"y":191,"wires":[{"id":"abd82212.01ac18","port":0}]}]},{"id":"e9067987.d5c6e","type":"websocket in","name":"","server":"fa584e82.630fc","client":"","x":207.26666259765625,"y":190.26666259765625,"z":"905f9119.13ba58","wires":[["18202636.2f563a"]]},{"id":"2e135494.f27cac","type":"comment","name":"Listen for and handle input from ALL pages","info":"# Handling input\n\nWe get 1 message for EVERY input changed (*not* 1 msg per page).\n\nThe JSON returned to this ws contains the page it was on, \nany url parameters and the specific input that was changed.\n\nFinding the input field name and the value can be a challange since\nit depends heavily on the HTML used.\n\nFor normal INPUT fields we recieve:\n```\n{\n\t'timestamp' \t: e.timeStamp,\n\t// What type of input field\n\t'type' \t\t\t: e.target.type,\n\t// ID of the form this input field belongs to\n\t'frmId'\t\t\t: $( this ).closest('form').attr('id'),\n\t// Name/ID of the element one or both may be set\n\t'name' \t\t\t: $( this ).prop(\"name\"),\n\t'id' \t\t\t: $( this ).prop(\"id\"),\n\t'willValidate' \t: e.target.willValidate,\n\t'placeHolder' \t: e.target.placeHolder,\n\t'defaultValue' \t: e.target.defaultValue,\n\t// Value is only ever a singleton string. Use val for multi-values\n\t'value' \t\t: e.target.value, // only ever returns 1 value (string)\n\t'valueAsNumber' : e.target.valueAsNumber,\n\t// Will be on/off for switches/checkboxes\n\t'checked' \t\t: $( this ).prop(\"checked\"),\n\t// returns an array for multi-selects\n\t'val' \t\t\t: $( this ).val(),\n\t// Where are we? Used on server to id which page this is from\n\t'url'\t\t\t: location.pathname,\n\t'query'\t\t\t: location.search\n}\n```\n\nBut Zurb foundation also has a \"slider\" which isn't an input field, this returns:\n\n```\n{\n\t'timestamp' : e.timeStamp,\n\t'type' \t\t: 'slider',\n\t'frmId'\t\t: $( this ).closest('form').attr('id'),\n\t'id' \t\t: $( this ).prop(\"id\"),\n\t'value' \t: $( this ).attr('data-slider'),\n\t'val' \t\t: $( this ).attr('data-slider'),\n\t'url'\t\t: location.pathname,\n\t'query'\t\t: location.search\n}\n```\n\n# How do we tie this to a specific client session?\n\ne.g. a specific instance of a page request.\n\nWe don't!\n\nThe trick is to accept input, do something, send output - \nwebsockets ensures the send is to the same client unless\nthe client id is deleted (in which case it is broadcast).\n\nThere is no link between the socket and the original page\nrequest/response.\n\nWe could set an ID in the original response and then send\nthat back with the socket message. But there will be issues\nof security to deal with (*) and a need to maintain a list (db)\nof active clients. Better to try to avoid this overhead.\n\n(*) Random ID (token) - should seed with clients IP address \nand other info to ensure unquiquness to a single client\nconnection. Also need to age the token (expire it) and to\nvalidate that subsequent reciepts of the token come from the\ncorrect client.","x":280.26661682128906,"y":145.59999084472656,"z":"905f9119.13ba58","wires":[]},{"id":"abd82212.01ac18","type":"function","name":"Set topic: INPUT/<url page name>","func":"// Safe object checking\nvar toClass = {}.toString\n\n// Parse payload\nif ( toClass.call( msg.payload ) == '[object String]' ) {\n msg.payload = JSON.parse(msg.payload);\n} else {\n msg.payload1 = toClass.call( msg.payload );\n}\n// Set msg topic to INPUT/<url page name> for convenience of handling\nmsg.topic = \"INPUT\" + msg.payload.url;\nreturn msg;","outputs":1,"valid":true,"x":564.9832916259766,"y":189.98326110839844,"z":"905f9119.13ba58","wires":[[]]},{"id":"18202636.2f563a","type":"rbe","name":"","func":"rbe","gap":"","x":342.98329162597656,"y":189.98326110839844,"z":"905f9119.13ba58","wires":[["abd82212.01ac18"]]},{"id":"d7f7f78d.7dd078","type":"comment","name":"Add a SWITCH node to filter output","info":"","x":1020.2666625976562,"y":138.26666259765625,"z":"905f9119.13ba58","wires":[]},{"id":"17bf1e37.b29ed2","type":"subflow:905f9119.13ba58","x":148.3333282470703,"y":959.3333740234375,"z":"7f7e9fdc.66f4e8","wires":[["c61f5dd2.e0c3b8"]]},{"id":"c61f5dd2.e0c3b8","type":"switch","name":"Allow /input","property":"payload.url","rules":[{"t":"eq","v":"/input"}],"checkall":"false","outputs":1,"x":336.3333282470703,"y":959.3333740234375,"z":"7f7e9fdc.66f4e8","wires":[["9748a1da.31e89"]]},{"id":"9748a1da.31e89","type":"debug","name":"DEBUG: WS-INPUT2","active":true,"console":"false","complete":"true","x":801.3333282470703,"y":959.3333740234375,"z":"7f7e9fdc.66f4e8","wires":[]}]