- Offline
- WebSocket
- Canvas
That's really amazing because you could define which parts of your page should be available offline/cached (incl. scripts and css of course).
The manifest file of my demo page was really simple and looked like this...
CACHE MANIFEST
# rev 5
/demo/canvas.html
/demo/js/steelseries-min.js
/demo/js/tween-min.js
Important to know is that the manifest file has to start with the words "CACHE MANIFEST" and if you would like to refresh the cache you have to modify the manifest file. Because it's versioned by it's bytes you could also add a simple comment (like i did "# rev 5") and change the comment which leads to a refresh of the cached parts of your page.
Ok, that's easy but why did i create this page...?
To explain this i need to explain the whole idea of the demo first. So i would like to be able to demonstrate a websocket connection and i would like to use the gauges of my steelseries library. So the library was meant to be used to visualize sensor data...so i only need a sensor right...?
Why not use the sensors of my htc desire smartphone and use the gauge to visualize it...?
To make this possible i need to put the computer with the browser (where the gauge is running) in the same network as the Android cellphone which is possible using an adhoc network.
So these are the steps i need for the setup of the demo:
- Create a AdHoc network on my Macbook Pro
- Connect the HTC Desire to the AdHoc network
- Start a node.js server on the Macbook Pro that listens on the UDP port where the data will come in and forward the data via websocket
- Start a Kaazing Gateway that makes it possible to forward the websocket to specified addresses
Now the real fun part of the demo was that i could add more computers to the AdHoc network of the Macbook Pro and visualize the sensor data of the cellphone on them too.
If you could follow so far you might now know why i had to cache the website with the gauge...yes...because in the moment i connect the other computers to the AdHoc network of the Macbook Pro they won't be able to load the page from the internet anymore...but from their cache they could... :-)
I created a little video to give you an idea of the functionality...
It's not the very best video but i was not sure how to give you an impression about the setup. So on the video you will see the following devices...
- Macbook Pro (running node.js, Kaazing Gateway and Chrome)
- iPad2 (running the demo on Safari mobile)
- Win7 Netbook (running the demo on Chrome)
- G5 Powermac (running the demo on Safari)
If you ask yourself how you could connect node.js to udp and forward the websocket via Kaazing Gateway i would strongly recommend to take a look at the blog of Matthias Wessendorfs blog (twitter: @mwessendorf), where he described how get this up and running.
The presentation was splitted into two parts, a pdf and a html5 page. Please find the links to the documents here...
PDF presentation
HTML5 presentation
Please keep that the WebSocket part of the html5 presentation won't work without the setup i described above. For the DeviceOrienation part i recommend a Macbook (Pro) in combination with Chrome to see something in motion.
In addition i have to mention that the webworker part will work best in Firefox5, in Chrome it seems to have problems (don't ask me why).
That's it so far for today...
This is very cool! Could you post the node.js code etc.. for this. It is exactly what I am looking for!!
ReplyDeleteThank you,
Mike
Hi Anonymous,
ReplyDeletenot sure if this will really help you but here is the node.js code that i used for the demo:
// Outgoing socket
var Buffer = require("buffer").Buffer;
var dgramOut = require("dgram");
var socketOut = dgramOut.createSocket("udp4");
// Incoming socket
var dgramIn = require("dgram");
var server = dgramIn.createSocket("udp4");
server.on("message", function(msg, rinfo) {
//console.log("got: " + msg + " from " + rinfo.address + ":" + rinfo.port);
var data = (msg.toString().substring(msg.toString().lastIndexOf(' '))).replace(',','.');
broadcastMsg(data);
});
server.on("listening", function() {
console.log("server listening " + server.address().address + ":" + server.address().port);
});
function broadcastMsg(msg) {
var buf = new Buffer(msg);
// Send data to localhost:55555 where Kaazing is waiting
socketOut.send(buf, 0, buf.length, 55555, "127.0.0.1");
socketOut.send(buf, 0, buf.length, 55555, "169.254.70.83");
socketOut.send(buf, 0, buf.length, 54321, "127.0.0.1");
//console.log('Sent ' + buf + ' to the browser...');
}
// Listen to IP of DataSource:169.254.70.83 on port:12345 for incoming udp packages
server.bind(12345, '169.254.70.83');
thank you!
ReplyDelete