上次用客户端进行数据刷新的方式,和官方的Demo实现存在差异性,今天花了一点时间好好研究了一下后台时时刷新的方式.将写的代码重新update了一次,在这之前找过好多的资料,发现都没有找到好的例子,自己查了一下官方的DEMO然后本地实现了一次,结合Jqgrid的前端库,发现还是非常便捷的.不多说了,直接上代码了.

前端代码:

1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4     <link href="Style/jquery-ui.css" rel="stylesheet" />
5     <link href="Style/ui.jqgrid.css" rel="stylesheet" />
6     <link href="Style/ui.jqgrid-bootstarp.css" rel="stylesheet" />
7 
8     <!--</span><span style="color: #008000;">Reference the jQuery library. this library should be first one  </span><span style="color: #008000;">-->
9     <script src="Scripts/jquery-1.10.2.min.js">script>
10     

<!--</span><span style="color: #008000;">Reference the SignalR library. </span><span style="color: #008000;">-->
11     <script src="Scripts/jquery.signalR-2.0.2.js">script>
12     

<!--</span><span style="color: #008000;">Reference the jqgrid core library. </span><span style="color: #008000;">-->
13     <script src="Scripts/jquery.jqGrid.min.js">script>
14     

<!--</span><span style="color: #008000;">Reference the jqgrid language library. </span><span style="color: #008000;">-->
15     <script src="Scripts/grid.locale-en.js">script>
16     

<!--</span><span style="color: #008000;">Reference the autogenerated SignalR hub script. </span><span style="color: #008000;">-->
17     <script src='signalr/hubs'>script>
18 
19     <script type="text/javascript">
20 
21         var mydata = { State: "none", Price: 1.99, Brand: "none" };
22 
23         var ticket;
24 
25         $(function () {
26             InitJqGrid();
27             ticket = $.connection.pricehub;
28             InitTicket(ticket);
29             $.connection.hub.start().done(function () {
30 
31                 $("#btnstart").click(function () {
32                     ticket.server.startTickets();
33                 });
34 
35 
36 
37                 $("#btnstop").click(function () {
38                     ticket.server.stopTickets();
39                 });
40             });
41 
42         })
43 
44 
45 
46         //
47         function InitJqGrid() {
48             $("#tbprice").jqGrid({
49                 datatype: "local",
50                 data: mydata,
51                 height: 600,
52                 width: 500,
53                 multiselect: false,
54                 autowidth: true,
55                 rownumbers: true,
56                 rowNum: 50, //if you don't set this ,the page size will just show about 20 row counts.
57                 colNames: ['State', 'Price', 'Brand'],
58                 colModel: [
59                     { label: 'State', name: 'State', width: 60 },
60                     { label: 'Price', name: 'Price', width: 80 },
61                     { label: 'Brand', name: 'Brand', width: 80 }
62                 ],
63                 viewrecords: true, // show the current page, data rang and total records on the toolbar
64                 caption: "Current Price Tag",
65                 pager: "#jqGridPager"
66             });
67         }
68 
69 
70         function refreshGrid($grid, results) {
71             $grid.jqGrid('clearGridData')
72                  .jqGrid('setGridParam', { data: results })
73                  .trigger('reloadGrid');
74         }
75 
76 
77         function InitTicket(ticket) {
78             //init the client function
79             ticket.client.updateprice = function (tickets) {
80                 refreshGrid($("#tbprice"), tickets);
81             }
82         }
83     script>
84 
85     <title>Price Price title>
86 
87 
88 head>
89 <body>
90 
91 
92     <div>
93         <input type="button" id="btnstart" value="Start" />
94 
95         <input type="button" id="btnstop" value="Stop" />
96     div>
97     <div>
98         <table id="tbprice">table>
99         <div id="jqGridPager">div>
100     div>
101 body>
102 
103 
104 
105 html>

后端代码:

1 using Microsoft.AspNet.SignalR;
2 using Microsoft.AspNet.SignalR.Hubs;
3 using SignalRChat.Hubs.Data;
4 using System;
5 using System.Collections.Generic;
6 using System.Linq;
7 using System.Web;
8 using System.Threading;
9 
10 namespace SignalRChat.Hubs
11 {
12     [HubName("pricehub")]
13     public class PriceHub : Hub
14     {
15         private readonly TicketPrice _ticketprice = new TicketPrice();
16 
17         private readonly object _ticketrefreshlock = new object();
18 
19         private readonly object _ticketupdatelock = new object();
20 
21         //the time val should be static or in the static class 
22         private static Timer _timer;
23 
24         //the Interval of call function 
25         private readonly TimeSpan _updateInterval = TimeSpan.FromMilliseconds(2000);
26 
27         private static string state = "close";
28 
29         [HubMethodName("startTickets")]
30         public void StartTickets()
31         {
32             lock (_ticketrefreshlock)
33             {
34                 //the judge if it is necessary to init another thread to fresh the value 
35                 if (state == "close")
36                 {
37                     _timer = new Timer(RefreshTicket, null, _updateInterval, _updateInterval);
38                     state = "open";
39                 }
40             }
41         }
42 
43 
44 
45         [HubMethodName("stopTickets")]
46         public void StopTickets()
47         {
48             lock (_ticketrefreshlock)
49             {
50                 if (state == "open")
51                 {
52                     if (_timer != null)
53                     {
54                         _timer.Dispose();
55                         state = "close";
56                     }
57                 }
58             }
59         }
60 
61         private void RefreshTicket(object state)
62         {
63             lock (_ticketupdatelock)
64             {
65                 //return the tickets to client 
66                 BroadcastPriceTicketBoard(_ticketprice.GetAllTickets());
67             }
68         }
69 
70 
71         //this is the reference for client broswer to update the price ,and pass the value to client .
72         private void BroadcastPriceTicketBoard(List tickets)
73         {
74             //call the client javascript function to refresh data to jqgrid table(the caller proproty mean the data only to pass to caller ,not all clients)
75             Clients.Caller.updateprice(tickets);
76         }
77 
78     }
79 }```




效果图:

![](https://bruce-blog-1252554965.cos.ap-guangzhou.myqcloud.com/2016/01/081720329938599.gif) 



参考:

[===>JqGridDemo<===](http://www.trirand.com/blog/?page_id=5)



[===>SignalR-StockTicker-Demo<===](https://github.com/SignalR/SignalR-StockTicker)



项目文件:



<h2 title="SignalR.StockTicker.zip">
===>[官方StockTicker.zip](http://pan.baidu.com/s/1qWp2GwO)<===
</h2>



<h2 title="SignalR.StockTicker.zip">
===>[图中演示项目](http://pan.baidu.com/s/1hqzmz1E)<===
</h2>