Download - Socket.io slideshare エンジニア勉強会20140122
socket.ioとリアルタイムWeb2014.1.22
リアルタイムwebWebSocketsocket.ioコード例デモ今回の利用想定(プッシュ通知)リソースとかの話バージョンの話
今日の内容
リアルタイムwebリアルタイムwebは、インターネット上のユーザの書き込みや動向を、即時かつ大規模に他のユーザと共有する仕組みの総称。 by wiki
facebookやtwitterのアレ。
リアルタイムweb
クライアント・サーバ間の双方向通信 ・クライアント→サーバはajaxでもいい ・サーバ→クライアントのプッシュ通信 (とりわけリアルタイム性を高めたい場合)
WebSocket!!
http://www.lgtm.in/g
リアルタイムweb
WebSocketRFCで標準化されたアプリケーション層・通信プロトコル
XMLHttpRequest (Ajax)との違いは?
⇒ 双方向通信の際のコストが違います。
XMLHttpRequest : コネクション都度生成 WebSocket : コネクション生成は初回のみ
リアルタイムwebHttp Polling, JSONP Polling
http://codezine.jp/article/detail/7075
リアルタイムwebComet (HTTP Streaming, HTTP Long polling)
Apache Server ・ keep-alive ・ MaxClientsの制約をモロに受ける ..
http://codezine.jp/article/detail/7075
リアルタイムwebPlugin Socket
http://codezine.jp/article/detail/7075
リアルタイムwebWebSocket
http://codezine.jp/article/detail/7075
WebSocket
コネクション生成はこんな感じ
Client Server
time
Client
Server
自由にやり取りhttp://ja.wikipedia.org/wiki/WebSocket
WebSocket
http://www.websocket.org/echo.html
Socket.io
Socket.io = Node.js上で動作するライブラリ
WebSocketを利用して、リアルタイムWebを実現可能(WebSocketは通信プロトコルの選択肢の一つ)
http://nodejs.org/
Socket.io
ブラウザ対応が充実
http://socket.io/
コード例
サーバサイド
# socket.ioio = 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
コード例
クライアントサイド
// 接続時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);});
コード例
クライアントサイド
// 送信時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);
今回使う(かもしれない)ところ
例えばこんなやつ
http://ameblo.jp/ameba--customize/entry-11276330557.html
今回使う(かもしれない)ところ
指定のセグメントに対して実行する。 ⇒ コネクションの識別が必要
ストレージ(mongoDB)を利用して、ユーザ識別子とコネクションの識別子をマッピング
userId (unique) connectionId (unique) status
1 Zc5YSKMrfGhf active
2 E4ydv6F6h43Y active
3 jA8atTMjeLKi inactive
今回使う(かもしれない)ところ
施策判定
userId : xxconnId: yy
Client
Some Events
Server
------
socket
①
②
③
④⑤
DB
気を付けたいところ
リソース面
・ 結局TCP/IPの上の技術なので、 TCPコネクションを維持するために、 ファイルディスクリプタを消費する。
⇒ PV単位とかで生成するとメモリ死なないか怖い。 ⇒ チューニングとサイジングが重要 ⇒ githubに負荷テストコード転がってるので、 やってみる