Web-sockets

How to update stuff on a web-page

In this we demonstrate how we can update a graph with data from the server

The webb-browser must be able to show SVG files and have web-sockets implemented.

Here goes svg

Loading of the svg-file from disk

01: //----------------------------------------------------------------------
02: //  storage-load-svg.js
03: //----------------------------------------------------------------------
04: 
05: var w = 900;
06: var h = 550;
07: 
08: $("#svg-picture").empty();
09: 
10: var svg_name = "svg/barn.svg";
11: 
12: var svg_img = d3.select("#svg-picture").append("svg").attr("width", w).attr("height", h);
13: 
14: d3.xml(svg_name, "image/svg-xml",  function(xml)
15: {
16: 
17:     var svgNode = xml.getElementsByTagName("svg")[0];
18:     svg_img.node().appendChild(svgNode);
19: 
20:     innerSVG = svg_img.select("svg");
21: 
22:     // This works
23:     innerSVG.select("#GT-7").select("tspan").html("Waiting");
24:     d3.select("#GT-1").select("tspan").html("Waiting");
25:     
26: });
27: 
28: // This does not work why??
29: d3.select("#GT-3").select("tspan").html("Dont work");
30: 
31: // This does not work why?????
32: innerSVG.select("#GT-2").select("tspan").html("Don't work");
33: 
34: 

The server side script that provides data

01: <?php
02: //----------------------------------------------------------------------
03: //
04: //  storage-info-update.php
05: //  http://enterprisewebbook.com/ch8_websockets.html
06: //----------------------------------------------------------------------
07: 
08: //
09: // We need a different kind of program not run by the server?
10: //
11: 
12: header('Content-Type: text/event-stream');
13: header('Cache-Control: no-cache');
14: 
15: 
16: //   Try not to buffer output from server
17: //   ob_end_flush();
18: 
19: // openlog("myScriptLog", LOG_PID | LOG_PERROR, LOG_LOCAL0);
20: // syslog(LOG_WARNING, "demo $counter");
21: // closelog();
22: 
23: function send_message()
24: {
25: 
26:    // Be careful here. Every blank and newline counts!!
27:    echo "data: <?xml version='1.0' encoding='utf-8'?>" .
28:        "<html><body>" .
29:        "<temp-gt-1>" . number_format((rand(-20,60) / 10.0),1) . "</temp-gt-1>" .
30:        "<temp-gt-2>" . number_format((rand(-20,60) / 10.0),1) . "</temp-gt-2>" .
31:        "<temp-gt-3>" . number_format((rand(-20,60) / 10.0),1) . "</temp-gt-3>" .
32:        "<temp-gt-4>" . number_format((rand(-20,60) / 10.0),1) . "</temp-gt-4>" .
33:        "<temp-gt-5>" . number_format((rand(-20,60) / 10.0),1) . "</temp-gt-5>" .
34:        "<temp-gt-6>" . number_format((rand(-20,60) / 10.0),1) . "</temp-gt-6>" .
35:        "<temp-gt-7>" . number_format((rand(-20,60) / 10.0),1) . "</temp-gt-7>" .
36:        "<temp-gt-8>" . number_format((rand(-20,60) / 10.0),1) . "</temp-gt-8>" .
37:        "<temp-gt-9>" . number_format((rand(-20,60) / 10.0),1) . "</temp-gt-9>" .
38:        "</body></html>\n\n";
39: 
40:    flush();
41: 
42: }
43:   
44: $started_at = time();
45: do
46: {
47:     if(time() - $started_at > 600)
48:     {
49:         die();
50:     }
51:     
52:     send_message();
53:     usleep(100000);
54:     
55: } while (true);
56: 
57: //----------------------------------------------------------------------
58: // EOF
59: //----------------------------------------------------------------------
60: ?>
61: