MVC下signalr +highcharts，在線實時圖表

時間 2019-11-10

標籤 mvc signalr highcharts 在線實時圖表简体版

原文原文鏈接

繼續昨天未完成的博客。 javascript

signalr是c#下的一種服務器與客戶端通訊技術。基於長輪詢。（據官方文檔描述，能夠根據具體瀏覽器選擇使用長輪詢或者web socket）使用很是方便。 html

先展現結果： java

而後我用一個客戶端模擬新數據插入，即向服務器發送了一個新數據。服務器會給全部的瀏覽器發送響應，瀏覽器拿到數據後經過腳本更新圖表。 jquery

我輸入一條信息後，再看瀏覽器，會自動刷新圖表。只有當我有輸入後，瀏覽器纔會更新數據。 git

能夠看到已經變化了。我輸了三次數據，瀏覽器就會更新三個記錄。對全部用戶有效。測試前，能夠分別用ie ，firefox 打開到本地服務器這個頁面。能夠看到全部瀏覽器都已經更新。 github

結合上一篇博客說到的數據庫推送技術，只要將客戶端換成dll加載到數據庫觸發器，即可以實現，新數據插入後，頁面實時展現。 web

這裏先把本次的demo代碼貼出來。數據庫

客戶端的代碼，這些都是從highcharts官方貼過來的，簡單修改了一些。這個圖表中共有三條曲線，我發現每次同時更新三條曲線會有一個問題，highcharts的線條前進動畫沒了。只能一條條繪製，因此就用了fadeTogge的回調函數，居然有效！ c#

<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();
            }
        }
    }
}

這段代碼徹底照搬官方了，很簡單。

好啦，今天就這些啦。

以後會去完成真實應用相關代碼。再跟你們分享。