リアルタイム Web 最前線 ~ Socket.IO & SignalR 徹底解説

10,509 views
10,310 views

Published on

これからの Web アプリケーションではリッチなインターフェースを実現するために、リアルタイムな通信が求められるようになります。
本セッションでは、リアルタイム Web アプリケーションを実現するために重要な Socket.IO と SignalR を時間の許す限り、全力で解説します。

Published in: Technology
0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,509
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
0
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide

リアルタイム Web 最前線 ~ Socket.IO & SignalR 徹底解説

  1. 1. リアルタイム Web 最前線~ Socket.IO & SignalR 徹底解説ソーシャルグリッド株式会社 取締役 CTOMicrosoft MVP for ASP.NET/IIS芝村 達郎http://shiba-yan.hatenablog.jp/
  2. 2. 2私について• 芝村 達郎、しばやん (@shibayan)• 26 歳• Microsoft MVP for ASP.NET/IIS• C# / ASP.NET MVC / ASP.NET SignalR
  3. 3. 3セッションのゴール• リアルタイム Web の概要を知る• 使われている技術を知る• Socket.IO と SignalR の違いを学ぶ• Socket.IO / SignalR それぞれの特徴を学ぶ• スケールアウトについて考える• 新時代の Web 開発トレンドを体感する• JavaScript、データバインディングも重要となる
  4. 4. 4リアルタイム Web とは?• Wikipedia 曰く• リアルタイム・ウェブ(Real-time web)は、インターネット上のユーザーの書き込みや動向を、即時かつ大規模に他のユーザーと共有する仕組みの総称。• 分かりやすい例• Facebook タイムラインのいいね!やコメント通知• メッセンジャー、チャットなどのコミュニケーションアプリ
  5. 5. 5技術的な面から考えてみる• クライアント・サーバ間での双方向通信が特徴• サーバ → クライアントへのプッシュ通信• でもクライアント → サーバへの通信は AJAX とかで良い• 技術的には WebSocket がメインとして使われている• Server-Sent Events とかもあるけど• Socket.IO や SignalR が最近では一般的(だと思う)• 複数トランスポートへの対応や、アプリケーションの開発に便利な機能を持つ
  6. 6. 6Socket.IORealtime application framework for Node.JS, with HTML5WebSockets and cross-browser fallbacks support.
  7. 7. 7Socket.IO• Node.js 上で動作するライブラリ• ノンブロッキング I/O、シングルスレッド、イベントループ• 対応しているトランスポート• WebSocket• Adobe Flash Socket• AJAX long polling• AJAX multipart streaming• Forever Iframe• JSONP Polling
  8. 8. 8Socket.IO で開発する• Windows• WebMatrix の Node.js テンプレートを使うのが簡単• npm も WebMatrix の拡張機能として用意されている• Mac• MacPorts や homebrew を使って Node.js をインストール• npm を使って Socket.IO をインストール• お好きなエディタを使って開発してください :)
  9. 9. 9Socket.IO のクライアント• JavaScript• Java (Android 含む)• Lua• Objective-C (Mac / iOS)• C / C++• PHP• .NET• 他にもたくさん
  10. 10. 10SignalRIncredibly simple real-time web for .NET
  11. 11. 11SignalR• ASP.NET 上で動作するライブラリ• マルチスレッド、Task ベースの非同期処理、RPC• 対応しているトランスポート• WebSocket (WS2012 + .NET 4.5 の場合)• Server-Sent Events• Forever Frame• Long Polling
  12. 12. 12SignalR で開発する• Windows• Visual Studio 2012 (Express) の ASP.NET プロジェクトを使う• 作成したプロジェクトに NuGet でパッケージをインストール• Mac• GitHub からソースをダウンロードして、Mono でビルド• XSP や Apache + mod_mono で動かすことが出来る• 仮想マシンを使って Windows をインストール
  13. 13. 13SignalR のクライアント• JavaScript (jQuery)• .NET Framework 4 / 4.5• Silverlight 5• Windows Store アプリ• Windows Phone 8• Xamarin.iOS / Xamarin.Android• 将来的に C++ / .NET Micro Framework
  14. 14. 14Socket.IO と SignalR の比較• パフォーマンス• Socket.IO : シングルスレッド + クラスター化• SignalR : マルチスレッド• 設計思想• Socket.IO : イベントベース• SignalR : リモートプロシージャコール
  15. 15. 15Scale outScale out is hard…
  16. 16. 16スケールアウト• クライアント・サーバ間でコネクションを張りっ放し• CPU、メモリ、ポート番号などのリソースを消費• 1台のサーバで処理できるクライアントの最大数が決まる• 単純にサーバを増やすだけではスケールしない• クライアントがどのサーバに繋がっているのか、他のサーバからは確認が出来ない• WebSocket などを使っているアプリの制約
  17. 17. 17スケールアウトインスタンス0 インスタンス1メッセージングサーバ
  18. 18. 18スケールアウトの方法• Socket.IO と SignalR 共通• Pub / Sub メッセージングを利用する• (Redis や Windows Azure サービスバス)• Socket.IO• 接続情報をメモリではなく、外部のストレージに保存して共有• SignalR• 接続情報は共有せず、メッセージングに投げっぱなし
  19. 19. 19Redis と Windows Azure サービスバス• Socket.IO• RedisStore• SbStore• https://github.com/WindowsAzure/socket.io-servicebus• ※接続情報の共有が出来ないという制限あり• SignalR• Microsoft.AspNet.SignalR.Redis• Microsoft.AspNet.SignalR.ServiceBus• Microsoft.AspNet.SignalR.SqlServer
  20. 20. 20Etc
  21. 21. 21アプリ開発のヒント• リアルタイム Web アプリには双方向通信は必須ではない• サーバからのプッシュ通信だけでもアプリは作れる• 通信頻度を下げて、リソースの消費を抑える• 接続中のクライアント数に比例して通信量が増えてしまう• ビューの更新にデータバインディング可能なライブラリを利用する• コネクションを張りっ放しが望ましいので、ページ遷移は少ない
  22. 22. 22双方向通信は必須ではない• サーバからクライアントへ任意のタイミングでプッシュ通信が行えることが重要• 双方向通信を考えるとチャットしか浮かばない可能性が高い
  23. 23. 23通信頻度を下げる• underscore.js の throttle / debounce を使う• throttle: 指定された秒数に最大 1 回だけ実行• debounce: 呼び出し後、指定された秒数が経過したら実行connection.start(function () {shape.draggable({drag: _.throttle(function () {var offset = shape.offset();move.invoke("Send", offset.left, offset.top);}, 100)});});
  24. 24. 24データバインディング• Angular.js や knockout.js などのライブラリを利用する• ページ遷移を行わずに、DOM の操作で完結させたい• ビュー・モデルを用意して、DOM のメソッドを弄らない
  25. 25. 25実際に開発を行って感じたこと• リアルタイム性を生かせるアプリを考えるのが難しい• チャットは流石にありきたり過ぎて…• プッシュ通信、クライアントの同時接続を生かすことを考える• スケールアウトはかなり難しい• データの同期、トランザクション数など普通の Web アプリよりパフォーマンスに関して考慮する必要がある• SignalR はスケールアウト時のメモリリークで長期間悩まされた
  26. 26. 26今後の発展が期待される分野• 複数人でのリアルタイムコラボレーションサービス• 単なるチャットではなく、もっと包括的に扱えるように• 入退室管理といった既存のシステムと組み合わせる• Kinect やセンサーとの通信手段として利用する• センサーの情報は常に変化する → リアルタイム通信• Socket.IO は Arduino 向けのクライアントが公開されている• SignalR は .NET Micro Framework 向けクライアントが開発中• 鉄道模型のコントロールに利用する
  27. 27. 27おまけ:センサーを使うために• Arduino • Netduino
  28. 28. 28まとめSocket.IO や SignalR を使って今までは無かった面白いアプリを開発しよう!

×