HTML5など社内勉強会 Vol.8 - WebSocket
- 1. HTML5など 勉強会 Vol. 8 WebSocket 入門編 2012/2/9 @ 某社 System Management Headquaters George Harada
- 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
- 17. WebSocketサーバ クライアント （ブラウザ） WebSocket Upgrade WebSocket 接続確立後はどちらからでも データの送信が可能 HTTPリクエスト HTTPレスポンス
- 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. と、いうわけで ざっくりまとめ
- 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. 如何でしたか？
- 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