Server-Sent Eventsを試してみたよ

以前から気になっていたServer-Sent Eventsを試してみました。

index.js

var http = require('http'),
    router = require('http-router'),
    routes = new router;

routes
  .get('/', function(req, res, next) {
    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    });
    res.end([
      '<!DOCTYPE html>',
      '<meta charset="utf-8">',
      '<title>Server-Sent Events</title>',
      '<script>',
      'document.addEventListener("DOMContentLoaded", function() {',
      '  var EventSource = window.EventSource || window.MozEventSource,',
      '      es = new EventSource("/event");',
      '',
      '  es.onmessage = function(event) {',
      '    document.write("<p>" + event.data + "</p>");',
      '    (event.data === "end") && event.target.close();',
      '  };',
      '}, false);',
      '</script>'
    ].join('\n'));
  })
  .get('/event', function(req, res, next) {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });
    writeData();

    function writeData() {
      var count;

      writeData.count || (writeData.count = 0);
      count = writeData.count;

      if (count > 10) {
        res.write('data: end\n\n');
        return;
      }
      console.log(count);
      res.write('data: ' + String(count++) + '\n\n');
      writeData.count = count;
      setTimeout(writeData, 1000);
    }
  });

http.createServer(function(req, res) {
  if (!routes.route(req, res)) {
    res.writeHead(500);
    res.end();
  }
}).listen(80);

setup

$ npm install http-router
$ sudo `which node` index.js

試してみる

Firefox 18.0でがんばって試してたのですが、どうやらまともに動作しない模様。
Google Chrome 25.0 (dev channel)だと思った通りに動作してくれたのでChromeで確認しました。
確認と言ってもhttp://localhost/にアクセスすると1秒置きに数字が書かれていくだけなのですが。


でもまあ、疑似AJAXらしいのでWebSocket使った方がよいのかと……
でもこれはこれで使い道がありそうな感じではありますなー。


参考:
Server-Sent Eventsの利用(1/5):JavaScriptによるHTML5プログラミング入門 - libro
Node.jsでServer-Sent Eventsを使ってみた : swdyh