[分享]基于Comet推送的动态实时曲线图,该如何解决

[分享]基于Comet推送的动态实时曲线图
查看原帖

有人问的问题就是BS结构下的实时的曲线,这个用的好像很多,

于是中午吃饭的时间利用以前在网上找的推送的东西写了一个

比较简单,用的jschart可以修改你自己想要的chart(js的flash都行)


&lt;script language="javascript" type="text/javascript"&gt;
        $(document).ready(function () {
            wait();
           function wait() 
           {
               $.post("GetChartData.do", { content: "-1" }, 
                function (data, status) 
                {
                    eval(data);
                var myChart = new JSChart('graph', 'line');
                myChart.setDataArray(myData);
                myChart.setTitle('this is a Demo Charts ');
                myChart.setTitleColor('#8E8E8E');
                myChart.setTitleFontSize(11);
                myChart.setAxisNameX('Years');
                myChart.setAxisNameY('Values');
                myChart.setAxisColor('#C4C4C4');
                myChart.setAxisValuesColor('#343434');
                myChart.setAxisPaddingLeft(50);
                myChart.setAxisPaddingRight(50);
                myChart.setAxisPaddingTop(50);
                myChart.setAxisPaddingBottom(40);
                myChart.setAxisValuesNumberX(6);
                myChart.setGraphExtend(true);
                myChart.setGridColor('#c2c2c2');
                myChart.setLineWidth(6);
                myChart.setLineColor('#9F0505');
                myChart.setSize(616, 321);
                myChart.setBackgroundImage('chart_bg.jpg');
                myChart.draw(); 
 
                  
                    
                 wait();
                }, "html"
                );
           }
          
        });
       
    &lt;/script&gt;


&lt;div id="graph"&gt;Loading graph...&lt;/div&gt;


&lt;httpHandlers&gt;
      &lt;add path="GetChartData.do" type="AsnyHandler" verb="POST,GET"/&gt;
&lt;/httpHandlers&gt;


using System;
using System.Collections.Generic;
using System.Web;
using System.Threading;

/// &lt;summary&gt;
/// Summary description for AsnyHandler
/// &lt;/summary&gt;
public class AsnyHandler:IHttpAsyncHandler
{
public AsnyHandler()
{
}

    public IAsyncResult BeginProcessRequest(HttpContext context, AsyncCallback cb, object extraData)
    {
        myAsynResult asyncResult = new myAsynResult(context, cb, extraData);
        String content = context.Request.Params["content"];

        //当前部分就是你自己的拼出来的数组了,当前部分根据你实际的chart控件来拼
        content = "var myData =new Array";
        content += "(";
        Random r = new Random();
        for (int i = 2000; i &lt; 2030; i++)
        {
            int j = r.Next(0, 200);
            content += "["+i.ToString()+","+j.ToString()+"],";
        }
        content = content.Substring(0, content.Length - 1);
        content += ")";
        //一秒一刷新
        System.Threading.Thread.Sleep(1000);

        //向Message类中添加该消息
        Messages.Instance().AddMessage(content, asyncResult);
        return asyncResult;
    }

    #region 不必理会
    
    public void EndProcessRequest(IAsyncResult result)
    {
      
    }

    public bool IsReusable
    {
        get { return false; ; } 
 
    }

    public void ProcessRequest(HttpContext context)
    {
    }
    #endregion
}
public class myAsynResult : IAsyncResult
{
    bool _IsCompleted = false;
    private HttpContext context;
    private AsyncCallback cb;
    private object extraData;
    public myAsynResult(HttpContext context, AsyncCallback cb, object extraData)
    {
        this.context = context;
        this.cb = cb;
        this.extraData = extraData;
    }
    private string _content;
    public string Content { 
        get {return _content;}
        set{_content=value;} 
    }

    #region IAsyncResult接口
    public object AsyncState
    {
        get { return null; }
    }

    public System.Threading.WaitHandle AsyncWaitHandle
    {
        get { return null; }
    }

    public bool CompletedSynchronously
    {
        get { return false; }
    }
    public bool IsCompleted
    {
        get { return _IsCompleted; }
    }
    #endregion

    //在Message类中的添加消息方法中，调用该方法，将消息输入到客户端，从而实现广播的功能
    public void Send(object data)
    {
            context.Response.Write(this.Content);
            if (cb!=null)
            {
                cb(this);
            }
            _IsCompleted = true; ;
    }
}


using System;
using System.Collections.Generic;
using System.Web;

/// &lt;summary&gt;
/// Summary description for Messages
/// &lt;/summary&gt;
public class Messages
{
    //记录所有请求的客户端
    List&lt;myAsynResult&gt; clients = new List&lt;myAsynResult&gt;();

    #region 实现该类的单例
    private static readonly Messages _Instance = new Messages();
private Messages()
{
}
    public static Messages Instance()
    { 
 
        return _Instance;
    }
    #endregion

    public void AddMessage(string content,myAsynResult asyncResult)
    {
        //当传入的内容为"-1"时，表示为建立连接请求，即为了维持一个从客户端到服务器的连接而建立的连接
        //此时将该连接保存到 List&lt;myAsynResult&gt; clients中，待再有消息发送过来时，该连接将会被遍历，并且会将该连接输出内容后，结束该连接
        if (content=="-1")
        {
            clients.Add(asyncResult);
        }
        else
        {
            //将当前请求的内容输出到客户端
            asyncResult.Content = content;
            asyncResult.Send(null);

            //否则将遍历所有已缓存的client,并将当前内容输出到客户端
            foreach (myAsynResult result in clients)
            {
                result.Content = content;
                result.Send(null);
            }

            //清空所有缓存
            clients.Clear();
        }
    }
}

以上是2个cs

网速太卡了图片上不去,大家自行下载吧

突然发现我已经上传过了, 上面的就是1分的我又上传了一个0分的不知道为啥没显示出来

等我现实之后在修改连接吧..
(ps:没啥含量高手勿喷啊)
[解决办法]
刚才说错 vs中执行也会这样的
你所说的连接池是？线程池？？
[解决办法]
当然是服务器死了因为工作线程池已经满了无法在接受新的request 所以网页死了
[解决办法]

引用:

呵呵，楼主，我现在也要用到此类技术，但是我用的不是推送，是ajax拉数据，就是用户体验不好，只能隔一段时间，请求一次，也许没有，也许好几条数据，一下子显示到客户端，效果不是很好。

我的应用是一个在线会议系统，专家在线，用户可以实时提问，专家解答。

我这个数据量现在大概能承受500-700人在线。如果人再多，同一时间点登陆就会over。

隔一段时间取数据的话客户端数如果太多的话服务器要受不了了而且如果服务器数据没更新取的数据很多时候都是不变的数据简直就是在浪费服务器资源
建议这位兄弟去看下Comet 反向技术
这篇文章入门很好强烈推荐
Comet：基于 HTTP 长连接的“服务器推”技术
[解决办法]

引用:

你没有说出关键的差别。人家是想做“即使通讯”，也就是说一个用户发消息，那么其它用户立刻就显示出来了，而不是的等待3秒钟，更不能等待一分钟。

这么说过分了一下，网络应用根本就不存在立刻的概念，有一定延时是正常的，关键是是否满足需求。

[分享]基于Comet推送的动态实时曲线图

热点推荐