Socket.IOを使ったスマホ用のサイトを作る上での問題点と対応

はじめに

Socket.IOを使ったスマホ向けSPA(Single Page Application)のサイトSmartFXを運用している際に気づいたことについてまとめてみました。

#Android標準ブラウザがloadingのままになる

理由

初期処理中のpollingにより読み込み途中と判断されるため。

対応

setTimeoutに0を指定して初期処理とタイミングをずらす

setTimeout(function(){io.connect(url)},0)

Android標準ブラウザがSocket.IO 1.0のサーバと接続できない

理由

pollingが上手く動いていない

対応

JSONPを強制

io.connect(url,{forceJSONP:true})

Socket.IO 1.0だとiPhoneのloading indicatorがクルクルしっぱなし

理由

WebサーバとSocket.IOサーバのURLが違う状態でwebsocketとxhrを同時接続するとiOSのsafariで上記現象になってしまう．
0.9の場合は接続順番がwebsocket -> xhrのだったため条件が発生しなかったが，1.0からxhr -> websocketになったため発生するようになった。

対応

iOSの場合にwebsocketを強制

io.connect(url,{transports:["websocket"]})

まとめ

上記を踏まえると下記のようなコードになります。

setTimeout(function(){
  var socket = null;
  if(/iPhone|iPod|iPad/i.test(navigator.userAgent)){
    socket = io.connect(socket_io_url,{transports: ["websocket"]});
  }else{
    socket = io.connect(socket_io_url,{forceJSONP: true});
  }
  socket.on('connect', function(){
    socket.emit("message","Hello World!");
    socket.on('reply', function(msg){
      console.log(msg);
    });
  });
},0);