1. Javaプログラマのための
WebSocket概要
2013/1/31 Java ♡ HTML5 Night
株式会社オープンウェブ・テクノロジー
白石 俊平（@Shumpei）

2. 自己紹介
 白石俊平と申します。
 HTML5開発者コミュニティhtml5j.org管理人（会員
数5,000名超）
 HTML5とか勉強会主催（毎月一回、100名を動員）
 Google API Expert (HTML5)
 Microsoft Most Valuable Professional (IE9)
 Twitter: @Shumpei
 著書：HTML5&API入門

3. WebSocketとは何か？

4. WebSocketとは何か？
 リアルタイム・ウェブをもたらす技術として
非常に期待されている
 実態は、TCP上に構築された双方向のソケッ
ト通信プロトコル
 HTTPをベースにしているため、Webとの親和
性が非常に高い
 Webブラウザからの利用を主眼としている
 ファイアウォールを超えられる

5. WebSocketの動作原理
1. 通常のHTTP GETリクエストを用いて、サーバ
に接続
2. サーバがWebSocketに対応していれば、その接
続をそのままWebSocketの通信経路として「張
りっぱなし」にする。
Server Server
TCP
TCP
HTTP 双方向
GET 接 通信 接
続 続

6. クライアントとサーバの対称性
 一度接続が確立してしまえば、クライアントと
サーバの間で役割やできることの違いはほとんど
ない
・テキスト送受信
・バイナリ送受信
・通信の圧縮
・ping
・...
クライアント サーバ

7. WebSocketの利用例
 オンライン黒板

8. WebSocketの利用例
 BrowserQuest

9. WebSocketの利用例
 Technitone

10. 技術面から見たWebSocket

11. 仕様
 プロトコル
 IETFにより標準化（RFC6455）
 JavaScript API
 W3Cにより標準化（The
WebSocket API）
 勧告候補というステータス

12. WebSocketのエンドポイント
 URL・・・ws://もしくはwss://で始まる
 ポート・・・80番(ws)/443番(wss)

13. WebSocketハンドシェイク
 Upgradeヘッダ付きのGETリクエストに対し、
サーバが「101 Switching Protocols」で応答す
れば、接続確立
GET /chat HTTP/1.1 HTTP/1.1 101 Switching Protocols
Host: server.example.com Upgrade: websocket
Upgrade: websocket Connection: Upgrade
Connection: Upgrade Sec-WebSocket-Accept: YYY
Sec-WebSocket-Key: XXX Sec-WebSocket-Protocol: chat
Origin: http://example.com
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Version: 13

14. フレームフォーマット
 6-14バイトの小さなヘッダを付与
 ペイロード長は最大2^64バイト
バイト長
1 2 3 4
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
R R R M
S S S A
FI V V V S
N 1 2 3 opcode K ペイロード長 拡張ペイロード長（ペイロード長が126の場合）
拡張ペイロード長（ペイロード長が127の場合）
拡張ペイロード長（ペイロード長が127の場合） マスクキー
マスクキー データ本体
データ本体…

15. プロトコルの拡張が可能
 圧縮やマルチプレクサなどの拡張が提案され
ている
GET /chat HTTP/1.1 HTTP/1.1 101 Switching Protocols
Host: server.example.com Upgrade: websocket
Upgrade: websocket Connection: Upgrade
Connection: Upgrade Sec-WebSocket-Extensions: deflate-
Sec-WebSocket-Key: XXX frame
Origin: http://example.com Sec-WebSocket-Accept: YYY
Sec-WebSocket-Extensions: deflate-frame Sec-WebSocket-Protocol: chat
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Version: 13

16. サブプロトコル
 WebSocketは、接続確立後はシンプルなTCP
ソケット通信とみなすことが可能。
 →WebSocket上で新たなプロトコルが構築さ
れることを当初から想定している
GET /chat HTTP/1.1 HTTP/1.1 101 Switching Protocols
Host: server.example.com Upgrade: websocket
Upgrade: websocket Connection: Upgrade
Connection: Upgrade Sec-WebSocket-Accept: YYY
Sec-WebSocket-Key: XXX Sec-WebSocket-Protocol: chat
Origin: http://example.com
Sec-WebSocket-Protocol: chat
Sec-WebSocket-Version: 13

17. WebSocketのJavaScript API

18. WebSocketのJavaScript API
 WebSocket APIは比較的実装が進んでいる
IE Firefox Chrome Safari Opera iOS Android
Safari Browser
10.0 ○ ○ 6.0 12.1 6.0 ×

19. JavaScript APIの使用法
まず、WebSocket接続を確立する。
// WebSocket接続を開始
var ws = new WebSocket('ws://localhost:2000/chat');
// 接続が確立したら呼び出される
ws.onopen = function() {
// 初期化処理
};

20. JavaScript APIの使用法
データの送信
// sendメソッドにより、サーバにデータを送信できる
// sendメソッドは文字列だけではなく、ArrayBufferや
// Blobも送信可能
ws.send('Hello');
データの受信
// データが到着したら呼び出される
ws.onmessage = function(e) {
// dataプロパティに受信データが格納
var data = e.data;
…
};

21. JavaScript APIの使用法
接続のクローズ（クライアントから）
// クライアントから接続を切断
ws.close();
接続のクローズ（サーバから）
// データが到着したら呼び出される
ws.onclose = function(e) {
var wasClean = e.wasClean; // 正常終了か
var code = e.code; // ステータスコード
var reason = e.reason; // 切断理由
};

22. ぼくはここまで！
ご清聴ありがとうございました！
@Shumpei