Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

最近、リアルタイムWebが面白い

821 views

Published on

2013-07-20開催の「第26回オープンラボ岡山」のセッション資料
http://local.aguuu.com/events/19055

Published in: Technology
  • Be the first to comment

  • Be the first to like this

最近、リアルタイムWebが面白い

  1. 1. • • • • • •
  2. 2. • • • • • • •
  3. 3. olojp.net • • •
  4. 4. • •
  5. 5. • • • •
  6. 6. “ ”
  7. 7. • サーバの変化 リアルタイム
  8. 8. • • ※イメージと概念です。 (実際に、これから説明するような仕組みに準じているかは知りません:p)
  9. 9. • bit.ly/olo26-3
  10. 10. • shootr.signalr.net
  11. 11.
  12. 12. • • • Request 「データくださいな!」 Response 「はい、どうぞ!」 クライアント サーバ
  13. 13. • 「データをどうぞ」 クライアント サーバ
  14. 14.
  15. 15. • • • 「変更ある?」 「ない」 「変更ある?」 「あったよ!」 クライアント サーバ
  16. 16. • • • • • •
  17. 17. • • • •
  18. 18. • •
  19. 19. タイムアウトを長くし、 応答を保留 「変更ある?」 「今んとこない」 「変更ある?」 クライアント 「キタコレ」 サーバ 変更があったら即、 応答
  20. 20. • • • • • • • • • •
  21. 21. • • •
  22. 22. WebSocketの コネクション作成 クライアント お互い、 任意のタイミングで サーバ 通信を投げる
  23. 23. • •
  24. 24. var ws; // 接続 ws = new WebSocket('ws://hoge.server.com/ServerApp/'); // 通信が来た時の処理 ws.onmessage = function(e) { // サーバから通信が来た時の処理を書く alert(e.data); }; // データの送信(sentDataに送るデータが入ってるとして) ws.send(sentData);
  25. 25. • • • • • • • •
  26. 26. • • • • • •
  27. 27. • • • • • •
  28. 28. • • • •
  29. 29. • • • • • • •
  30. 30. • • • •
  31. 31. • • • • • •
  32. 32. • • •
  33. 33. • •
  34. 34. • • • • • • •
  35. 35. 全部つなげてリアルタイム通信できるとか、楽しくない??

×