HTTP-based chat server

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"]]}]
badryan

Flow Info

created 2 years, 10 months ago

Node Types

Core
  • function (x3)
  • http in (x4)
  • http response (x4)
  • inject (x1)
  • template (x4)

Tags

  • HTTP
  • server
  • chat
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option