在浏览网站时保持与服务器的永久连接

时间:2009-11-16 10:54:20

标签: javascript jquery html comet frames

我们是一个年轻的初创公司,下周将推出一款独特的聊天产品。我们的聊天目前基于Jabber(使用Openfire作为我们的Jabber服务器)通过BOSH(使用Punjab),jQuery用于我们的客户端脚本。

现在我们当前设置的最关键问题是网站导航,当我们网站中的页面之间导航时,BOSH连接会丢失,直到加载新页面并验证BOSH连接。由于这个问题,我们必须设置一个非常大的超时(大约1分钟),然后退出离开我们网站的用户而不退出。

我们知道基于javascript锚点的导航解决方案,但实现这一点需要对我们网站的标记,CSS和JS脚本进行许多更改,而且我们网站的结构非常复杂。

还有其他解决方案吗? 我正在考虑基于帧的导航,当一个页面将容纳2个iframe时 - 一个隐藏并保持BOSH连接,一个保存真实的页面内容。此解决方案的问题在于它会影响用户的感觉,位置栏中的URL将始终保留包含框架的页面的URL。

我们的问题是否有任何解决方案,不需要完全重写网站的结构/标记?

提前致谢!

3 个答案:

答案 0 :(得分:1)

虽然这可能不是一个完整的重写,但我会说它需要做一些事情。让聊天框保留在那里并在内容中使用ajax,即,如果像Facebook上的底部有聊天栏一样,请将其余部分放入您想要登录的内容中。换句话说,从你的布局中取出聊天,把它分开,然后链接到ajax请求,这些请求可以通过全局链接处理程序处理,链接通过搜索替换,通过sed替换所有文件。 (href =“更改为href =”javascript:urlhandler(但这需要考虑外部链接) 我能想到的另一个选择是在您的网站上有两个iframe。主要和聊天。并为那些从页面,D / C或其他任何内容导航的人提供会话cookie。

答案 1 :(得分:1)

您是否在每个页面上使用聊天实现?如果是这样,答案是调整脚本的缓存。确保所有大型JS文件都是外部的,并且服务器不会注册任何更改(例如:Last Modified)。将图像组合成精灵。通过存在的众多缩小器之一运行代码。最后但并非最不重要的是,投资CDN。 Amazon CloudFront既简单又便宜:您会发现它可以提高性能。

答案 2 :(得分: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)