Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5




          HTML5, WebApplications 2




                      とくなが たかひさ ( id : totty_jp )

<html>5
i.                .
        名前   :   徳永 貴久
        所属   :   EC-One
        業務   :   SE or PG (Java, Ruby, Flex, etc...)
  ...
ii.
      今日は、Web Sockets API
          サーバーPush型
          リアルタイム型
          普通のWeb
          現行のHttpプロトコルを利用した全てに適用できる!?...
iii. Indexed Database API
      実装されたブラウザが・・・
          K/V型のデータストア(+ index)
          検証できる環境が出来るまでご容赦




<html>5
iv. Web Sockets API
      クライアントとサーバとの双方向通信を実現
          永続的な接続ができる(コネクション張りっぱなし)
           リソース的には、都度、コネクションを張ってヘッダを付与した...
iv. Web Sockets API
      Ajax
          サーバーとの通信をポーリングし、そのポーリング期間でメッ
          セージが配信される
          ポーリング期間中、都度サーバーと接続する為リ...
iv. Web Sockets API
      対応ブラウザ
          Google Chrome
          Firefox
          Safari
          ?

      対応サーバー(ソフトウ...
iv. Web Sockets API
      Web Sockets Interface
          Constractor
              var ws = new WebSocket(url, protocol)
...
iv. Web Sockets API
      Demo




<html>5
iv. Web Sockets API
      Sample
          websocketSample.html
          <script>
             var ws = new WebSocket("ws...
iv. Web Sockets API
      Sample
          websocketSample.html(続き)
          <body>
             <section>
              ...
v. それで。。
      それで。。
      前回は、ネットワーク世界のonline/offlineに不可欠となる
      技術として、HTML5のオフラインキャッシュ機能の紹介
      でした。

      今回は、ネットワ...
Upcoming SlideShare
Loading in …5
×

Html5, Web Applications 2

3,296 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Html5, Web Applications 2

  1. 1. HTML5 HTML5, WebApplications 2 とくなが たかひさ ( id : totty_jp ) <html>5
  2. 2. i. . 名前 : 徳永 貴久 所属 : EC-One 業務 : SE or PG (Java, Ruby, Flex, etc...) 性別 : ♂ 年齢 : そのくらいです。 blog : http://d.hatena.ne.jp/totty_jp/ twitter : totty_jp <html>5
  3. 3. ii. 今日は、Web Sockets API サーバーPush型 リアルタイム型 普通のWeb 現行のHttpプロトコルを利用した全てに適用できる!? メリットの高そうな利用用途 西鉄バス位置情報サービス モバイル端末向けのデータサービス <html>5
  4. 4. iii. Indexed Database API 実装されたブラウザが・・・ K/V型のデータストア(+ index) 検証できる環境が出来るまでご容赦 <html>5
  5. 5. iv. Web Sockets API クライアントとサーバとの双方向通信を実現 永続的な接続ができる(コネクション張りっぱなし) リソース的には、都度、コネクションを張ってヘッダを付与したやり とりよりECOな感じ リソース的に負荷は、コネクションを接続する際に多く必要とする為 双方向にデータの送信できるということは・・ サーバー <=> クライアント クライアント <=> クライアント サーバー <=> サーバー クライアント <=> サーバー <=> クライアント HTTPの拡張プロトコル ただし、永続なので、クローズ処理は、明示的に行う必要がある <html>5
  6. 6. iv. Web Sockets API Ajax サーバーとの通信をポーリングし、そのポーリング期間でメッ セージが配信される ポーリング期間中、都度サーバーと接続する為リソースの消費が 多い Commet プッシュ方式だが、永続的な接続には、煩雑な作業が必要になる 2つのHTTP接続を使って、双方向通信が実現できる Web Sockets 1つのソケットで、双方向通信が実現できる サーバー×クライアント間で、UTF-8なら変換が不要 <html>5
  7. 7. iv. Web Sockets API 対応ブラウザ Google Chrome Firefox Safari ? 対応サーバー(ソフトウェア) Kaazing MinaというフレームワークでJava実装サーバー Jetty Java純正サーバー apache(pywebsocket) Python向け組み込み型モジュール 利用ポート(Httpと同じ) 80番 default port 443番 secure port <html>5
  8. 8. iv. Web Sockets API Web Sockets Interface Constractor var ws = new WebSocket(url, protocol) ws://domain/hello ⇒ 平文通信 80ポート wss://domain/hello ⇒ 暗号化通信 413ポート EventHandler ws.onopen 通信開始イベント ws.onclose 通信終了イベント ws.onmessage メッセージの受信イベント Method ws.send(“Hello WebSocket”) メッセージの送信 ws.close() 通信終了 Attribute URL WebSocketに渡されたURLの解決した結果 readyState CONNECTING = 0 ・・・ コネクションは確立されていない OPEN = 1 ・・・ コネクションは確立されている(通信可能) CLOSED = 2 ・・・ コネクションは閉じている bufferedAmount まだ、送信されていないデータ(メッセージ)のバイト数 <html>5
  9. 9. iv. Web Sockets API Demo <html>5
  10. 10. iv. Web Sockets API Sample websocketSample.html <script> var ws = new WebSocket("ws://localhost:81"); ws.onopen = openConnection; ws.onclose = closeConnection; ws.onmessage = recieveMsg; window.onunload = closeConnection; function openConnection() { //null } function closeConnection() { ws.close(); } function recieveMsg(evt) { log("message receive -> ", evt.data); } function sendMsg() { var msg = document.getElementById("msg").value; ws.send(msg); } </script> <html>5
  11. 11. iv. Web Sockets API Sample websocketSample.html(続き) <body> <section> <h2>Web Socket Demo</h2> <div> <table> <tr> <th>Mesaage</th> <th colspan="2">&nbsp;</th> </tr> <tr> <td><input type="text" id="msg"></td> <td><button onClick="sendMsg()"> </button></td> </tr> </table> <table id="logTable"></table> </div> </section> </body> <html>5
  12. 12. v. それで。。 それで。。 前回は、ネットワーク世界のonline/offlineに不可欠となる 技術として、HTML5のオフラインキャッシュ機能の紹介 でした。 今回は、ネットワーク負荷が低くリアルタイム性のある Web Sockets 機能の紹介でした。 この二つの機能と、他のHTML5によってWebの世界では、 また一つ革新的な時代を迎えるだろうと考えています。 <html>5

×