html5など社内勉強会 vol.8 - websocket
DESCRIPTION
TRANSCRIPT
HTML5など 勉強会 Vol. 8 WebSocket 入門編
2012/2/9 @ 某社
System Management HeadquatersGeorge Harada
提 供
勉強会スタッフ（ボランティア）
システム統括本部
Agenda
1. DEMO 1
2. WebSocket ?
3. DEMO 2
Agenda
1. DEMO 1
2. WebSocket ?
3. DEMO 2
DEMO 1
DEMO 1から抜粋
DEMO 1から抜粋
DEMO 1から抜粋
DEMO 1から抜粋
DEMO 1から抜粋
DEMO 1から抜粋
DEMO 1から抜粋
DEMO 1から抜粋
Agenda
1. DEMO 1
2. WebSocket ?
3. DEMO 2
リアルタイム×
双方向通信実現するための通信技術
WebSocketとは
HTTPリクエスト
HTTPレスポンス
Webサーバクライアント（ブラウザ）
HTTP
・リクエストとレスポンスは必ずセット ・リクエストは常にクライアントから
WebSocketサーバクライアント（ブラウザ）
WebSocket
Upgrade
WebSocket
接続確立後はどちらからでも データの送信が可能
HTTPリクエスト
HTTPレスポンス
リアルタイム×
双方向通信実現するための通信技術
HTTPでは 不可能 な
HTTPより 効率的 な
WebSocketとは
そのまま使えるブラウザ
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標準ブラウザは非対応
// 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)
onopenoncloseonerrorreadyState
他によく使うWebSocket プロパティ
// 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.orgSec-WebSocket-Key1: fg182#9$ 11 9a y: 10+Connection: UpgradeHost: www.w3.org:443Sec-WebSocket-Key2: 35 ?6w4785 8 1 6Upgrade: WebSocket
レスポンスヘッダSec-WebSocket-Location: ws://www.w3.org:443/echoSec-WebSocket-Origin: http://www.w3.orgConnection: UpgradeUpgrade: WebSocket
Handshakeの流れ
(1) ブラウザから、接続確立のための HTTPリクエストをWSサーバに送信
(2) WSサーバは、リクエストの内容を 確認して接続許可のHTTPレスポンスを ブラウザに送信
(3) ブラウザは、接続をWebSocketに アップグレード
この一連の流れを Handshake と呼ぶ
・メジャーな開発言語には、便利なWebSocketライブラリが大体用意されており、 比較的容易に環境を構築できる
・最近の流行は Node.js + α の構成（サーバサイドJavaScript）
・ライブラリが対応するWebSocketの規格（バージョン）には注意が必要
・社内Proxy等による、通信ポートの制約には注意が必要
続きはまた、別の お は な し
WebSocketサーバ実装
と、いうわけでざっくりまとめ
リアルタイム×
双方向通信実現するための通信技術
HTTPでは 不可能 な
HTTPより 効率的 な
WebSocket (1)
// WebSocketサーバに接続 (暗号化通信は 'wss://' を利用)
var ws = new WebSocket('ws://www.w3.org:443/echo');
// メッセージを送信ws.send('送信データ');
// メッセージを受信（イベントハンドラ）
ws.onmessage = function(event) {
// 受信データを取り出す var message = event.data;
};
// 接続を切断（あまり使わないはず）
ws.close();
onopenoncloseonerrorreadyState
他によく使うWebSocket プロパティ
WebSocket (2)
使い方は
カンタン
そのまま使えるブラウザ
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)
対応ブラウザに気をつけよう
Agenda
1. DEMO 1
2. WebSocket ?
3. DEMO 2
DEMO 2
sample-- 社内URL --
※Chrome または Safari でリンクを開いて下さい。 ※WebSocketサーバはメンテナンス等のため予告無く停止する場合があります。
動画に含まれる、その他のデモをご覧になりたい方はstudy_staff@ までご連絡ください
m(_ _)m
如何でしたか？
Future?No, Tomorrow!
新しいサービスをイロイロと考えてみてください！！
勉強会スタッフ絶賛募集中です
また次回お会いしましょう
tthhaannkkss !!
Special Thanks toAssistantOperationOperationOperationSupportSupportSupportSupport
順不同 敬称略
参考文献等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