Posted at

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

More than 5 years have passed since last update.


はじめに

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);