3

私たちは、来週ユニークなチャット製品をローンチする若いスタートアップです。私たちのチャットは現在、BoSH (Punjab を使用) 経由で Jabber (Jabber サーバーとして Openfire を使用) に基づいており、クライアント側のスクリプトには jQuery を使用しています。

現在、現在のセットアップで最も重要な問題は、サイト ナビゲーションに関するものです。Web サイトのページ間を移動すると、新しいページが読み込まれて BOSH 接続が認証されるまで、BOSH 接続が失われます。この問題により、サインアウトせずにウェブサイトを離れたユーザーをログアウトする前に、非常に大きなタイムアウト (約 1 分) を設定する必要があります。

JavaScript アンカー ベースのナビゲーション ソリューションは認識していますが、これを実装するには、サイトのマークアップ、CSS および JS スクリプトに多くの変更を加える必要があり、サイトの構造は非常に複雑です。

他の解決策はありますか？ページが2つのiframeを保持するフレームベースのナビゲーションについて考えていました-1つは非表示でBOSH接続を保持し、もう1つは実際のページコンテンツを保持します。このソリューションの問題点は、ユーザーの感覚に影響を与え、ロケーション バーの URL が常にフレームを保持するページの URL のままになることです。

サイトの構造/マークアップを完全に書き直す必要のない、私たちの問題に対する解決策はありますか?

前もって感謝します！

4

3 に答える 3

1

これは完全な書き直しではないかもしれませんが、多少の作業が必要になるでしょう。チャット ボックスをそこにとどめて、コンテンツを ajax します。つまり、Facebook のように下部にチャット バーがある場合は、ページを ajax した ID で残りをセクション化します。言い換えれば、レイアウトからチャットを取り出して分離し、リンクを ajax リクエストにします。これはグローバル リンク ハンドラーを介して処理でき、リンクは検索を介して置換され、sed を介してすべてのファイルを置換します。(href=" を href="javascript:urlhandler に変更 (ただし、これには外部リンクを考慮する必要があります)ページから、D / Cまたはそれらに何が起こるか。

于 2009-11-17T00:56:13.443 に答える
1

各ページでチャットの実装を使用していますか? もしそうなら、答えはスクリプトのキャッシングを微調整することです。すべての大きな JS ファイルが外部にあり、サーバーが変更を登録していないことを確認してください (例: Last Modified)。画像をスプライトに結合します。存在する多くのミニファイアの 1 つを使用してコードを実行します。最後になりましたが、CDN に投資してください。Amazon CloudFront はシンプルで安価です。パフォーマンスを向上させるために驚くほど機能することがわかります。

于 2009-11-17T03:16:38.230 に答える
0

jquery の履歴プラグイン ( http://www.mikage.to/jquery/jquery_history.html ) を使用して、前後のナビゲーションを処理し、話していたように ajax 経由でページを読み込むことができます。

このようなものは動作するはずです（テストされていません）：

Page1.htm:

<html>
<head><title>Page 1</title></head>
<body>
     <div id="content">
         <a href="/page2.htm">Load Page 2</a>
     </div>
    <div id="chat"></div>
</body>
<script>
    $(function(){
        function loadPage(hash){
            if($.browser.msie) {
         hash = encodeURIComponent(hash);
        }
            $.ajax({
                "url":hash,
                "success":function(response){
                     var newPage = $(response);
                     document.title=newPage.find("title").html();
                     $("#content").html(newPage.find("#content").html());
                 }
            });
            return false;
        }
        $.historyInit(loadPage);
        $("a").live("click",function(){
            $.historyload(this.href);
        });
    });
</script>
</html>

Page2.htm:

<html>
<head><title>Page 2</title></head>
<body>
     <div id="content">
         <a href="/page1.htm">Load Page 1</a>
     </div>
    <div id="chat"></div>
</body>
<script>
    $(function(){
        function loadPage(hash){
            if($.browser.msie) {
         hash = encodeURIComponent(hash);
        }
            $.ajax({
                "url":hash,
                "success":function(response){
                     // this is just an example and not too efficient.
                     var newPage = $(response);
                     document.title=newPage.find("title").html();
                     $("#content").html(newPage.find("#content").html());
                 }
            });
            return false;
        }
        $.historyInit(loadPage);
        $("a").live("click",function(){
            $.historyload(this.href);
        });
    });
</script>
</html>

もしあなたが私に仕事を外注したいのなら、私は喜んでお手伝いします。:o)

于 2009-11-18T15:17:20.457 に答える