Monaca+node.js+socket.ioでWebsocketアプリを作る

最近はjavaばっかり使ってる気がしますが、

この手の記事は、ググってもあまり出ていないので書き留めておくことにしました。

つまりはPhonegap(cordova)なハイブリットアプリとnode.js鯖、socket.ioでWebsocketなアプリを簡単に作ろうということです。

Phonegap、大体はスタンドアローン(単体)で動くアプリの作り方や、ajaxを利用した通信なんかがほとんどなので。

そして、今回は構築環境が簡単で簡単にビルドもできるクラウド環境で動く cordova開発プラットフォームMonacaを使います。

サーバに関してはこれもクラウド環境で。開発環境構築までやってくれるサーバサイド開発プラットフォームCloud9使います。

サーバサイドプログラミングもクライアントサイドプログラミングも全部クラウド任せ。 今の時代開発は何から何まで全部クラウドで出来るんだよ。ローカルなんていらないんだよ？っていう目的の記事でもあります。

とりあえず、そもそもCordovaフレームワークでsocket.ioって使えるのかなと思っていたのですが、公式にすごくわかりやすい例がありました。 Socket.IO with Apache Cordova

これを見ると、クライアント側のsocket.io.jsは公式が用意されているCDNを使えばcordovaでも問題なく動くらしいですね。 <script src="https://cdn.socket.io/socket.io-1.3.5.js"></script> これで、ちゃんと動いてくれるのか試してみよう。 サーバ側のコード。socket.ioさえ使えればいいのでhttpサーバを立てる必要はありません。 process.env.PORTは、Cloud9で自動的にポートを振り分けてくれます。

var io = require('socket.io')(process.env.PORT);

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

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

    socket.emit('text', 'socket.io connect!');
});

クライアント側(monaca)に書くコード。省略してjsファイルだけです。

(function () {　//即時関数
    //接続先の指定
    var url = "test-potproject.c9.io"; //websocketサーバのURL。

    //接続
    var socket = io.connect(url);
    socket.on('connect', function() {
        socket.on('text',function(text){
            alert(text);
        });
     });
}());

接続できればアラートが表示されるだけの簡単なアプリです。PCのChromeではちゃんと動作しました。

しかし、本元はアプリなんで、AndroidやiOSで動くのか。 で、何故だが動かない。

WebViewだから動くと思ったのに。試した端末としてはAndroid4.4です。

対応してないってことはなさそうなんだけど・・・ で、試行錯誤したところ。WebsocketURLをws://test-potproject.c9.ioと記述しないと動きませんでした。

ブラウザの仕様の問題か・・・ Web技術はやりやすくてとてもいいのだが、ブラウザが違うと動かなくなったりするのでこのあたりにぶち当たると痛い。

Android4.4 Nexus7で試したところですが、すぐに動きました。ほかのブログには接続に5秒とか待たされるとか聞きましたが、問題なく。 この部分もブラウザと端末で差がかなりありそうです。

というか多分古いAndroidなんかでは動かないでしょうし・・・。

ネイティブJavaで記述されたsocket.ioのcordova pluginもありますが、古いのでこれはこれで最新版のsocket.ioで動くのか気になるところです。

---

ここから余談。 最近知りましたが、 プロトコルを省略して//blog.potproject.net/という風に書くこともできるらしいですね。 これも相対URLの一つだとか。ちゃんとしたものでクソ古いブラウザ以外は動作するらしいです。 つまり、画像を表示するには <img src="//blog.potproject.net/wp-content/uploads/2015/02/aapicture.png" /> と書けばよろしいと。 表示させてみる。 後にhttps対応させるとかならこういう方法もあるのね。と。