Twitter hashtag counter
This flow is built to display a HTML with a counter of a given twitter hashtag. It uses websockets for the realtime injection of data. To use, set your twitter app (developer) credentials and choose a hashtag. Access the HTML at your.node-red.host/counter
Flow 1
[{"id":"dbefd2a.327213","type":"http response","z":"f623cbb8.c42138","name":"","x":470,"y":180,"wires":[]},{"id":"7918209f.81649","type":"http in","z":"f623cbb8.c42138","name":"","url":"/counter","method":"get","upload":false,"swaggerDoc":"","x":110,"y":180,"wires":[["bb69fb9f.e2cec8"]]},{"id":"bb69fb9f.e2cec8","type":"template","z":"f623cbb8.c42138","name":"HTML","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE HTML>\n<html>\n <head>\n <title>Twitter Counter</title>\n <script type=\"text/javascript\">\n var ws;\n var wsUri = \"ws:\";\n var loc = window.location;\n console.log(loc);\n if (loc.protocol === \"https:\") { wsUri = \"wss:\"; }\n // This needs to point to the web socket in the Node-RED flow\n // ... in this case it's ws/simple\n wsUri += \"//\" + loc.host + loc.pathname.replace(\"counter\",\"ws/counter\");\n\n function wsConnect() {\n console.log(\"connect\",wsUri);\n ws = new WebSocket(wsUri);\n //var line = \"\"; // either uncomment this for a building list of messages\n ws.onmessage = function(msg) {\n var line = \"\"; // or uncomment this to overwrite the existing message\n // parse the incoming message as a JSON object\n var data = msg.data;\n //console.log(data);\n // build the output from the topic and payload parts of the object\n line += \"<p>\"+data+\"</p>\";\n // replace the messages div with the new \"line\"\n document.getElementById('messages').innerHTML = line;\n //ws.send(JSON.stringify({data:data}));\n }\n \n /*\n .onopen = function() {\n // // update the status div with the connection status\n document.getElementById('status').innerHTML = \"connected\";\n //ws.send(\"Open for data\");\n console.log(\"connected\");\n }\n ws.onclose = function() {\n // update the status div with the connection status\n document.getElementById('status').innerHTML = \"not connected\";\n // in case of lost connection tries to reconnect every 3 secs\n setTimeout(wsConnect,300);\n }\n */\n \n }\n \n function doit(m) {\n if (ws) { ws.send(m); }\n }\n </script>\n \n <style>\n \n\n \n body {\n\tmargin: 0;\n\tpadding: 0;\n\twidth: 1920px;\n\theight: 1080px;\n\toverflow:hidden;\n\t/* background-image: url(images/fundo.png); #tirar isso depois */\n /*background: gray;*/\n \n }\n \n #hashtag {\n font-size: 40px;\n color: gray;\n /* width: 50%; */\n margin: 0;\n /* position: relative; */\n float: left;\n }\n\n#messages {\n font-size: 50px;\n\n color: black;\n /* width: 50%; */\n margin-left: 6px;\n float: left;\n position: relative;\n top: -65px\n }\n\n#wrap {\n float: left;\n clear: none;\n /* width: 100%; */\n margin: 0;\n top: 20px;\n position: absolute;\n }\n \n#hashtag img {\n \n width: 40px;\n height: 40px;\n}\n\n \n \n \n \n \n </style>\n \n \n </head>\n <body onload=\"wsConnect();\" onunload=\"ws.disconnect();\">\n \n <div id=\"wrap\">\n <div id=\"hashtag\"><img src=\"https://www.pikpng.com/pngl/b/59-598540_white-twitter-logo-transparent-transparent-background-twitter-logo.png\"></div><div id=\"messages\"></div>\n </div>\n \n </body>\n</html>\n","x":278,"y":180,"wires":[["dbefd2a.327213"]]},{"id":"b8a15f02.66947","type":"debug","z":"f623cbb8.c42138","name":"","active":true,"console":"false","complete":"false","x":310,"y":240,"wires":[]},{"id":"5cf49726.9b0ea8","type":"twitter in","z":"f623cbb8.c42138","twitter":"","tags":"area51storm","user":"false","name":"","inputs":1,"x":100,"y":120,"wires":[["78f07f5f.0cacd"]]},{"id":"da60561a.0539a8","type":"websocket out","z":"f623cbb8.c42138","name":"","server":"a2c551fc.1b473","client":"","x":480,"y":120,"wires":[]},{"id":"bd8ba9b9.a6e948","type":"websocket in","z":"f623cbb8.c42138","name":"","server":"a2c551fc.1b473","client":"","x":120,"y":240,"wires":[["b8a15f02.66947"]]},{"id":"78f07f5f.0cacd","type":"function","z":"f623cbb8.c42138","name":"increment","func":"// initialise the counter to 0 if it doesn't exist already\nvar count = context.get('count')||0;\ncount += 1;\n// store the value back\ncontext.set('count',count);\n// make it part of the outgoing msg object\nmsg.payload = count;\nreturn msg;","outputs":1,"noerr":0,"x":280,"y":120,"wires":[["da60561a.0539a8"]]},{"id":"7c5b9ee3.5a9ba","type":"comment","z":"f623cbb8.c42138","name":"set your hashtag and credentials","info":"","x":170,"y":60,"wires":[]},{"id":"a2c551fc.1b473","type":"websocket-listener","z":"f623cbb8.c42138","path":"/ws/counter","wholemsg":"false"}]
