Your SlideShare is downloading. ×
0
Socket.io slideshare エンジニア勉強会20140122
Socket.io slideshare エンジニア勉強会20140122
Socket.io slideshare エンジニア勉強会20140122
Socket.io slideshare エンジニア勉強会20140122
Socket.io slideshare エンジニア勉強会20140122
Socket.io slideshare エンジニア勉強会20140122
Socket.io slideshare エンジニア勉強会20140122
Socket.io slideshare エンジニア勉強会20140122
Socket.io slideshare エンジニア勉強会20140122
Socket.io slideshare エンジニア勉強会20140122
Socket.io slideshare エンジニア勉強会20140122
Socket.io slideshare エンジニア勉強会20140122
Socket.io slideshare エンジニア勉強会20140122
Socket.io slideshare エンジニア勉強会20140122
Socket.io slideshare エンジニア勉強会20140122
Socket.io slideshare エンジニア勉強会20140122
Socket.io slideshare エンジニア勉強会20140122
Socket.io slideshare エンジニア勉強会20140122
Socket.io slideshare エンジニア勉強会20140122
Socket.io slideshare エンジニア勉強会20140122
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

627

Published on

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

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

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

No Downloads
Views
Total Views
627
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×