ようこそ!浜村拓夫の世界へ

    ブログ内検索

    最近の記事

    ブックマーク数の多い記事

    Blog Translation

    Powered By FC2ブログ

    Powered By FC2ブログ
    ブログやるならFC2ブログ


    FC2ブログ LOGIN

    with Ajax Amazon

    Single Page Application+WebSocketでWebアプリを高速化

    このエントリーを含むはてなブックマーク はてなブックマーク - Single Page Application+WebSocketでWebアプリを高速化 あとで読む
    Webアプリを高速化する手法が紹介されていました。

    キーワードは、
    Single Page Application
    WebSocket
    の2つです。

    最近の Java Web 開発

    アプリ概要
    Single Page Application


    JavaScriptによるSingle Page Application


    2013年はSPAの年・・・になるといいなぁ - new takyam();

    SPA(Single Page Application)が主流の時代が間違いなくくると思ってます。
    WEBアプリケーションにおいて、URL遷移なくすべて(or ほとんど)の機能を利用できるアプリケーション
    通常のWEBアプリケーションと比較した際の大きなメリットは、その高速な動作



    SPA(Single Page Application)のメリットは、動作の高速性と。

    SPAの場合の動作

    まず、最初のページを表示するまでの動作は、通常のWEBアプリケーションとほぼ同じです。

    サーバーサイドにHTMLをリクエストし、必要な外部リソースを取得、処理します。

    2ページ目以降の表示時が、通常のWEBアプリケーションとは異なります。

    検索にしろ、何かの新規追加などにしろ、ユーザ側のリクエストはAjax等でサーバへリクエストし、サーバーサイドのアプリケーションはリクエストを処理した結果をJSONで返します。

    その後のDOMのレンダリングはJS側で行います。つまりサーバーサイドでのViewの生成が省略されたわけですね。

    さらに、ページ遷移はしていませんから、追加での外部リソースの取得は最低限(新たに表示する事になった画像とか)でよく、いわゆるテンプレートやレイアウトと呼ばれる部分のDOMレンダリングは終わっているわけですから、必要最低限のDOMの更新ですむわけです。

    さらに、SPAはHTTPリクエストの問題も解決するかもしれません。



    SPAでは、
    ・基本的にページの遷移がない
    ・AJAXで必要最小限のJSONデータを取得

    SPA+Websocketで不要になるHTTPリクエスト

    実際はSPAで、というわけではないのですが、Websocketを利用するSPAであれば初回ページ表示時と画像取得時以外はWebsocketでのやり取りで完結できるようになります。

    最初のページを表示時にWebsocketでサーバと接続されている状態になれば、HTTPリクエストレスで、少なくともテキストデータをやり取りする事ができ、JSONのやり取りがHTTPリクエストレスになるという事です。”やり取り”というのが重要で、サーバーからでも、クライアントからでも、好きなタイミングでHTTPリクエストのコストを気にせずにJSONデータを贈り合う事ができます。素敵。

    というわけで、少なくとも理屈の上では通常のWEBアプリケーションと比較してとても高速な事はわかっているのですが、なかなか流行る兆しを見せません。

    理由は、開発の難しさのひとつに尽きると思います。



    AJAXの代わりに、Websocketを使いましょうと。

    WebSocket - ウィキペディア

    WebSocket(ウェブソケット)は、コンピュータ・ネットワーク用の通信規格の1つである。
    インターネットの標準化団体であるW3CとIETFがウェブサーバーとウェブブラウザとの間の通信のために規定を予定している双方向通信用の技術規格であり、APIはW3Cが、WebSocket プロトコルはIETFが策定に関与している。
    プロトコルの仕様は RFC 6455。
    TCP上で動く。



    概要

    XMLHttpRequestの欠点を解決する技術として開発されており、現在のComet等に取って代わることを目標としている。

    いわゆるAjaxアプリケーションではサーバとクライアント間のデータのやり取りが頻繁に発生するが、従来のXMLHttpRequestはあくまでブラウザ側からサーバにデータの送信要求を出す手段に過ぎず、サーバ側からクライアントにデータをプッシュ配信することが難しい。
    一方Cometではサーバ側からのプッシュ配信が可能なものの、多くの実装では擬似的に双方向通信を行うため通信が発生するごとにTCPのハンドシェイク手続きを再度行う必要があるほか、HTTPコネクションを長時間占有するためその間同一サーバに接続する他のアプリケーションの動作に影響を及ぼす可能性があるなど、また別の問題が生じる(XMLHttpRequest#ロングポーリングも参照)。

    これに対しWebSocketでは、サーバとクライアントが一度コネクションを行った後は、必要な通信を全てそのコネクション上で専用のプロトコルを用いて行う。
    従来の手法に比べると、新たなコネクションを張ることがなくなる・HTTPコネクションとは異なる軽量プロトコルを使うなどの理由により通信ロスが減る、一つのコネクションで全てのデータ送受信が行えるため同一サーバに接続する他のアプリケーションへの影響が少ないなどのメリットがある。

    元々はHTML5の仕様の一部として策定が進められていたが、後にHTML5からは切り離され、現在は単独のプロトコルとして規格策定作業が進められている。



    速くなるのは良いけど、作るのは面倒くさそうですね。
    Single Page Application+WebSocketで、簡単にWebアプリが作れる時代が、やってくるでしょうか?

    有名なNode.js以外でも、WebSocketを扱うフレームワークが、たくさんあるようです。

    ・php-websocket
    php-websocket · GitHub
    さくらのVPSとPHPでWebSocketをサクっと勉強してみる - demouth::blog
    PHP - WebSocketを動かしてみる | だらだら日記

    ・Wrench
    Wrench · GitHub
    PHPでWrenchによるWebSocketを使ってチャットデモを作る - 豆腐食べたい

    WebSocketの欠点は、ロードバランサーで負荷を分散するとき、HTTPの分散とは少し違うコツが必要なことみたいです。
    Socket.IO or WebSocket を AmazonELB でバランスする検証

    使い方、使いどころを検討して、便利だったら使ってみたいと思います。
    関連記事

    コメント

    コメントの投稿


    管理者にだけ表示を許可する

    トラックバック

    トラックバックURL:
    http://hamamuratakuo.blog61.fc2.com/tb.php/989-0481ac22

    FC2Ad