Your SlideShare is downloading. ×
AndroidでWebSocket
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

AndroidでWebSocket

14,486
views

Published on

Published in: Technology

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
14,486
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
49
Comments
0
Likes
8
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. AndroidでWebSocket 2011/8/27  Android  Developers  Gig  in  KOBE kadoppe 1
  • 2. ⾃自⼰己紹介!  名前:kadoppe !  Twitter  twitter.com/kadoppe !  Blog  www.kadoppe.net!  職業:プログラマ(iOS,  Web,  etc.)!  HTML5-‐‑‒West.jp  コアメンバー!  PIRKA  プログラマー! about.me/kadoppe 2
  • 3. 僕とAndroid!  愛機 ! Xperia  x10  mini(ほぼ使ってない)!  Androidアプリ開発経験 !  なし 3
  • 4. ◆アジェンダ◆! WebSocketとは! WebSocketでできること! WebSocketでかわること!  ブラウザ対応状況!  AndroidでWebSocketを使う⽅方法 4
  • 5. ◆アジェンダ◆! WebSocketとは! WebSocketでできること! WebSocketでかわること!  ブラウザ対応状況!  AndroidでWebSocketを使う⽅方法 5
  • 6. WebSocketとは?!  Webブラウザ・サーバ間で双⽅方向通信 を実現するためのプロトコル!  元々はHTML5の仕様の⼀一部 !  後に切切り離離されて独⽴立立 6
  • 7. 双⽅方向通信!  サーバ・クライアントの両⽅方からデー タ送信可能 双⽅方向通信 7
  • 8. プロトコル概要(さらっと)!  TCPの上で動作(not  HTTP) !   ※⽣生のTCPパケットを送信できるわけではない!  80  or  443番ポートを使⽤用!  UTF-‐‑‒8の⽂文字列列  or  バイナリデータを送 信可能!  Webプロキシを通過可能 8
  • 9. ◆アジェンダ◆! WebSocketとは! WebSocketでできること! WebSocketでかわること!  ブラウザ対応状況!  AndroidでWebSocketを使う⽅方法 9
  • 10. リアルタイムWebの実現!  双⽅方向通信により実現!  リアルタイムWebの例例 !  チャット !  ホワイトボード共有 !  オンライン格闘ゲーム !  ネット電話 !  テレビ会議 10
  • 11. WebSocket  =  リアルタイムWeb を実現するための技術 11
  • 12. でも・・・ 12
  • 13. 昔からリアルタイムWebって あったよね? 13
  • 14. ◆アジェンダ◆! WebSocketとは! WebSocketでできること! WebSocketでかわること!  ブラウザ対応状況!  AndroidでWebSocketを使う⽅方法 14
  • 15. 従来の双⽅方向通信技術!  代表的なもの ! XMLHttpRequestによるPolling !  Comet(Long  Polling) ざっくりまとめると HTTPを使ってリアルタイムWeb を実現する技術 15
  • 16. HTTP  vs.  WebSocket 16
  • 17. HTTPを使う⽅方式!  複数のHTTPコネクションを使って通信 HTTPコネクション 17
  • 18. HTTPを使う⽅方式の問題点!  複数のHTTPコネクションを⽣生成 !  サーバの負荷が⾼高くなる !  トラフィックが増える サーバスペック、通信回線が貧弱な環境 では安定したサービスが提供しにくい 18
  • 19. WebSocket!  単⼀一のTCPコネクションで双⽅方向通信 TCPコネクション 19
  • 20. WebSocketの特徴!  単⼀一のコネクション上で通信 !  サーバの負荷が低くなる !  トラフィックが減る 従来よりも効率率率的・安定した双⽅方向通信 を実現可能! 20
  • 21. Demo! WebSocket  Comparison  with  http  |  Ericsson  Labs   http://www.youtube.com/watch?v=Z897fkPn7Rw 21
  • 22. アジェンダ! WebSocketとは! WebSocketでできること! WebSocketでかわること!  ブラウザ対応状況!  AndroidでWebSocketを使う⽅方法 22
  • 23. WebSocketの標準化!   The  WebSocket  Protocol !   通信プロトコルを定義 !   IETFにより策定中(2011/7/11  Last  Call)!   The  WebSocket  API !   ブラウザから利利⽤用するJavaScript  APIを定義 !   W3Cにより策定中 23
  • 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. ブラウザ対応状況  (モバイル)プロトコル iOS Android BrackBerryhixie-‐‑‒76,   4.2 ⾮非対応 OS7hybi-‐‑‒00 ※デフォルトブラウザの場合 25
  • 26. ◆アジェンダ◆! WebSocketとは! WebSocketでできること! WebSocketでかわること!  ブラウザ対応状況!  AndroidでWebSocketを使う⽅方法 26
  • 27. Android標準ブラウザ⾮非対応!  Android標準ブラウザはWebSocketに ⾮非対応!  ではどうすれば・・? 27
  • 28. 残された道!  サードパーティのブラウザから利利⽤用 !  Opera  mini !  Firefox  7!  JavaのWebSocketライブラリを使って ネイティブアプリから利利⽤用 ! weberknecht  など 28
  • 29. Opera  mini!  Opera  mini  11.0以降降のバージョン !  hybi-‐‑‒00に対応!  デフォルトでは無効 !  セキュリティへの配慮 ! opera:config→User  prefs→Enable   WebSockets  にチェックを⼊入れて有 効化 29
  • 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. DemoWebSocketを使った既存のWebチャットに接続 31
  • 32. Firefox  7!  2011/8/27現在、Android  Marketに 「Firefox  Beta」という名前で公開中!  ただしベンダープレフィックス付き 32
  • 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. Demoなし。Xperia  miniにFirefoxをインストールできず 34
  • 35. weberknecht!  Javaによるクライアントライブラリ http://code.google.com/p/weberknecht/ !  hybi-‐‑‒00に対応 !  hybi-‐‑‒10  (最新仕様)  の対応作業も進 ⾏行行中!  Webアプリではなくネイティブアプリ から使う 35
  • 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. DemoWebSocketを使った既存のWebチャットに接続 37
  • 38. まとめ! WebSocket !   リアルタイムWebを実現するためのプロトコル !   従来の⽅方式よりも効率率率的な通信が⾏行行える!   AndroidでWebSocket !   デフォルトのブラウザからは現状利利⽤用不不可 !   サードパーティのブラウザから利利⽤用 !   ネイティブアプリから利利⽤用!   意外とカンタン! !   Letʼ’s  try!! 38
  • 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