The following illustrates how to update an SVG embeded in XHTML when new information is available on the server (aka COMET style). The trick is to querry the Server in a “long poll” through an XMLHttpRequest and then wait until Server has the new info ready. In this Example the delayed info is a new time string from the server after a REST style querry to the exposed “sleep” function of the CherryPy server.
The resulting app will be served under http://localhost:8080/xhr
and should show a rotating clock with the time send from the server
like seen here:
#!/usr/bin/env python
# -*- coding: utf-8 -*-
import cherrypy
import time
__author__ = 'Stephan Nies'
server = 'localhost'
class Comet(object):
"""CherryPy for Comet-style asynchronous communication through XMLHttpRequest"""
@cherrypy.expose
def xhr(self):
xhtml="""<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<script type="text/javascript">
function sendToServer(url){
try{
var http = new XMLHttpRequest();
var url = url;
http.open("GET", url, false);
http.send(null);
return http.responseText;
}
catch(ex){
throw ex;
}
}
function time(sec){
return sendToServer("http://%s:8080/sleep/"+sec);
}
function update(x) {
if (x > 360) {
x = 0;
}
x = x + 6;
t = time(5);
document.getElementById("txt").firstChild.textContent = t;
document.getElementById("clock").setAttribute("transform", "rotate("+x+",200,200)");
setTimeout("update("+x+")", 100);
}
</script>
<head>
<title>SVG clock with time by server side comet</title>
</head>
<body onload="update(0)">
<svg width="600px" height="400px" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="MyClock">
<rect x="0" y="0" rx="20" ry="20" width="250" height="100"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
<text id="txt" x="15" y="56"
style="font-family:Verdana;font-size:16px"> It's SVG! </text>
</g>
</defs>
<use id="clock" x="50" y="150" xlink:href="#MyClock" />
</svg>
</body>
</html>
"""
cherrypy.response.headers['Content-Type'] = 'application/xhtml+xml'
return xhtml % server
@cherrypy.expose()
def sleep(self, sec):
sec = float(sec)
time.sleep(sec)
return str(time.ctime(time.time()))
cherrypy.config.update({
'log.screen':True,
'tools.sessions.on': True,
'checker.on':False
})
cherrypy.server.socket_host = server
cherrypy.tree.mount(Comet(), config=None)
cherrypy.engine.start()
cherrypy.engine.block()
Please note that this code uses only standard conform technologies like XHTML, JavaScript and SVG and therefore should work without plugins on any standard conform Browser (tested on Firefox 3.0.12 and Safari 4.0.2). In other words: This Code doesn’t work in any Internet Explorer available to date (<= IE8).
)
