Socket.io slideshare エンジニア勉強会20140122

1,188 views
999 views

Published on

1月22日に開催されたエスキュービズムエンジニア勉強会の資料です。

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,188
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Socket.io slideshare エンジニア勉強会20140122

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

×