MVC下signalr +highcharts,在线实时图表

原创
2013/04/12 18:49
阅读数 2.7K

继续昨天未完成的博客。

signalr是c#下的一种服务器与客户端通信技术。基于长轮询。(据官方文档描述,可以根据具体浏览器选择使用长轮询或者web socket)使用非常方便。

先展示结果:

然后我用一个客户端模拟新数据插入,即向服务器发送了一个新数据。服务器会给所有的浏览器发送响应,浏览器拿到数据后通过脚本更新图表。

我输入一条信息后,再看浏览器,会自动刷新图表。只有当我有输入后,浏览器才会更新数据。

可以看到已经变化了。我输了三次数据,浏览器就会更新三个记录。对所有用户有效。测试前,可以分别用ie ,firefox 打开到本地服务器这个页面。可以看到所有浏览器都已经更新。

结合上一篇博客说到的数据库推送技术,只要将客户端换成dll加载到 数据库触发器,便可以实现,新数据插入后,页面实时展示。

这里先把本次的demo代码贴出来。

客户端的代码,这些都是从highcharts官方贴过来的,简单修改了一些。这个图表中共有三条曲线,我发现每次同时更新三条曲线会有一个问题,highcharts的线条前进动画没了。只能一条条绘制,所以就用了fadeTogge的回调函数,竟然有效!

<head>
    <script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.signalR-1.0.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var connection = $.connection('/echo');

            connection.received(function (data) {
                $('#messages').append('<li>' + data + '</li>');
                                var series = chart.series[0];
                                var series1 = chart.series[1];
                                var series2 = chart.series[2];
                                var x = (new Date()).getTime(), // current time
                                y = Math.random();
                                series.addPoint([x, y], true, true);

            });

            connection.start().done(function () {
                $("#broadcast").click(function () {
                    connection.send($('#msg').val());
                });
            });



            var chart;
            $(document).ready(function () {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'spline',
                        marginRight: 130,
                        marginBottom: 25,
                        animation: Highcharts.svg, // don't animate in old IE
                        events: {
                            load: function () {
                                // set up the updating of the chart each second
                                setInterval(function () {
                                    z = Math.random() + 3;
                                    $('#messages').fadeToggle('1', function () {
                                        series1.addPoint([x, z], true, true);
                                    });
                                    d = Math.random() + 10;
                                    $('#messages').fadeToggle('1', function () {
                                        series2.addPoint([x, d], true, true);
                                    });

                                }, 3100);
                            }
                        }
                    },
                    title: {
                        text: 'Monthly Average Temperature',
                        x: -20 //center
                    },
                    subtitle: {
                        text: 'Source: WorldClimate.com',
                        x: -20
                    },
                    xAxis: {
                        type: 'datetime',
                        tickPixelInterval: 150
                    },
                    yAxis: {
                        title: {
                            text: 'Temperature (°C)'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                        Highcharts.numberFormat(this.y, 2);
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -10,
                        y: 100,
                        borderWidth: 0
                    },
                    series: [{
                        name: 'Tokyo',
                        data: (function () {
                            // generate an array of random data
                            var data = [],

                        time = (new Date()).getTime(),
                        i;
                            for (i = -19; i <= 0; i++) {
                                data.push({
                                    x: time + i * 1000,
                                    y: Math.random()
                                });
                            }
                            return data;
                        })()
                    }, {
                        name: 'BeiJing',
                        data: (function () {
                            // generate an array of random data
                            var data = [],

                        time = (new Date()).getTime(),
                        i;
                            for (i = -19; i <= 0; i++) {
                                data.push({
                                    x: time + i * 1000,
                                    y: Math.random()
                                });
                            }
                            return data;
                        })()
                    },
                    {
                        name: 'JiNan',
                        data: (function () {
                            // generate an array of random data
                            var data = [],

                        time = (new Date()).getTime(),
                        i;
                            for (i = -19; i <= 0; i++) {
                                data.push({
                                    x: time + i * 1000,
                                    y: Math.random()
                                });
                            }
                            return data;
                        })()
                    }
                    ]
                });
            });
        });
</script>
</head>
<body>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <input type="text" id="msg" />
    <input type="button" id="broadcast" value="broadcast" />
    <ul id="messages">
    </ul>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
服务器代码:

public class DJ_Connection : PersistentConnection
    {
        protected override Task OnReceived(IRequest request, string connectionId, string data)
        {
            return Connection.Broadcast(data);
        }

     
    }
这个很简单,具体的signalr的使用很多啦。大家可以去网上搜索下。或者看官方的demo。在github上。使用起来比想象中还要很简单。。。

ok。再来看,console程序,模拟新数据插入响应给服务器:

using Microsoft.AspNet.SignalR.Client;

namespace Console2Web_SignalR
{
    class Program
    {
        static void Main(string[] args)
        {
            // Connect to the service
            var connection = new Connection("http://localhost:10010/echo");

            // Print the message when it comes in
            connection.Received += data => Console.WriteLine(data);

            // Start the connection
            connection.Start().Wait();

            string line = null;
            while ((line = Console.ReadLine()) != null)
            {
                // Send a message to the server
                connection.Send(line).Wait();
            }
        }
    }
}
这段代码完全照搬官方了,很简单。

好啦,今天就这些啦。

之后会去完成真实应用相关代码。再跟大家分享。

展开阅读全文
打赏
2
30 收藏
分享
加载中
good!
2016/01/18 15:06
回复
举报
更多评论
打赏
1 评论
30 收藏
2
分享
返回顶部
顶部