So 1 ajax request will get many updates before the connection is closed.
--- /dev/null
+function repportError(errortext) {
+ domError = document.getElementById('errorpannel');
+ domError.innerHTML = errortext;
+ if (domError.style.display != 'block')
+ domError.style.display = 'block';
+}
+function repportSuccess() {
+ domError = document.getElementById('errorpannel');
+ if (domError.style.display != 'none')
+ domError.style.display = 'none';
+}
+function updatePage(strdata) {
+ try {
+ data = JSON.parse(strdata);
+ } catch(SyntaxError) {
+ repportError("Error decoding json");
+ console.warn("Error decoding json: "+strdata);
+ return;
+ }
+ document.getElementById('currentpower').innerHTML = data.watts.toFixed(1);
+ document.getElementById('totalpower').innerHTML = data.counter.toFixed(5);
+ repportSuccess();
+}
function send_chunk($chunk)
{
// The chunk must fill the output buffer or php won't send it
- $chunk = str_pad($chunk, 4096);
+ //$chunk = str_pad($chunk, 4096);
printf("%x\r\n%s\r\n", strlen($chunk), $chunk);
flush();
+ ob_flush();
}
while (True) {
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.svg">
<title>ampy - Le compteur espion qui ne moucharde pas</title>
-<script src='/javascript/jquery/jquery.js'></script>
-<script>
-function refresh_power() {
- $.ajax({
- url : 'currentjson.php',
- success : function(result) {
- document.getElementById('currentpower').innerHTML = result['watts'].toFixed(1);
- document.getElementById('totalpower').innerHTML = result['counter'].toFixed(5);
- },
- complete : function() {
- setTimeout(refresh_power, 1000);
- }
- });
-}
-function refresh_graph(hours=0, minutes=0) {
- img = document.getElementById('loadcurve');
- img.src = 'graph.php?h='+hours+'&m='+minutes+'&t='+new Date().getTime();
+<script src=ampy.js></script>
+<style>
+div#errorpannel
+{
+ position: absolute;
+ top: 3px;
+ right: 15px;
+ height: 18px;
+ padding: 1px 2px 1px 2px;
+ background: red;
}
-</script>
-
-Puissance instantannée: <span id=currentpower>unknown</span> watts
-<script>refresh_power();</script>
+</style>
+<div id=errorpannel style="display:none;">
+</div>
+Puissance instannée: <span id=currentpower>Unknown</span> watts
-
Compteur: <span id=totalpower>unknown</span> kWh
-
Graphique:
-<a href='javascript:refresh_graph(0,5)'>5m</a>
-<a href='javascript:refresh_graph(0,30)'>30m</a>
-<a href='javascript:refresh_graph(1)'>1h</a>
+<a href='javascript:refresh_graph(0,5)'>5m</a>
+<a href='javascript:refresh_graph(0,30)'>30m</a>
+<a href='javascript:refresh_graph(1)'>1h</a>
<a href='javascript:refresh_graph(2)'>2h</a>
<a href='javascript:refresh_graph(6)'>6h</a>
<a href='javascript:refresh_graph(12)'>12h</a>
<a href='javascript:refresh_graph(7*24)'>7d</a>
<a href='javascript:refresh_graph(30*24)'>30d</a>
+
<br>
<img id='loadcurve' src='graph.php'>
+
+
+<script>
+function startComet() {
+ MAX_BUFFER_SIZE = 64*1024; // 64 kiB
+ xhr = new XMLHttpRequest();
+ xhr.onreadystatechange = function() {
+ //console.log("xhr.status:"+xhr.status+". xhr.readyState="+xhr.readyState);
+ if (xhr.status == 200) {
+ switch (xhr.readyState) {
+ case 3: /* loading */
+ response = xhr.responseText;
+ //console.log("responseText:"+response);
+ new_text = response.substring(xhr.ampy_len);
+ xhr.ampy_len = response.length;
+ //console.log("new_text: "+new_text);
+
+ // If the client is lagging, we can get several json items
+ // at once. Truncate them:
+ for (datum of new_text.trim().split("}")) {
+ if (datum.length)
+ updatePage(datum+"}");
+ }
+ if (xhr.ampy_len > MAX_BUFFER_SIZE) {
+ xhr.abort(); // Don't let the buffer get too big
+ startComet();
+ }
+ break;
+ case 4: /* done */
+ repportError("XMLHttpRequest connection lost. Reconnecting...");
+ startComet();
+ break;
+ }
+ } else {
+ switch (xhr.readyState) {
+ case 2: /* header received */
+ repportError("XMLHttpRequest returned code "+xhr.status+" ("+xhr.statusText+")");
+ break;
+ }
+ }
+ }
+ xhr.ampy_len=0;
+ xhr.open('GET', 'currentjson_chunked.php', true /*async*/);
+ xhr.send();
+}
+startComet();
+
+function refresh_graph(hours=0, minutes=0) {
+ img = document.getElementById('loadcurve');
+ img.src = 'graph.php?h='+hours+'&m='+minutes+'&t='+new Date().getTime();
+}
+</script>
+
+
+<!--img src="graph.php"-->
--- /dev/null
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<link rel="shortcut icon" href="favicon.svg">
+<title>ampy - Le compteur espion qui ne moucharde pas</title>
+<script src='/javascript/jquery/jquery.js'></script>
+<script src=ampy.js></script>
+div#errorpannel
+{
+ position: absolute;
+ top: 3px;
+ right: 15px;
+ height: 18px;
+ padding: 1px 2px 1px 2px;
+ background: red;
+}
+</style>
+<div id=errorpannel style="display:none;">
+</div>
+
+Puissance instantannée: <span id=currentpower>unknown</span> watts
+
+-
+
+Compteur: <span id=totalpower>unknown</span> kWh
+
+-
+
+Graphique:
+<a href='javascript:refresh_graph(0,5)'>5m</a>
+<a href='javascript:refresh_graph(0,30)'>30m</a>
+<a href='javascript:refresh_graph(1)'>1h</a>
+<a href='javascript:refresh_graph(2)'>2h</a>
+<a href='javascript:refresh_graph(6)'>6h</a>
+<a href='javascript:refresh_graph(12)'>12h</a>
+<a href='javascript:refresh_graph(24)'>1d</a>
+<a href='javascript:refresh_graph(2*24)'>2d</a>
+<a href='javascript:refresh_graph(7*24)'>7d</a>
+<a href='javascript:refresh_graph(30*24)'>30d</a>
+
+<br>
+
+<img id='loadcurve' src='graph.php'>
+
+
+
+<script>
+function refresh_data() {
+ $.ajax({
+ url : 'currentjson.php',
+ dataType: 'text',
+ success : function(result) {
+ updatePage(result);
+ },
+ complete : function() {
+ setTimeout(refresh_data, 1000);
+ }
+ });
+}
+function refresh_graph(hours=0, minutes=0) {
+ img = document.getElementById('loadcurve');
+ img.src = 'graph.php?h='+hours+'&m='+minutes+'&t='+new Date().getTime();
+}
+</script>
+<script>refresh_data();</script>
+++ /dev/null
-<!DOCTYPE html>
-<meta charset="UTF-8">
-
-<fieldset>
- <legend>debug messages</legend>
- <span id=debugg></span>
-</fieldset>
-
-Puissance instannée: <span id=currentpower>Unknown</span> watts<br>
-
-<script>
-function debug(str) {
- document.getElementById('debugg').innerHTML += "" + str + "<br>";
-}
-xhr = new XMLHttpRequest();
-xhr.onreadystatechange = function() {
- switch (xhr.readyState) {
- case 0: /* unsent */
- case 1: /* opened */
- case 2: /* header received */
- return;
- case 3:
- switch(xhr.status) {
- case 200:
- response = xhr.responseText;
- //debug("responseText:"+response);
- new_text = response.substring(xhr.ampy_len);
- xhr.ampy_len = response.length;
- //debug("new_text: "+new_text);
-
- try {
- data = JSON.parse(new_text);
- } catch(SyntaxError) {
- debug("Error decoding json: "+new_text);
- break;
- }
- document.getElementById('currentpower').innerHTML = data.watts.toFixed(1);
- break;
- default:
- debug("XMLHttpRequest.status=="+xhr.status+" ("+xhr.statusText+")");
- break;
- }
- break;
- case 4: /* done */
- debug("XMLHttpRequest.readyState==4. Connection was lost.");
- /* TODO: reconnect */
- break;
- }
-}
-xhr.ampy_len=0;
-xhr.open('GET', 'currentjson_chunked.php', true /*async*/);
-xhr.send(null);
-
-</script>
-
-
-<!--img src="graph.php"-->