Html5, Web Applications 2
- 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 プッシュ方式だが、永続的な接続には、煩雑な作業が必要になる ２つのHTTP接続を使って、双方向通信が実現できる Web Sockets １つのソケットで、双方向通信が実現できる サーバー×クライアント間で、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"> </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