javascriptnode.jshttpar.drone

Repeatedly sending PNGs to a server. I want to tell the incoming browser to refresh on a timer


Every few seconds, my code is writing a png to a http server. I'd like to include (through browser-side javascript or a header or something) some sort of marker that will make the browser automatically refresh every 500ms.

Alternatively, I'd like to just automatically update the page so the client doesn't need to refresh. How would I do either of these?

var arDrone = require('ar-drone');
var http    = require('http');

console.log('Connecting png stream ...');


var client = arDrone.createClient();
var pngStream = client.getPngStream();


var lastPng;
pngStream
  .on('error', console.log)
  .on('data', function(pngBuffer) {
    lastPng = pngBuffer;
  });
client.config('video:video_channel', 0);


var server = http.createServer(function(req, res) {
  if (!lastPng) {
    res.writeHead(503);
    res.end('Did not receive any png data yet.');
    return;
  }

  res.writeHead(200, {'Content-Type': 'image/png'});
  res.end(lastPng);
});

server.listen(8080, function() {
  console.log('Serving latest png on port 8080 ...');
});

Solution

  • Look into using websockets to push content to the webpage. Socket.io does a really good job at making websockets easy. With socket.io you can push data to the webpage, and then handle that data in the webpage with javascript.