Socket.io slideshare エンジニア勉強会20140122
•
2 likes•1,481 views
１月２２日に開催されたエスキュービズムエンジニア勉強会の資料です。
Recommended
More Related Content
More from エンジニア勉強会 エスキュービズム
More from エンジニア勉強会 エスキュービズム (20)
Socket.io slideshare エンジニア勉強会20140122
- 3. リアルタイムweb リアルタイムwebは、インターネット上のユーザの書き込みや動 向を、即時かつ大規模に他のユーザと共有する仕組みの総 称。 by wiki facebookや twitterのアレ。
- 6. リアルタイムweb Http Polling, JSONP Polling http://codezine.jp/article/detail/7075
- 7. リアルタイムweb Comet (HTTP Streaming, HTTP Long polling) Apache Server ・ keep-alive ・ MaxClients の制約をモロに受ける .. http://codezine.jp/article/detail/7075
- 14. コード例 サーバサイド # socket.io io = require('socket.io').listen(config.SOCKET_PORT); io.sockets.on 'connection', (socket) -> socket.on 'message', (message) -> obj = JSON.parse(message) message = obj.coord + ':' + socket.id; socket.emit("message", message) socket.broadcast.emit("message", message) socket.on 'disconnect', () -> # nothing to do
- 15. コード例 クライアントサイド // 接続時 var socket = io.connect(CONFIG.SOCKET_HOST); // 受信時 socket.on('message', function (msg){ var data = msg.split(':'), userId = data[2], // マウスカーソルを動かしたユーザの識別子 position = [data[0], data[1]], // マウスカーソルの座標 page_url = data[3]; // マウスカーソルを動かしたユーザのマウスカーソルを自分の画面に描画する renderCursor(userId, position, page_url); });
- 16. コード例 クライアントサイド // 送信時 var handler = function (event) { var x, y, window = $(document); x = event.pageX / window.width(); y = event.pageY / window.height(); var send_data = {"coord": [x, y].join(":"), "page_url": page_url}; socket.send(JSON.stringify(send_data)); }; // イベントハンドラを設定 $(document).mousemove(handler);