Enabled HTTP chunked transfer encoding

So 1 ajax request will get many updates before the connection is closed.

diff --git a/html/ampy.js b/html/ampy.js
new file mode 100644 (file)
index 0000000..0b2ae98
--- /dev/null
+++ b/html/ampy.js
@@ -0,0 +1,23 @@
+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();
+}

diff --git a/html/currentjson_chunked.php b/html/currentjson_chunked.php
index bc62b4a39b5bc77283492ea56340d769894191d3..7772479e7ffc7ebec4dd384c2842e24fdab9fb15 100644 (file)
--- a/html/currentjson_chunked.php
+++ b/html/currentjson_chunked.php
@@ -22,10 +22,11 @@ flush();
 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) {

diff --git a/html/index.php b/html/index.php
index 1b16c7e93d8ab70b00c8c83c79110a126992dbf4..04039c59fc4388834b6844837d9751c81563cf0c 100644 (file)
--- a/html/index.php
+++ b/html/index.php
@@ -2,29 +2,22 @@
 <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
@@ -32,9 +25,9 @@ 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>
@@ -43,6 +36,62 @@ Graphique:
 <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"-->

diff --git a/html/index_unchuncked.php b/html/index_unchuncked.php
new file mode 100644 (file)
index 0000000..77d56f4
--- /dev/null
+++ b/html/index_unchuncked.php
@@ -0,0 +1,64 @@
+<!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>

diff --git a/html/test_chuncked.php b/html/test_chuncked.php
deleted file mode 100644 (file)
index 4a65e9a..0000000
--- a/html/test_chuncked.php
+++ /dev/null
@@ -1,57 +0,0 @@
-<!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"-->