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

31. Demo
WebSocketを使った既存の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. Demo
WebSocketを使った既存の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