1. HTML5など
勉強会 Vol. 8
WebSocket 入門編
2012/2/9 @ 某社
System Management Headquaters
George Harada

2. 提 供
勉強会スタッフ
（ボランティア）
システム統括本部

3. Agenda
1. DEMO 1
2. WebSocket ?
3. DEMO 2

4. Agenda
1. DEMO 1
2. WebSocket ?
3. DEMO 2

5. DEMO 1

6. DEMO 1から抜粋

7. DEMO 1から抜粋

8. DEMO 1から抜粋

9. DEMO 1から抜粋

10. DEMO 1から抜粋

11. DEMO 1から抜粋

12. DEMO 1から抜粋

13. DEMO 1から抜粋

14. Agenda
1. DEMO 1
2. WebSocket ?
3. DEMO 2

15. リアルタイム
双方向通信
実現するための通信技術
WebSocketとは

16. HTTPリクエスト
HTTPレスポンス
Webサーバ
クライアント
（ブラウザ）
HTTP
・リクエストとレスポンスは必ずセット
・リクエストは常にクライアントから

17. WebSocketサーバ
クライアント
（ブラウザ）
WebSocket
Upgrade
WebSocket
接続確立後はどちらからでも
データの送信が可能
HTTPリクエスト
HTTPレスポンス

18. リアルタイム
双方向通信
実現するための通信技術
H
T
T
P
で
は
不
可
能
な
H
T
T
P
よ
り
効
率
的
な
WebSocketとは

19. そのまま使えるブラウザ
Chrome(4.0 以降) ※for Android Beta は ICS 以降
Safari(5.0 以降) ※iOS 4.2 以降
ベンダープレフィックスが必要なブラウザ
Firefox(6.0 以降) ※for Mobile は 7.0 以降
ユーザによる有効化設定が必要なブラウザ
Opera(11.0 以降)
対応予定
Internet Explorer (10.0 以降)
対応ブラウザ(2012/02/08 現在)
Android標準ブラウザは非対応

20. // WebSocketサーバに接続 (暗号化通信は 'wss://' を利用)
var ws = new WebSocket('ws://www.w3.org:443/echo');
// メッセージを送信
ws.send('送信データ');
// メッセージを受信（イベントハンドラ）
ws.onmessage = function(event) {
// 受信データを取り出す
var message = event.data;
};
// 接続を切断（あまり使わないはず）
ws.close();
クライアント実装 (JavaScript)
onopen
onclose
onerror
readyState
他によく使う
WebSocket プロパティ

21. // WebSocketサーバに接続
var ws = new WebSocket('ws://www.w3.org:443/echo');
URL を要求: ws://www.w3.org:443/echo
リクエストメソッド: GET
ステータスコード: 101 Web Socket Protocol Handshake
リクエストヘッダ
Origin: http://www.w3.org
Sec-WebSocket-Key1: fg182#9$ 11 9a y: 10+
Connection: Upgrade
Host: www.w3.org:443
Sec-WebSocket-Key2: 35 ?6w4785 8 1 6
Upgrade: WebSocket
レスポンスヘッダ
Sec-WebSocket-Location: ws://www.w3.org:443/echo
Sec-WebSocket-Origin: http://www.w3.org
Connection: Upgrade
Upgrade: WebSocket
Handshakeの流れ
(1) ブラウザから、接続確立のための
HTTPリクエストをWSサーバに送信
(2) WSサーバは、リクエストの内容を
確認して接続許可のHTTPレスポンスを
ブラウザに送信
(3) ブラウザは、接続をWebSocketに
アップグレード
この一連の流れを Handshake と呼ぶ

22. ・メジャーな開発言語には、便利なWebSocketライブラリが大体用意されており、
比較的容易に環境を構築できる
・最近の流行は Node.js + α の構成（サーバサイドJavaScript）
・ライブラリが対応するWebSocketの規格（バージョン）には注意が必要
・社内Proxy等による、通信ポートの制約には注意が必要
続きはまた、別の お は な し 
WebSocketサーバ実装

23. と、いうわけで
ざっくりまとめ

24. リアルタイム
双方向通信
実現するための通信技術
H
T
T
P
で
は
不
可
能
な
H
T
T
P
よ
り
効
率
的
な
WebSocket (1)

25. // WebSocketサーバに接続 (暗号化通信は 'wss://' を利用)
var ws = new WebSocket('ws://www.w3.org:443/echo');
// メッセージを送信
ws.send('送信データ');
// メッセージを受信（イベントハンドラ）
ws.onmessage = function(event) {
// 受信データを取り出す
var message = event.data;
};
// 接続を切断（あまり使わないはず）
ws.close();
onopen
onclose
onerror
readyState
他によく使う
WebSocket プロパティ
WebSocket (2)
使い方は
カンタン

26. そのまま使えるブラウザ
Chrome(4.0 以降) ※for Android Beta は ICS 以降
Safari(5.0 以降) ※iOS 4.2 以降
ベンダープレフィックスが必要なブラウザ
Firefox(6.0 以降) ※for Mobile は 7.0 以降
ユーザによる有効化設定が必要なブラウザ
Opera(11.0 以降)
対応予定
Internet Explorer (10.0 以降)
WebSocket (3)
対応ブラウザに
気をつけよう

27. Agenda
1. DEMO 1
2. WebSocket ?
3. DEMO 2

28. DEMO 2

29. sample
-- 社内URL --
※Chrome または Safari でリンクを開いて下さい。
※WebSocketサーバはメンテナンス等のため予告無く停止する場合があります。
動画に含まれる、その他のデモをご覧になりたい方は
study_staff@ までご連絡ください
m(_ _)m

30. 如何でしたか？

31. Future?
No, Tomorrow!

32. 新しいサービスを
イロイロと考えて
みてください！！

33. 勉強会スタッフ
絶賛募集中です

34. また次回
お会いしましょう

35. tthhaannkkss !!

36. Special Thanks to
Assistant
Operation
Operation
Operation
Support
Support
Support
Support
順不同 敬称略

37. 参考文献等
HTML5
- http://html5.jp/
- http://www.amazon.co.jp/徹底解説HTML5マークアップガイドブック-羽田野太巳/dp/4798025291
- http://www.amazon.co.jp/徹底解説-HTML5-APIガイドブック-ビジュアル系API編-羽田野/dp/4798028541
JavaScript
- http://www.amazon.co.jp/パーフェクトJavaScript-PERFECT-4-井上-誠一郎/dp/477414813X