Download as PDF, PPTX
![20110622 haruyama webso]cket](https://cdn.slidesharecdn.com/ss_thumbnails/20110622haruyamawebsocket-110703040231-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]](https://cdn.slidesharecdn.com/ss_thumbnails/html5etc005s2-130606051334-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML5など社内勉強会 Vol.8 - WebSocket
- 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.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14. Agenda 1. DEMO 1 2.WebSocket ? 3. DEMO 2
- 15.
- 16.
- 17.
- 18.
- 19. そのまま使えるブラウザ Chrome(4.0 以降) ※forAndroid 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.
- 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 以降) ※forAndroid 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.
- 29. sample -- 社内URL -- ※Chromeまたは Safari でリンクを開いて下さい。 ※WebSocketサーバはメンテナンス等のため予告無く停止する場合があります。 動画に含まれる、その他のデモをご覧になりたい方は study_staff@ までご連絡ください m(_ _)m
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 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