• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5など社内勉強会 Vol.8 - WebSocket
 

HTML5など社内勉強会 Vol.8 - WebSocket

on

  • 664 views

 

Statistics

Views

Total Views
664
Views on SlideShare
664
Embed Views
0

Actions

Likes
2
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5など社内勉強会 Vol.8 - WebSocket HTML5など社内勉強会 Vol.8 - WebSocket Presentation Transcript

    • HTML5など勉強会 Vol. 8WebSocket 入門編2012/2/9 @ 某社System Management HeadquatersGeorge Harada
    • 提 供勉強会スタッフ(ボランティア)システム統括本部
    • Agenda1. DEMO 12. WebSocket ?3. DEMO 2
    • Agenda1. DEMO 12. WebSocket ?3. DEMO 2
    • DEMO 1
    • DEMO 1から抜粋
    • DEMO 1から抜粋
    • DEMO 1から抜粋
    • DEMO 1から抜粋
    • DEMO 1から抜粋
    • DEMO 1から抜粋
    • DEMO 1から抜粋
    • DEMO 1から抜粋
    • Agenda1. DEMO 12. WebSocket ?3. DEMO 2
    • リアルタイム双方向通信実現するための通信技術WebSocketとは
    • HTTPリクエストHTTPレスポンスWebサーバクライアント(ブラウザ)HTTP・リクエストとレスポンスは必ずセット・リクエストは常にクライアントから
    • WebSocketサーバクライアント(ブラウザ)WebSocketUpgradeWebSocket接続確立後はどちらからでもデータの送信が可能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: WebSocketHandshakeの流れ(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)対応ブラウザに気をつけよう
    • Agenda1. DEMO 12. 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/4798028541JavaScript- http://www.amazon.co.jp/パーフェクトJavaScript-PERFECT-4-井上-誠一郎/dp/477414813X