Your SlideShare is downloading. ×
Html5, Web Applications 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Html5, Web Applications 2

3,014
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,014
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 HTML5, WebApplications 2 とくなが たかひさ ( id : totty_jp ) <html>5
  • 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. ii. 今日は、Web Sockets API サーバーPush型 リアルタイム型 普通のWeb 現行のHttpプロトコルを利用した全てに適用できる!? メリットの高そうな利用用途 西鉄バス位置情報サービス モバイル端末向けのデータサービス <html>5
  • 4. iii. Indexed Database API 実装されたブラウザが・・・ K/V型のデータストア(+ index) 検証できる環境が出来るまでご容赦 <html>5
  • 5. iv. Web Sockets API クライアントとサーバとの双方向通信を実現 永続的な接続ができる(コネクション張りっぱなし) リソース的には、都度、コネクションを張ってヘッダを付与したやり とりよりECOな感じ リソース的に負荷は、コネクションを接続する際に多く必要とする為 双方向にデータの送信できるということは・・ サーバー <=> クライアント クライアント <=> クライアント サーバー <=> サーバー クライアント <=> サーバー <=> クライアント HTTPの拡張プロトコル ただし、永続なので、クローズ処理は、明示的に行う必要がある <html>5
  • 6. iv. Web Sockets API Ajax サーバーとの通信をポーリングし、そのポーリング期間でメッ セージが配信される ポーリング期間中、都度サーバーと接続する為リソースの消費が 多い Commet プッシュ方式だが、永続的な接続には、煩雑な作業が必要になる 2つのHTTP接続を使って、双方向通信が実現できる Web Sockets 1つのソケットで、双方向通信が実現できる サーバー×クライアント間で、UTF-8なら変換が不要 <html>5
  • 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. 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. iv. Web Sockets API Demo <html>5
  • 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. 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. v. それで。。 それで。。 前回は、ネットワーク世界のonline/offlineに不可欠となる 技術として、HTML5のオフラインキャッシュ機能の紹介 でした。 今回は、ネットワーク負荷が低くリアルタイム性のある Web Sockets 機能の紹介でした。 この二つの機能と、他のHTML5によってWebの世界では、 また一つ革新的な時代を迎えるだろうと考えています。 <html>5