Mercurial > hg > nodescore
changeset 24:22f1c38007ff
latency ping pong check added for clients
| author | tzara <rc-web@kiben.net> |
|---|---|
| date | Wed, 11 Jul 2012 19:44:37 +0100 |
| parents | e1a02869da08 |
| children | 8ac67b784a8c |
| files | nodescore nodescore.js www/m/controls.html www/m/css/nodescore.css www/m/js/nodescore-client.js www/m/score.html www/m/seta/img/thumbs/1.png www/m/seta/img/thumbs/2.png www/m/seta/img/thumbs/3.png www/m/seta/img/thumbs/4.png www/m/seta/img/thumbs/5.png www/m/seta/img/thumbs/6.png |
| diffstat | 12 files changed, 115 insertions(+), 100 deletions(-) [+] |
line wrap: on
line diff
--- a/nodescore Wed Jul 11 14:17:43 2012 +0100 +++ b/nodescore Wed Jul 11 19:44:37 2012 +0100 @@ -19,6 +19,7 @@ exit 0; fi +killall node; node nodescore.js & sleep 2; sh ss2thumb.sh $PROJECT $SERVER;
--- a/nodescore.js Wed Jul 11 14:17:43 2012 +0100 +++ b/nodescore.js Wed Jul 11 19:44:37 2012 +0100 @@ -14,6 +14,9 @@ , $ = require('jQuery') , static = require('node-static'); +var bla +var pinging=0 + console.log("ping set to 0") // run webserver serving static html //////////////////////////////////////////// @@ -33,7 +36,7 @@ var io = sio.listen(httpServer) , nicknames = {}; -io.set('log level', 2); // reduce logging +io.set('log level', 2); // reduce loggingi io.sockets.on('connection', function (socket) { //////////////////////////////////////////// @@ -104,61 +107,8 @@ socket.on('stopChr', function () { stopChr();}); socket.on('resetChr', function () { resetChr();}); - //////////////////////////////////////////// - // some latency calculations - /////////////////////////////////////////// - /* - a ping is periodically broadcast to all connected clients each - connected returns a pong to the server via an "emit" and in turn - the server returns each unique client a report of the latency - via another emit - the emit only sends to the source of the - request, whereas the broadcast.emit.. broadcasts.. ie to all - connected clients - TODO: smooth range and average out results to remove erratic ping - times. - - TODO: - The result then needs to be used to stagger outgoing messages to - compensate for latency - how much compensation is more connected - to the time that any audio/video feed needs to encode/decode as - the latency of the route from node A to node B is inavoidable?! - so maybe latency is irrelevant in this context - we just need to - stagger signals according to encoding decoding times.. hmmm - */ - - - -// periodically broadcast a ping - - function serverTime(freq) { - // clearInterval(); - st=setInterval(function() { - var d = new Date(); var n = d.getTime(); - socket.emit("timeFromServer", n); - socket.broadcast.emit("timeFromServer", n); - - }, freq); - } - - // recieve the pong calculate the latency and - // return the response to the client - - socket.on("clientTimeResponse", function(x) { - var d = new Date(); var n = d.getTime(); - var latency = (n-x)/2; - //console.log("SERVERTIME:"+x + " LATENCY:" + latency); - socket.emit("latencyFromServer", latency); - - }); - - // this is the trigger from the control client to start the process - // maybe remove this and have latency connections constantly running - - socket.on("getLatencies", function(x){ - serverTime(x); - }); //////////////////////////////////////////// // magic square sequencer @@ -272,10 +222,78 @@ }); + + //////////////////////////////////////////// + // some latency calculations + /////////////////////////////////////////// + + /* + a ping is periodically broadcast to all connected clients each + connected returns a pong to the server via an "emit" and in turn + the server returns each unique client a report of the latency + via another emit - the emit only sends to the source of the + request, whereas the broadcast.emit.. broadcasts.. ie to all + connected clients + + TODO: smooth range and average out results to remove erratic ping + times. + + TODO: + The result then needs to be used to stagger outgoing messages to + compensate for latency - how much compensation is more connected + to the time that any audio/video feed needs to encode/decode as + the latency of the route from node A to node B is inavoidable?! + so maybe latency is irrelevant in this context - we just need to + stagger signals according to encoding decoding times.. hmmm + */ + + + +// periodically broadcast a ping + + function serverTime(freq) { + + if (pinging==0){ + st = setInterval(function() { + var pinging=1; + var d = new Date(); var n = d.getTime(); + socket.emit("timeFromServer", n); + //socket.broadcast.emit("timeFromServer", n); + }, 1000); } + else console.log("already pinging") + } + + // recieve the pong calculate the latency and + // return the response to the client + + socket.on("clientTimeResponse", function(x) { + var d = new Date(); var n = d.getTime(); + var latency = (n-x)/2; + //console.log("SERVERTIME:"+x + " LATENCY:" + latency); + socket.emit("latencyFromServer", latency); + + }); + + // this is the trigger from the control client to start the process + // maybe remove this and have latency connections constantly running + /* + socket.on("getLatencies", function(x){ + serverTime(x); + }); + */ + + serverTime(1000); + + socket.on('disconnect', function(client) { + console.log(client + " is gone..." ) + clearInterval(st); + }); + }); +
--- a/www/m/controls.html Wed Jul 11 14:17:43 2012 +0100 +++ b/www/m/controls.html Wed Jul 11 19:44:37 2012 +0100 @@ -8,7 +8,7 @@ <script src="js/controlseq.js"></script> </head> - <body onload="getLatencies(500);"> + <body> <input type="hidden" id="group" value='1'> <div class="outermaster"> <div id="client_chronometer">00:00:00.0</div> @@ -18,8 +18,7 @@ <div id="metronome2"></div> <div id="metronome3"></div> </div> - - + <div class="outersquare"> <div> <p class="magicsquare" id="1magicsquare0"></p>
--- a/www/m/css/nodescore.css Wed Jul 11 14:17:43 2012 +0100 +++ b/www/m/css/nodescore.css Wed Jul 11 19:44:37 2012 +0100 @@ -99,46 +99,45 @@ text-align: center; width: 858px; font-size:1.5em; - color: white; - border: 1px solid blue; + color: yellow; +! border: 1px solid blue; position: absolute; float: left; left: 206px; top: 25px; - - background-color: black; + background-color: transparent; } #current{ - opacity: 0.7; + opacity: 0.8; height: 25px; text-align: center; width: 130px; font-size:1.5em; - color: white; - border: 1px solid blue; + color: red; +! border: 1px solid blue; position: absolute; float: left; left: 210px; top: 25px; - background-color: black; + background-color: transparent; z-index: 1; } #client_latency{ - opacity: 0.7; + opacity: 0.8; height: 25px; - text-align: center; width: 160px; font-size:1.5em; - color: white; - border: 1px solid blue; + color: pink; +! border: 1px solid blue; position: absolute; float: left; - right: 220px; + right: 205px; top: 25px; background-color: black; z-index: 1; + padding: 0px 15px; }
--- a/www/m/js/nodescore-client.js Wed Jul 11 14:17:43 2012 +0100 +++ b/www/m/js/nodescore-client.js Wed Jul 11 19:44:37 2012 +0100 @@ -57,7 +57,7 @@ function countinClient(groupID, currentseconds,mm,text,colour,background){ var groupPage=document.getElementById('group').value if (groupID == groupPage) { - console.log(currentseconds); + //console.log(currentseconds); document.getElementById("countinnumber").style.visibility="visible"; document.getElementById("countinnumber").style.visibility="visible"; //$("#countin").text(text); @@ -157,7 +157,7 @@ var hcheckWebkitandIE=(e.which==104 ? 1 : 0); var hcheckMoz=(e.which==104 ? 1 : 0); - console.log(e.which); +// console.log(e.which); if (checkWebkitandIE || checkMoz) { toggle_visibility('preview') } if (mcheckWebkitandIE || mcheckMoz) { toggle_visibility('metro') } if (ccheckWebkitandIE || ccheckMoz) { toggle_visibility('client_chronometer') } @@ -182,7 +182,7 @@ }); socket.on("latencyFromServer", function(latency) { $("#client_latency").text("Latency: "+latency+"ms.") - console.log(latency) + //console.log(latency) }); function getLatencies(x) { socket.emit("getLatencies", x); }
--- a/www/m/score.html Wed Jul 11 14:17:43 2012 +0100 +++ b/www/m/score.html Wed Jul 11 19:44:37 2012 +0100 @@ -16,42 +16,40 @@ <div class="outermaster"> - <ul id="nav"> - - <li><a href="javascript:void(0)">Menu</a> - <ul> - <li><a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='3'">SELECT PART:</a> - <ul> - <a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='1'; $('div#current').text('GROUP 1').text='1'">GROUP 1</a> - <a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='2'; $('div#current').text('GROUP 2').text='2'">GROUP 2</a> - <a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='3'; $('div#current').text('GROUP 3').text='3'">GROUP 3</a> - <a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='4'; $('div#current').text('GROUP 4').text='4'">GROUP 4</a> - </ul> - </li> - - <li><a href="http://nodescore.kiben.net">help</a></li> - <li><a href="http://nodescore.kiben.net:8889/m/controls.html">control panel</a></li> - </ul> - </li> -</ul> - <div id="current">GROUP: 1</div> <div id="client_latency">Latency: 0ms</div> - + <div class="metrocase" id="metro"> - <div id="metronome0"></div> - <div id="metronome1"></div> - <div id="metronome2"></div> - <div id="metronome3"></div> + <div id="metronome0"></div> + <div id="metronome1"></div> + <div id="metronome2"></div> + <div id="metronome3"></div> </div> <div id="client_chronometer" style="z-index: 2;">00:00:00.0</div> - <div id="countinnumber"></div> - + <div id="countinnumber"></div> <div id="live"> </div> <div id="preview"></div> <div id="datetime"></div> + + + <ul id="nav"> + <li><a href="javascript:void(0)">Menu</a> + <ul> + <li><a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='3'">SELECT PART:</a> + <ul> + <a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='1'; $('div#current').text('GROUP 1').text='1'">GROUP 1</a> + <a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='2'; $('div#current').text('GROUP 2').text='2'">GROUP 2</a> + <a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='3'; $('div#current').text('GROUP 3').text='3'">GROUP 3</a> + <a href="javascript:void(0)" onclick="javascript:document.getElementById('group').value='4'; $('div#current').text('GROUP 4').text='4'">GROUP 4</a> + </ul> + </li> + <li><a href="http://nodescore.kiben.net">help</a></li> + <li><a href="http://nodescore.kiben.net:8889/m/controls.html" target="_blank">control panel</a></li> + </ul> + </li> + </ul> </div> - + </body> </html>