Node.js(3) socket.io

前回作ったNode.jsのWebアプリは、クライアント(ブラウザ)からのリクエストを受けて結果を返す昔ながらの静的なWebスタイルなので、Raspberry Piをサーバとしてリアルタイムにセンサの値を表示させたいといった用途にはあまり向いていない。
JavaScriptを使ってブラウザから定期的にhttpリクエストを送信する事で、リアルタイム性のあるWebアプリを実現する方法は既に広く使われているが、最近ではWebサーバとブラウザ間で直接コネクションして通信を行うWebSocketの規格が登場し、Node.jsでも簡単に使えるようなので試してみた。

Webアプリの機能としては前回と同じくブラウザからの操作でRaspberry PiのLEDをOn/Offするだけだが、リクエストはsocket.ioで送信してレスポンスもsocket.ioのイベントとして受け取る。これによって複数のブラウザから同時にRaspberry Piに接続した場合、どれかがLEDの状態を変えた時に全てのクライアントがその変化をリアルタイムに知ることができる。

プロジェクトの全コードは前回と同じくGitHubに置いた

順番に見ていこう。まずexpressフレームワークで自動生成したプロジェクトのpackage.jsonに、GPIO操作とscoket.ioのパッケージ定義を追加した。

{
  "name": "led_io",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.12.0",
    "cookie-parser": "~1.3.4",
    "debug": "~2.1.1",
    "ejs": "~2.3.1",
    "express": "~4.12.2",
    "morgan": "~1.5.1",
    "serve-favicon": "~2.2.0",
    "onoff": "~1.0.2",
    "socket.io": "^1.3.5"
  }
}

アプリケーションのエントリポイント”/bin/www”で、サーバオブジェクト生成後にsocket.io用のオブジェクト作成と呼び出しを追加。ここは分けずにwwwに直接コードを追加しても良かったのだが、見通しを良くするためにこうした。

var server = http.createServer(app);
var sock = require('../sock'); // 追加
sock(server); // 追加

socket.io用オブジェクトの処理は、クライアントから接続されてイベントを受信した時、パラメータに従ってLEDをOn/Offしてから、その状態を全てのクライアントに対して送信する。

var io = require('socket.io');  
var gpio = require('onoff').Gpio;
var led = new gpio(17, 'out');

function sock(server) {
  var sock = io.listen(server);
  sock.sockets.on('connection', function(socket) {
    socket.on('event', function(data) {   // クライアントからのイベント受信
      console.log('socket id: [' + socket.id + '] data: ' + data.onoff);
      if (data.onoff == 'on') {
        led.writeSync(1);
        sock.sockets.emit('event', { onoff: 'on' });  // 全てのクライアントへ送信
        // 送信元にだけ送信する場合は
        // socket.emit を使う
        // 送信元以外の全てに送信する場合は
        // socket.broadcast.emit を使う
      }
      if (data.onoff == 'off') {
        led.writeSync(0);
        sock.sockets.emit('event', { onoff: 'off' }); // 全てのクライアントへ送信
      }
    });
    socket.on('disconnect', function() {  // 切断
      console.log('disconnect id: [' + socket.id + ']');
    });
  });
}

module.exports = sock;

コメントにもあるように、サーバからクライアントへの送信は、全てのクライアント、イベントを送信したクライアント、イベントを送信したクライアントを除く全て。に対して行うことができる。
今回は使用しなかったが、クライアントをルームに分けて、同じルームに入っているクライアントにだけ送信する事もできる。
サーバ側のコードとしてはこれで終わり。次はクライアント側を見ていこう。
続きを読む »