AndroidでWebSocket

17,467 views

Published on

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

No Downloads
Views
Total views
17,467
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
53
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

AndroidでWebSocket

  1. 1. AndroidでWebSocket 2011/8/27  Android  Developers  Gig  in  KOBE kadoppe 1
  2. 2. ⾃自⼰己紹介!  名前:kadoppe !  Twitter  twitter.com/kadoppe !  Blog  www.kadoppe.net!  職業:プログラマ(iOS,  Web,  etc.)!  HTML5-‐‑‒West.jp  コアメンバー!  PIRKA  プログラマー! about.me/kadoppe 2
  3. 3. 僕とAndroid!  愛機 ! Xperia  x10  mini(ほぼ使ってない)!  Androidアプリ開発経験 !  なし 3
  4. 4. ◆アジェンダ◆! WebSocketとは! WebSocketでできること! WebSocketでかわること!  ブラウザ対応状況!  AndroidでWebSocketを使う⽅方法 4
  5. 5. ◆アジェンダ◆! WebSocketとは! WebSocketでできること! WebSocketでかわること!  ブラウザ対応状況!  AndroidでWebSocketを使う⽅方法 5
  6. 6. WebSocketとは?!  Webブラウザ・サーバ間で双⽅方向通信 を実現するためのプロトコル!  元々はHTML5の仕様の⼀一部 !  後に切切り離離されて独⽴立立 6
  7. 7. 双⽅方向通信!  サーバ・クライアントの両⽅方からデー タ送信可能 双⽅方向通信 7
  8. 8. プロトコル概要(さらっと)!  TCPの上で動作(not  HTTP) !   ※⽣生のTCPパケットを送信できるわけではない!  80  or  443番ポートを使⽤用!  UTF-‐‑‒8の⽂文字列列  or  バイナリデータを送 信可能!  Webプロキシを通過可能 8
  9. 9. ◆アジェンダ◆! WebSocketとは! WebSocketでできること! WebSocketでかわること!  ブラウザ対応状況!  AndroidでWebSocketを使う⽅方法 9
  10. 10. リアルタイムWebの実現!  双⽅方向通信により実現!  リアルタイムWebの例例 !  チャット !  ホワイトボード共有 !  オンライン格闘ゲーム !  ネット電話 !  テレビ会議 10
  11. 11. WebSocket  =  リアルタイムWeb を実現するための技術 11
  12. 12. でも・・・ 12
  13. 13. 昔からリアルタイムWebって あったよね? 13
  14. 14. ◆アジェンダ◆! WebSocketとは! WebSocketでできること! WebSocketでかわること!  ブラウザ対応状況!  AndroidでWebSocketを使う⽅方法 14
  15. 15. 従来の双⽅方向通信技術!  代表的なもの ! XMLHttpRequestによるPolling !  Comet(Long  Polling) ざっくりまとめると HTTPを使ってリアルタイムWeb を実現する技術 15
  16. 16. HTTP  vs.  WebSocket 16
  17. 17. HTTPを使う⽅方式!  複数のHTTPコネクションを使って通信 HTTPコネクション 17
  18. 18. HTTPを使う⽅方式の問題点!  複数のHTTPコネクションを⽣生成 !  サーバの負荷が⾼高くなる !  トラフィックが増える サーバスペック、通信回線が貧弱な環境 では安定したサービスが提供しにくい 18
  19. 19. WebSocket!  単⼀一のTCPコネクションで双⽅方向通信 TCPコネクション 19
  20. 20. WebSocketの特徴!  単⼀一のコネクション上で通信 !  サーバの負荷が低くなる !  トラフィックが減る 従来よりも効率率率的・安定した双⽅方向通信 を実現可能! 20
  21. 21. Demo! WebSocket  Comparison  with  http  |  Ericsson  Labs   http://www.youtube.com/watch?v=Z897fkPn7Rw 21
  22. 22. アジェンダ! WebSocketとは! WebSocketでできること! WebSocketでかわること!  ブラウザ対応状況!  AndroidでWebSocketを使う⽅方法 22
  23. 23. WebSocketの標準化!   The  WebSocket  Protocol !   通信プロトコルを定義 !   IETFにより策定中(2011/7/11  Last  Call)!   The  WebSocket  API !   ブラウザから利利⽤用するJavaScript  APIを定義 !   W3Cにより策定中 23
  24. 24. ブラウザ対応状況  (PC)プロトコル IE Firefox Chrome Safari Opera hixie-‐‑‒75 4 5.0.0hixie-‐‑‒76,   4(無効) 6 5.0.1 11(無効)hybi-‐‑‒00 6 hybi-‐‑‒07 (Prefix付き) HTML5   hybi-‐‑‒09 Labs hybi-‐‑‒10 7 14(Last  Call) (Prefix付き) ※プロトコルの各リビジョン間の互換性はない。 24
  25. 25. ブラウザ対応状況  (モバイル)プロトコル iOS Android BrackBerryhixie-‐‑‒76,   4.2 ⾮非対応 OS7hybi-‐‑‒00 ※デフォルトブラウザの場合 25
  26. 26. ◆アジェンダ◆! WebSocketとは! WebSocketでできること! WebSocketでかわること!  ブラウザ対応状況!  AndroidでWebSocketを使う⽅方法 26
  27. 27. Android標準ブラウザ⾮非対応!  Android標準ブラウザはWebSocketに ⾮非対応!  ではどうすれば・・? 27
  28. 28. 残された道!  サードパーティのブラウザから利利⽤用 !  Opera  mini !  Firefox  7!  JavaのWebSocketライブラリを使って ネイティブアプリから利利⽤用 ! weberknecht  など 28
  29. 29. Opera  mini!  Opera  mini  11.0以降降のバージョン !  hybi-‐‑‒00に対応!  デフォルトでは無効 !  セキュリティへの配慮 ! opera:config→User  prefs→Enable   WebSockets  にチェックを⼊入れて有 効化 29
  30. 30. 使い⽅方  (JavaScript)! WebSocketインスタンスの⽣生成var ws = new WebSocket(“ws://example.com/chat/”);!!   イベントハンドラの登録ws.onopen = function() {};!ws.onclose = function() {};!ws.onmessage = function() {};!ws.onerror = function() {};!!   データ送信・切切断ws.send(message);!ws.close();! 30
  31. 31. DemoWebSocketを使った既存のWebチャットに接続 31
  32. 32. Firefox  7!  2011/8/27現在、Android  Marketに 「Firefox  Beta」という名前で公開中!  ただしベンダープレフィックス付き 32
  33. 33. 使い⽅方  (JavaScript)! WebSocketインスタンスの⽣生成var ws = new MozWebSocket(“ws://example.com/chat/”);!!   イベントハンドラの登録ws.onopen = function() {};!ws.onclose = function() {};!ws.onmessage = function() {};!ws.onerror = function() {};!!   データ送信・切切断ws.send(message);!ws.close();! 33
  34. 34. Demoなし。Xperia  miniにFirefoxをインストールできず 34
  35. 35. weberknecht!  Javaによるクライアントライブラリ http://code.google.com/p/weberknecht/ !  hybi-‐‑‒00に対応 !  hybi-‐‑‒10  (最新仕様)  の対応作業も進 ⾏行行中!  Webアプリではなくネイティブアプリ から使う 35
  36. 36. 使い⽅方  (Java)! WebSocketインスタンスの⽣生成URI url = new URI("ws://127.0.0.1:8080/test");
WebSocket websocket = new WebSocketConnection(url);
!!   イベントハンドラの登録websocket.setEventHandler(new WebSocketEventHandler() {
    public void onOpen() {}
    public void onMessage(WebSocketMessage message) {}
    public void onClose() {}
});!!   接続・データ送信websocket.connect();
websocket.send(message);
! 36
  37. 37. DemoWebSocketを使った既存のWebチャットに接続 37
  38. 38. まとめ! WebSocket !   リアルタイムWebを実現するためのプロトコル !   従来の⽅方式よりも効率率率的な通信が⾏行行える!   AndroidでWebSocket !   デフォルトのブラウザからは現状利利⽤用不不可 !   サードパーティのブラウザから利利⽤用 !   ネイティブアプリから利利⽤用!   意外とカンタン! !   Letʼ’s  try!! 38
  39. 39. 参考資料料!  今⽇日使ったデモのソースコード https://github.com/kadoppe/websocket-‐‑‒on-‐‑‒android-‐‑‒sample!  The  WebSocket  protocol http://tools.ietf.org/html/draft-‐‑‒ietf-‐‑‒hybi-‐‑‒ thewebsocketprotocol-‐‑‒10!  The  WebSocket  API http://dev.w3.org/html5/websockets/ 39
  40. 40. ご清聴ありがとうございました。 40

×