• 158 阅读
  • 1 回复

利用Jquery实现http长连接(LongPoll)

视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)

代码 复制 - 运行

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryAjaxLongPoll.aspx.cs" Inherits="JqueryAjaxLongPoll" %>  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml" >  
<head runat="server">  
    <title>无标题页</title>  
    <script type="text/javascript" src="script/jquery-1.2.6.js"></script>  
    <script type="text/javascript">  
        $(document).ready(function(){  
            $("#Button1").bind("click",{btn:$("#Button1")},function(evdata){  
                $.ajax({  
                    type:"POST",  
                    url:"JqueryAjaxLongPoll.aspx",  
                    dataType:"json",  
                    timeout:10000,  
                    data:{ajax:"1",time:"10000"},  
                    success:function(data,textStatus){  
                            //alert("ok!");  
                            evdata.data.btn.click();  
                    },  
                    complete:function(XMLHttpRequest,textStatus){  
                            if(XMLHttpRequest.readyState=="4"){  
                                alert(XMLHttpRequest.responseText);  
                            }  
                    },  
                    error: function(XMLHttpRequest,textStatus,errorThrown){  
                            //$("#ajaxMessage").text($(this).text()+" out!")  
                            alert("error:"+textStatus);  
                            if(textStatus=="timeout")  
                                evdata.data.btn.click();  
                    }  
                });  
            });  
  
            /*$("#ajaxMessage").ajaxStart(function(){ 
                $(this).text("准备建立请求.readyState0:"); 
            }); 
            $("#ajaxMessage").ajaxSend(function(evt, request, settings){ 
                $(this).text("开始请求,准备发送数据.readyState1:"+request.readyState); 
            }); 
            $("#ajaxMessage").ajaxComplete(function(event,request, settings){ 
                if(request.status==200) 
                    $(this).text("请求完成.readyState4:"+request.readyState); 
            }); 
            $("#ajaxMessage").ajaxStop(function(){ 
                $(this).text("请求结束."); 
            });*/  
        });  
    </script>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <div>  
        <input id="Button1" type="button" value="AjaxLongPoll" />  
        <label id="ajaxMessage"></label>  
    </div>  
    </form>  
</body>  
</html> 



后端:

代码 复制 - 运行

using System;  
using System.Data;  
using System.Configuration;  
using System.Collections;  
using System.Web;  
using System.Web.Security;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
using System.Web.UI.WebControls.WebParts;  
using System.Web.UI.HtmlControls;  
using System.Threading;  
  
public partial class JqueryAjaxLongPoll : System.Web.UI.Page  
{  
    protected void Page_Load(object sender, EventArgs e)  
    {  
        if (Request.Form["ajax"] == "1")  
        {  
            //Response.End();  
            int time = Convert.ToInt32(Request.Form["time"]);  
            DateTime date1 = DateTime.Now.AddMilliseconds((double)time);  
            bool ready = false;  
            while (Response.IsClientConnected)  
            {  
                Thread.Sleep(3000);  
                if (DateTime.Compare(date1, DateTime.Now) < 0)  
                {  
                    Response.End();  
                    break;  
                }  
                //ready = true;  
                if (ready)  
                {  
                    Response.Write("SetValue('" + DateTime.Now.ToString() + "')");  
                    //Response.Flush();  
                    Response.End();  
                    break;  
                }  
                else  
                {  
  
                }  
            }  
        }  
        else  
        {  
            if (!Page.IsPostBack)  
            {  
  
            }  
        }  
    }  
}  



思路:

利用jquery,很方便的就能实现ajax,上面设置了ajax的timeout时间,由于设置了timeout将会造成不能保持长连接,到了时间ajax自动会报“超时”的错误,也就是会调用error方法,此时textStatus=="timeout",timeout后重新进行ajax请求。服务器接受ajax请求的时候,会接收一个超时时间的值,超时的情况下服务器端的处理也立即停止。当客户端成功获取返回结果时,也会立即进行新的ajax请求,如此循环。

为什么要设置客户端的ajax超时值呢?因为服务器为了保持请求(阻塞请求),必须有一个无限循环,循环的结束条件就是获取到了返回结果,如果客户端关闭了(客户端浏览器的关闭不会发消息给服务器),服务器无法知道客户端已经关了,这个请求没必要处理下去了。最终会造成资源过度浪费,只要用一个折中的办法,限制超时时间。

可以不必设置客户端ajax的超时时间,但进行请求的时候传递一个超时值给服务器,服务器在处理的时候,如果超时时间到了的话,还没有客户端需要的结果,这时传递一个超时信息给客户端,客户端接收到了此信息,根据情况重新进行ajax请求。XMLHttpRequest没有超时的参数,Jquery用window.setTimeout自己封装的(到了定时时间运行超时处理方法,和XMLHttpRequest结束方法)。可以根据这个思路来改变一下,IBM上介绍的LONG POLL好像也是这样的。


代码 复制 - 运行

$(document).ready(function(){  
            $("#Button1").bind("click",{btn:$("#Button1")},function(evdata){  
                $.ajax({  
                    type:"POST",  
                    url:"JqueryAjaxLongPoll.aspx",  
                    dataType:"json",  
                    data:{ajax:"1",time:"6000000"},  
                    success:function(data,textStatus){  
                            //成功  
                            if(data.success=="1"){  
                                //客户端处理  
                                //...  
                                ///重新请求  
                                evdata.data.btn.click();  
                            }  
                            //超时  
                            if(data.success=="0"){  
                                evdata.data.btn.click();  
                            }  
                    },  
                    complete:function(XMLHttpRequest,textStatus){  
                            if(XMLHttpRequest.readyState=="4"){  
                                alert(XMLHttpRequest.responseText);  
                            }  
                    },  
                    error: function(XMLHttpRequest,textStatus,errorThrown){  
                            //$("#ajaxMessage").text($(this).text()+" out!")  
//                            alert("error:"+textStatus);  
//                            if(textStatus=="timeout")  
                                evdata.data.btn.click();  
                    }  
                });  
            });  
  

后台代码变更后:

代码 复制 - 运行

if (Request.Form["ajax"] == "1")  
        {  
            int time = Convert.ToInt32(Request.Form["time"]);  
            DateTime date1 = DateTime.Now.AddMilliseconds((double)time);  
            bool ready = false;  
            while (Response.IsClientConnected)  
            {  
                Thread.Sleep(3000);  
                if (DateTime.Compare(date1, DateTime.Now) < 0)  
                {  
                    Response.Write("{success:'0'}");  
                    Response.End();  
                    break;  
                }  
                //此处进行请求处理,有结果了置ready = true  
                //ready = true;  
                if (ready)  
                {  
                    Response.Write("{success:'1'}");  
                    Response.End();  
                    break;  
                }  
            }  
        }  
        else  
        {  
            if (!Page.IsPostBack)  
            {  
  
            }  
        }  



上面的方法应该就可以满足要求了,具体的超时时间可以根据情况来设置。这也是我根据IBM上介绍的“server push”思路,来实现了其中的一种,也不知道有没有问题,还请大家多多赐教。


http://www.cnblogs.com/vagerent/archive/2010/02/05/1664450.html
小鱼的淘宝店铺-多多支持哇

好像不好

视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)

代码 复制 - 运行

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isELIgnored="false" %>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
    <head>  
        <meta http-equiv="pragma" content="no-cache">  
        <meta http-equiv="cache-control" content="no-cache">  
        <meta http-equiv="expires" content="0">  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <%@ include file="/tags/jquery-lib.jsp"%>  
          
        <script type="text/javascript">  
            $(function () {  
              
                (function longPolling() {  
                  
                    $.ajax({  
                        url: "${pageContext.request.contextPath}/communication/user/ajax.mvc",  
                        data: {"timed": new Date().getTime()},  
                        dataType: "text",  
                        timeout: 5000,  
                        error: function (XMLHttpRequest, textStatus, errorThrown) {  
                            $("#state").append("[state: " + textStatus + ", error: " + errorThrown + " ]<br/>");  
                            if (textStatus == "timeout") { // 请求超时  
                                    longPolling(); // 递归调用  
                                  
                                // 其他错误,如网络错误等  
                                } else {   
                                    longPolling();  
                                }  
                            },  
                        success: function (data, textStatus) {  
                            $("#state").append("[state: " + textStatus + ", data: { " + data + "} ]<br/>");  
                              
                            if (textStatus == "success") { // 请求成功  
                                longPolling();  
                            }  
                        }  
                    });  
                })();  
                  
            });  
        </script>  
    </head>  
      
    <body>  
小鱼的淘宝店铺-多多支持哇