Node.jsを使ってWebSocketで定期的にサーバーからブラウザにプッシュする

チャットアプリとかでよくある「誰かの発言をトリガーとする」方法ではなくて、トリガーとするのはサーバー側のインターバルタイマーです。例えばお知らせとかを一斉配信するときに使う感じでしょうか。

サーバーサイドとクライアントサイド、両方書くので長くなりそう。

WebSocketにwsというモジュールを使います。以下のコマンドでインストールします。あ、Node.jsはインストールされてる前提です。

npm install ws

で、サーバ側のコードが以下

var _server = require('ws').Server;
var _ws = new _server({
    host: '0.0.0.0',
    port: 9999
});

publish();

function publish(){
  setInterval (function(){

    var _now = new Date();
    var _data = new Object();
    _time = _now.getHours() + ':' + _now.getMinutes() + ':' + _now.getSeconds()
    _data['now'] = _time;

    _ws.clients.forEach(function(client) {
      client.send(JSON.stringify(_data));
    });
  }, 1000);
}

9999番ポートで待ってます。Objectを作って、JSON.stringifyでJSONに変換して返却してます。WebSocketなので9999番ポートをブラウザで開いてもなにも表示されません。

で、次にクライアントサイド。

<script type="text/javascript">
  var connection = new WebSocket('ws://localhost:9999', ['soap', 'xmpp']);
  connection.onmessage = function (e) {
    var _data = JSON.parse(e.data);
    console.log(_data.now);
  };
</script>

Chromeでしか試してません。IE10で動くのかなぁ。

0:12:33
0:12:34
0:12:35
0:12:36
0:12:37
0:12:38
0:12:39
0:12:40
0:12:41

コンソールにこんな感じで出力されます。

更新頻度が高くて全部をプッシュしてると大変なことになったりしそうなときにはこうやって定期的にプッシュしたほうが効率がいいのでは、と思って調べてみたのでした。いやー、動いてよかったよかった。