忘備録-備忘録

技術的な備忘録

node-redでWebSocket通信を行う

2016-11-28 17:34:32 | raspberry ...
node-redを使用してWebSocket通信を行うサンプルを作ってみました。


慣れるまでは、?なところがありましたが、慣れてしまえば簡単に作れて便利です。

-----------------------------code--------------------------
[{"id":"c18f94af.d97d18","type":"http in","z":"78174f00.279c9","name":"","url":"/wstest","method":"get","swaggerDoc":"","x":121,"y":87,"wires":[["342be234.95c17e"]]},{"id":"342be234.95c17e","type":"template","z":"78174f00.279c9","name":"Webページ雛形","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<HTML xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"ja\">\n    <HEAD>\n        <META http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"> \n        <META name=\"viewport\" content=\"width=240px,initial-scale=1,user-scalable=yes\">\n        <TITLE>Web sockt sample</TITLE>\n    </HEAD>\n    <BODY>\n        PROXYごしだとwebSocktの接続が切れます。\n        <FORM name='form1'>\n            <TABLE border='0' width='240px'>\n                <TR>\n                    <TD>HOST</TD>\n                    <TD id='hostname'><INPUT type='text' name='fhostname'></TD>\n                </TR>\n                <TR>\n                    <TD>SYSMSG</TD>\n                    <TD id='output'><INPUT type='text' name='foutput'></TD>\n                </TR>\n                <TR>\n                    <TD>RECEIVE</TD>\n                    <TD id='rcvmsg'><INPUT type='text' name='frcvmsg'></TD>\n                </TR>\n                <TR>\n                    <TD colspan='2' align='center'>\n                        <INPUT type='button' value='READ' onClick='refTemp()'>\n                    </TD>\n                </TR>\n            </TABLE>\n            \n            <TABLE  border='0' width='240px'>\n                <TR>\n                    <TD id='dig' colspan='3' align='center'>\n                        <LABEL>OFF</LABEL>\n                        <input id='radbtn0' type='radio' name='DIG' value='0' checked='checked' onchange='changeDIG(this.value)'>\n                        <input id='radbtn1'type='radio' name='DIG' value='1' onchange='changeDIG(this.value)'>\n                        <LABEL>ON</LABEL>\n                    </TD>\n                </TR>\n                <TR>\n                    <TD align='right'><LABEL>0</LABEL></TD>\n                    <TD align='center'>\n                        <input id='slider' type='range' name='num' min='0' max='100' step='5' value='50' onchange='changeValue(this.value)'>\n                    </TD>\n                    <TD align='left'><LABEL>100</LABEL></TD>\n                </TR>\n                <TR colspan='3'>\n                    <TD colspan='3' align='center'>\n                        <INPUT type='button' value='RELOAD' onClick='refScreen()'>\n                    </TD>\n                </TR>\n            </TABLE>        \n        </FORM>\n    </BODY>\n\n    <SCRIPT type = 'text/javascript'>\n    \tvar ws;\n\n    \tfunction changeValue(value) {\n    \t\tvar m;\n    \t\tvar n;\n    \t\tm = ('00'+value).substr(-3);\n    \t\tn = m;\n    \t\tm = 'A:'+ m;\n    \t\tws.send(m);\n    \t}\n    \n    \tfunction changeDIG(value) {\n    \t\tvar m;\n    \t\tm = 'D:'+value;\n    \t\tws.send(m);\n    \t}\n    \n    \tfunction refTemp() {\n    \t\tvar m;\n    \t\tm = 'T:0';\n    \t\tws.send(m);\n    \t}\n    \n    \tfunction refScreen() {\n    \t\tvar m;\n    \t\tm = 'R:0';\n    \t\tws.send(m);\n    \t}\n    \n    \t(function() {\n    \t\thadr = location.host;\n    \t\tslidval = document.getElementById('slider');\n    \t\tledval0 = document.getElementById('radbtn0');\n    \t\tledval1 = document.getElementById('radbtn1');\n    \t\tws= new WebSocket('ws://'+hadr+'/ws/io');\n\n    \t\tdocument.form1.fhostname.value = hadr;   //form内に表示\n    \n    \t\tws.onmessage = function(e) {\n    \t\t    document.form1.frcvmsg.value = (e.data).toString();   //form内に表示\n                var rcvobj = JSON.parse(e.data);\n                slidval.value = rcvobj.A;\n                if (rcvobj.D == 0) {\n    \t\t\t    ledval0.checked = 'checked';\n    \t\t\t} else {\n    \t\t\t\tledval1.checked = 'checked';\n    \t\t\t}\n    \t\t\tif(rcvobj.R==1) {\n    \t\t\t    location.reload(true);\n    \t\t\t}\n    \t\t};\n            ws.onopen = function () {\n    \t\t\tdocument.form1.foutput.value = 'connect: ' + hadr; //form内に表示\n         \t\tvar m; //初期値をサーバから取得\n        \t\tm = 'T:0';\n    \t    \tws.send(m);\n   \t\t    };\n    \t\tws.onclose = function (e) {\n    \t\t\tdocument.form1.foutput.value = 'disconnect'+e.code + '-' + e.type + '-' + + e.reason;  //form内に表示\n    \t\t};\n    \t\t\n    \t\tws.onerror = function (e) {\n              document.form1.frcvmsg.value = 'error ' + e.message;\n            };\n\n    \n    \t}() );\n    </script>\n\n</HTML>\n","x":306,"y":88,"wires":[["73ed63fc.f6132c"]]},{"id":"73ed63fc.f6132c","type":"http response","z":"78174f00.279c9","name":"","x":516,"y":89,"wires":[]},{"id":"5975bdc5.3039f4","type":"websocket out","z":"78174f00.279c9","name":"","server":"fc1dd35d.2ba3b","client":"","x":521,"y":158,"wires":[]},{"id":"13992052.defd2","type":"websocket in","z":"78174f00.279c9","name":"","server":"fc1dd35d.2ba3b","client":"","x":105,"y":156,"wires":[["212218fe.d858d8"]]},{"id":"212218fe.d858d8","type":"function","z":"78174f00.279c9","name":"データ処理及び配信","func":"// context.set('変数名',値); グローバル変数の設定\n// var val = context.get('変数名')||0;グローバル変数の読み込み\n// ||0; の部分は初期化指定 \n// 変数が設定されていない場合内は0に初期化\n\n//プロパティの追加\n//静的変数のように使用できる\n//注意: 外部からの参照も可能\nif (typeof this.old_r === 'undefined') {\n    this.old_r = 0;\n}\n\nvar m = (msg.payload).toString();\nvar n = m.split(':');\n//var old_r = context.get('oldreload')||0;\nvar old_r = this.old_r;\n\nif(n[0] == 'D') {\n    context.set('digdat',parseInt(n[1],10));\n}\nif(n[0] == 'A') {\n    context.set('anadat',parseInt(n[1],10));\n}\nif(n[0] == 'R') { //リロード\n    context.set('reload',1);\n}\nif(n[0] == 'T') {\n}\nvar d = context.get('digdat')||0;\nvar a = context.get('anadat')||0;\nvar r = context.get('reload')||0;\nif((old_r==1) && (r==1)) {\n    context.set('reload',0);\n    r = 0;\n}\nmsg.payload = '{\"D\":' +  d + ',\"A\":' + a + ',\"R\":' + r +'}'; //JSON形式でデータを送信\nold_r = r; //繰り返しリロードしないように\n//context.set('oldreload',old_r);\nthis.old_r = old_r;\n\ndelete msg._session; //ブロードキャストする\n//msg._msgid = \"\";\nreturn msg;\n\n","outputs":1,"noerr":0,"x":298,"y":158,"wires":[["5975bdc5.3039f4","2cb20b90.d81a54"]]},{"id":"2cb20b90.d81a54","type":"debug","z":"78174f00.279c9","name":"","active":false,"console":"false","complete":"payload","x":521,"y":235,"wires":[]},{"id":"fc1dd35d.2ba3b","type":"websocket-listener","z":"","path":"/ws/io","wholemsg":"false"}]
-----------------------------code--------------------------

参考図書
ブラウザでお絵描きI/O!Node-REDで極楽コンピュータ・プログラミング (インターフェースSPECIAL) CQ出版


最新の画像もっと見る

コメントを投稿