Public Sentiment Chat Flow

This flow uses http nodes and web sockets nodes to serve up a simple web page with a chat application that colours messages depending on whether they are positive or negative according to the sentiment node.

Thanks @sensetecnic and @calderonroberto.

[{"id":"1ab0744.7750b8c","type":"websocket-listener","path":"/public/publish","wholemsg":"false"},{"id":"174ffc83.caab23","type":"websocket-listener","path":"/public/receive","wholemsg":"false"},{"id":"768042c8.86553c","type":"websocket in","z":"af6fae00.01df9","name":"","server":"174ffc83.caab23","client":"","x":195,"y":167,"wires":[["33d04d03.ce48d2"]]},{"id":"8e3f617f.62641","type":"http in","z":"af6fae00.01df9","name":"","url":"/public/chat","method":"get","swaggerDoc":"","x":183,"y":384,"wires":[["777f6fc0.9823"]]},{"id":"23705a1c.6e0306","type":"http response","z":"af6fae00.01df9","name":"","x":377,"y":390,"wires":[]},{"id":"777f6fc0.9823","type":"template","z":"af6fae00.01df9","name":"chat html","field":"payload","fieldType":"msg","format":"text","syntax":"mustache","template":"<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>FRED-powered chat app</title>\n  <script src=\"http://code.jquery.com/jquery-1.11.3.min.js\"></script>\n  <script src=\"http:///code.jquery.com/jquery-migrate-1.2.1.min.js\"></script>\n  <style>\n    #messages {border-color:#999; border-style:solid; width:250px; min-height:200px; margin:5px;}\n    .msg {color:#FFF; background-color:#2980B9; padding:2px; margin:2px;}\n    .server {color:#999; background-color:white; font-size:small;}\n    .sentiment-3 {background-color:#992222;}  \n    .sentiment0 {background-color:#2980B9;}\n    .sentiment3 {background-color:#229922;}\n    #form {margin:5px;}\n    #form input {width:250px;}\n  </style>\n</head>\n<body>\n  <div id=\"messages\"></div>\n  <form id=\"form\" onsubmit=\"return false;\">\n    <input id=\"text\" type=\"text\" onkeypress=\"return sendText(event)\" />\n  </form>\n\n  <script type=\"text/javascript\">\n\n    // Open a websocket using FRED.\n    var publishSocket = new WebSocket(\"ws://localhost:1880/public/receive\");\n    var listenSocket = new WebSocket(\"ws://localhost:1880/public/publish\");\n\n    listenSocket.onmessage = function (event) {\n      // When receiving a message append a div child to #messages\n      data = JSON.parse(event.data);\n      $(\"#messages\").append(\"<div class='msg sentiment\"+data.sentiment+\"' >\"+data.timestamp+\" - \"+data.msg+\"</div>\")\n      if ($(\"#messages\").children().length > 10 ) { $(\"#messages :first-child\").remove()}\n    }\n\n    listenSocket.onclose = function(event){\n      $(\"#messages\").append(\"<div class='msg server'>Disconnected from server.</div>\");\n    }\n\n    listenSocket.onopen = function(event){\n      $(\"#messages\").append(\"<div class='msg server'>Connected to server.</div>\")\n    }\n\n    function sendText(event) {\n      // Only if return key pressed\n      if (event.keyCode == 13) {\n        // Construct object containing the data the server needs.\n        d = new Date();\n        var data = {\n          msg: $(\"#text\").val(),\n          timestamp: d.getHours() +\":\"+ d.getMinutes() + \":\" + d.getSeconds()\n        };\n        // Send the msg object as a JSON-formatted string.\n        publishSocket.send(JSON.stringify(data));  \n        // Blank the text input element\n        $(\"#text\").val(\"\");\n      }\n    }\n </script>\n\n</body>\n</html>\n","x":305,"y":435,"wires":[["23705a1c.6e0306"]]},{"id":"62922d0c.a1b0b4","type":"sentiment","z":"af6fae00.01df9","name":"","x":397,"y":304,"wires":[["96de4ef8.e4e04"]]},{"id":"1941cb21.ba4f85","type":"change","z":"af6fae00.01df9","name":"","rules":[{"t":"set","p":"data","to":"msg.payload"},{"t":"set","p":"payload","to":"msg.payload.msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":319,"y":259,"wires":[["62922d0c.a1b0b4"]]},{"id":"33d04d03.ce48d2","type":"json","z":"af6fae00.01df9","name":"","x":219,"y":299,"wires":[["1941cb21.ba4f85"]]},{"id":"96de4ef8.e4e04","type":"function","z":"af6fae00.01df9","name":"format message","func":"return {\n    payload: {\n        msg:msg.data.msg,\n        timestamp:msg.data.timestamp,\n        sentiment:msg.sentiment.score\n    }\n};","outputs":1,"noerr":0,"x":514,"y":261,"wires":[["dd0820f6.51b99"]]},{"id":"dd0820f6.51b99","type":"websocket out","z":"af6fae00.01df9","name":"","server":"1ab0744.7750b8c","client":"","x":608,"y":170.09091186523438,"wires":[]}]
mblackstock

Flow Info

created 11 months ago

Node Types

Core
  • change (x1)
  • function (x1)
  • http in (x1)
  • http response (x1)
  • json (x1)
  • sentiment (x1)
  • template (x1)
  • websocket in (x1)
  • websocket out (x1)
  • websocket-listener (x2)

Tags

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