[分享]基于Comet推送的动态实时曲线图
查看原帖
有人问的问题 就是BS结构下的实时的曲线,这个用的好像很多,
于是中午吃饭的时间利用以前在网上找的推送的东西 写了一个
比较简单,用的jschart可以修改你自己想要的chart(js的flash都行)
<script language="javascript" type="text/javascript">
$(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"
);
}
});
</script>
<div id="graph">Loading graph...</div>
<httpHandlers>
<add path="GetChartData.do" type="AsnyHandler" verb="POST,GET"/>
</httpHandlers>
using System;
using System.Collections.Generic;
using System.Web;
using System.Threading;
/// <summary>
/// Summary description for AsnyHandler
/// </summary>
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 < 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;
/// <summary>
/// Summary description for Messages
/// </summary>
public class Messages
{
//记录所有请求的客户端
List<myAsynResult> clients = new List<myAsynResult>();
#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<myAsynResult> 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();
}
}
}
