ブラウザからはsocket.ioを使うことでリアルタイム同期が行えるようでした。
様々な環境がいろいろあってやっとchromeで動きました。
なぜかiPhoneでは動かなかったので、もう疲れました。
まずは最新版のhttp://socket.io/をインストールしたところ、
巷にあるサンプルとちょっと違っていました。
また、symfonyを使っているためjsの置き場所が決まっているために
web/jsに
node_modules/socket.io/node_modules/socket.io-client/dist
のsocket.io.jsをコピーしてきました。
以下
https://github.com/arshad/CrossBrowse
のサンプルを動かすところまでです。
当方なぜか3000ポートがうまく機能しなかったので8000ポートを使ってみました。
修正した箇所は
サーバ側
server.listen(8000);
//Socket for listening to connect
var io = io.listen(server);
io.on('connection', function(client){
//console.log(client.listener.clients.length);
//On each ping data taken from one socket and broadcast to other systems
client.on('message', function(message){
//var el = JSON.parse(message);
client.broadcast.send(message);
});
});
クライアントでJSON.parseするのでJSON.parseを殺しています。
また、broadcast.sendにしなければならなくなったみたいです。
emitとsendが明示的に必要になったように見受けられますがよくわかりません。
emitはメッセージを指定して送るsendはメッセージを自動で'message'にしてくれるみたいでした。
クライアント側（script.js）
var socket = io.connect(null,{port:8000});
socket.on('connect', function () {
socket.on('message', function(msg) {
var m = JSON.parse(msg);
$('#draggable').css({
left : m.x,
top : m.y
});
});
});
$(document).ready(function() {
$('h2').html($.browser.webkit);
var el = new Object();
$('#draggable').draggable({
drag : function(event, obj) {
var pos = $('#draggable').position();
el.x = pos.left;
el.y = pos.top;
socket.send(JSON.stringify(el));
}
});
});
以前は
var socket = new io.Socket(null,{port:8000});
socket.connect();
ってやっていたような記述を見るのですが
var socket = io.connect(null,{port:8000});
これでいいみたいです。
var socket = io.connect(null,{port:8000});
これでいいみたいです。
さらにurlが'http://localhost'つーのばっかり見るのですが
nullにすると、どうもこのjavascript自体を送信してくるサーバ側の情報がDOMに入ってくるみたいでそいつを勝手に取得してくれます。
つまり、http://amazon-ec2-test.comみたいな。
でポートのオプションはこうやって渡すみたいです。
肝心のxxxSuccess.php(twig使っているのでhtml)は以下のようになっています。
{{'socket.io.js'|use_javascript()}}
{{'json2.js'|use_javascript()}}
{{'script.js'|use_javascript()}}
<style type="text/css">
body {
background : url(../images/pattern.png) repeat;
overflow:hidden;
}
#draggable {
background:#FFF;
cursor:move;
width:300px;
height:100px;
position:absolute;
}
</style>
<body>
<h2></h2>
<div id="draggable"></div>
</body>
たしかにchrome同士では箱のドラッグが同期してくれました。
iPhoneだとそもそもサーバ側につながっていないようでサーバ側に接続が来ません。
さっぱりわかりません。
iPhoneに関しては社内Ｗｉｆｉの設定で8000ポートを空けていないので通信が出来なかっただけみたいです。
