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に負荷テストコード転がってるので、　　　　　やってみる