![[HIGOBASHI.AWS] AWSでソフトウェアVPNを使う-キホンの「キ」-](https://cdn.slidesharecdn.com/ss_thumbnails/higobashi-180525012318-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Similar to AndroidでWebSocket (20)
More from Kohei Kadowaki (15)
AndroidでWebSocket
- 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.0 hixie-‐‑‒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 BrackBerry hixie-‐‑‒76, 4.2 ⾮非対応 OS7 hybi-‐‑‒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
- 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
- 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
- 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