This is a flow that introduces basic HTML and JavaScript, along with a minimal backend for message exchange between different users. It's the result of a Raspberry Pi workshop. The tutorial for the workshop is available here: http://www.slideshare.net/BorisAdryan/node-redcamjampibirthdayfeb2015
Note: The tutorial omits a { } pair in the /dialog branch's template node. This is considered in the flow.
| [{"id":"a7b4f877.584b08","type":"http in","name":"","url":"/chat","method":"post","x":125,"y":188,"z":"a61a2dfe.59e5d","wires":[["f22fd32b.0dd03"]]},{"id":"19e2f288.e61d0d","type":"http response","name":"","x":646,"y":187,"z":"a61a2dfe.59e5d","wires":[]},{"id":"2dd6573e.d229a8","type":"template","name":"","field":"payload","template":"\n <iframe src=\"http://localhost:1880/dialog\" name=\"iframe_a\" height=\"70%\"></iframe>\n <form name=\"frm\" action=\"http://localhost:1880/chat\" method=\"post\">\n <b>Message from {{payload}}</b><br>\n <input type=\"text\" name=\"message\" size=\"90%\"/>\n <input type=\"hidden\" name=\"user\" value=\"{{payload}}\"><br>\n <button type=\"submit\">Submit</button>\n </form>\n \n <SCRIPT language=\"JavaScript\">\n window.setInterval(\"reloadIFrame();\", 1000);\n function reloadIFrame() { window.frames[\"iframe_a\"].location.reload(); }\n </SCRIPT>\n","x":472,"y":187,"z":"a61a2dfe.59e5d","wires":[["19e2f288.e61d0d"]]},{"id":"c062c270.3f9d4","type":"http in","name":"","url":"/dialog","method":"get","x":128,"y":248,"z":"a61a2dfe.59e5d","wires":[["ec5dcef5.13a23"]]},{"id":"ebf8176c.1407e8","type":"http response","name":"","x":646,"y":248,"z":"a61a2dfe.59e5d","wires":[]},{"id":"2cec5a6e.d313a6","type":"template","name":"","field":"payload","template":"{{{payload}}}","x":474,"y":248,"z":"a61a2dfe.59e5d","wires":[["ebf8176c.1407e8"]]},{"id":"f22fd32b.0dd03","type":"function","name":"","func":" if (msg.req.body[\"user\"] != \"\") {\n msg.payload = msg.req.body[\"user\"]\n }\n if (msg.req.body[\"message\"] != undefined) {\n context.global.dialog += \n msg.req.body[\"user\"]+': '+msg.req.body[\"message\"]+\"<BR>\";\n }\ncontext.global.dialog = context.global.dialog || \"\";\nreturn msg;","outputs":1,"x":295,"y":187,"z":"a61a2dfe.59e5d","wires":[["2dd6573e.d229a8"]]},{"id":"ec5dcef5.13a23","type":"function","name":"","func":"msg.payload = context.global.dialog;\nreturn msg;","outputs":1,"x":297,"y":247,"z":"a61a2dfe.59e5d","wires":[["2cec5a6e.d313a6"]]},{"id":"dc8eadd2.23715","type":"http in","name":"","url":"/login","method":"get","x":126,"y":92,"z":"a61a2dfe.59e5d","wires":[["50273e9c.afd8c"]]},{"id":"50273e9c.afd8c","type":"template","name":"","field":"payload","template":"\n <form action=\"http://localhost:1880/chat\" method=\"post\">\n <b>User</b><br> <input type=\"text\" name=\"user\"/><br>\n <button type=\"submit\">Submit</button>\n </form>","x":286,"y":92,"z":"a61a2dfe.59e5d","wires":[["3117f0d1.cee81"]]},{"id":"3117f0d1.cee81","type":"http response","name":"","x":444,"y":92,"z":"a61a2dfe.59e5d","wires":[]},{"id":"3ae6147a.c519ec","type":"http in","name":"","url":"/mypage","method":"get","x":103,"y":485,"z":"a61a2dfe.59e5d","wires":[["64fe4e7e.9b01b"]]},{"id":"261eae15.d9e152","type":"http response","name":"","x":660,"y":485,"z":"a61a2dfe.59e5d","wires":[]},{"id":"e5d84762.1a27b8","type":"template","name":"template","field":"payload","template":"This is the <b>message</b>: {{payload}}","x":512,"y":485,"z":"a61a2dfe.59e5d","wires":[["261eae15.d9e152"]]},{"id":"64fe4e7e.9b01b","type":"function","name":"where things happen","func":"if (msg.topic === \"new message\") {\n context.value = msg.payload;\n return null;\n} else {\n msg.payload = context.value || \"never got anything\";\n return msg;\n}","outputs":1,"x":314,"y":485,"z":"a61a2dfe.59e5d","wires":[["e5d84762.1a27b8"]]},{"id":"6fd4a45e.902b5c","type":"inject","name":"","topic":"new message","payload":"Have a nice day","payloadType":"string","repeat":"","crontab":"","once":false,"x":157,"y":411,"z":"a61a2dfe.59e5d","wires":[["64fe4e7e.9b01b"]]}] |
