Apache CordovaでSocket.IOを使う方法

こんにちは!ぐちです。

Socket.IO

簡単に言うと「リアルタイムWebアプリケーションを構築できる優れもの」です。リアルタイムWebを構築する手段としてはSocket.IO以外にもポーリングやComet、Web Socketなどがありますが様々な実装方法があり状況によって使い分ける必要があります。

Socket.IOはそれらの複雑さを排除し全てのブラウザ・デバイスでリアルタイム通信を可能とすることを目的として開発されているnode.js用サーバ側のライブラリとクライアント用Javascriptのライブラリのセットだそうです。

様々な手段の実装をラッピングしたSocket.IO APIが提供されており全てSocket.IO APIを通して実現することが可能です。

socket.ioのページでデモが見れます。

Apache Cordvaで使う

サーバサイド

まずはサーバサイドのコードです。一番シンプルな形で下記のようになります。

var server = require('http').createServer();
var io = require('socket.io')(server);

io.sockets.on('connection', function (socket) {
    console.log('socket connected');

    socket.on('disconnect', function () {
        console.log('socket disconnected');
    });

    socket.emit('text', 'wow. such event. very real time.');
});
server.listen(3000);
  • createServer関数でnode.jsのサーバを作成します。
  • io.socket.on(‘connection’, function(socket){})では接続時のイベントをハンドリングしています。
  • socket.on(‘desconnect’, function(){})では切断時のイベントをハンドリングしています。
  • socket.emit()はメッセージを送信する処理です。
  • server.listen()はコネクションを待ち受けるポート番号を指定します。

クライアントサイド

次はクライアントサイドのコードです。

index.htmlでcordova.jsを読み込んだ後にCDNを利用しsocket.ioのライブラリを読み込みましょう。

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="http://cdn.socket.io/socket.io-1.0.3.js"></script>
<script type="text/javascript" src="js/index.js"></script>

次にindex.jsなどdevice readyイベントをハンドリングしている箇所でサーバへ接続します。

document.addEventListener('deviceready', function() {
    var socket = io.connect('http://localhost:3000');
    socket.on('connect', function() {
      socket.on('text', function(text) {
        alert(text);
       });
     });
  });
  • io.connect()はサーバサイドのコードで指定したポート番号へアクセスするよう指定します。
  • socket.om(‘connect’, function(){})は接続時のイベントをハンドリングしています。
  • socket.on(‘text’, function(text){})はサーバで送信されたメッセージを受信したイベントをハンドリングしています。

たったこれだけのコードで簡易ではありますがSocket.IOを用いたリアルタイムWebアプリケーションがApache Cordovaでも実現することができます。

こういった技術の進歩によって”できること”が増え良質のサービスが増えていけばいいですね!末端ではありますが僕もそういったサービスを提供する側の世界にいるので非常に楽しみです!!