这是我最高兴分享的答案,因为它代表了一种更简洁的实现,它是轻量级的,并且在当今的移动(数据受限)环境中运行良好。
多年来,已经有几种方法可以提供从服务器到客户端的“实时”数据推送(或推送数据的外观)。快速短轮询(类似于基于AJAX的答案),长轮询,永远帧,服务器发送事件和WebSocket是用于实现此目的的不同传输机制。SignalR是一个抽象层,能够根据客户端和服务器的能力选择适当的传输机制。使用SignalR最好的部分是它很简单。您不必担心传输机制,并且编程模型易于理解。
我将定义一个SignalR集线器,但将其保留为空。
public class GameHub : Hub
{
}
当我将数据添加到“数据库”时,我将运行以下代码。如果您阅读了该问题,您会看到我在“创建”表单中将其注释掉了。您将无需对此发表评论。
var context = GlobalHost.ConnectionManager.GetHubContext<GameHub>();
context.Clients.All.addGame(game);
<h1>SignalR</h1>
<asp:Repeater runat="server" ID="BoardGameRepeater" ItemType="RealTimeDemo.Models.BoardGame">
<HeaderTemplate>
<table border="1">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody id="BoardGameTblBody">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#: Item.Id %></td>
<td><%#: Item.Name %></td>
<td><%#: Item.Description %></td>
<td><%#: Item.Quantity %></td>
<td><%#: Item.Price %></td>
</tr>
</ItemTemplate>
<FooterTemplate></tbody></table></FooterTemplate>
</asp:Repeater>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="Scripts/jQuery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-2.1.1.min.js"></script>
<script src="signalr/hubs"></script>
<script type="text/javascript">
var hub = $.connection.gameHub;
hub.client.addGame = function (game) {
$("#BoardGameTblBody").append("<tr><td>" + game.Id + "</td><td>" + game.Name + "</td><td>" + game.Description + "</td><td>" + game.Quantity + "</td><td>" + game.Price + "</td></tr>");
};
$.connection.hub.start();
</script>
以及后面的代码:
protected void Page_Load(object sender, EventArgs e)
{
BoardGameRepeater.DataSource = Application["BoardGameDatabase"];
BoardGameRepeater.DataBind();
}
注意这里发生了什么。当服务器调用时,context.Clients.All.addGame(game);
它正在执行hub.client.addGame
为连接到GameHub的每个客户端分配的功能。SignalR负责为我整理事件,并自动将game
服务器上的game
对象转换为客户端上的对象。最重要的是,每隔几秒钟就没有来回的网络流量,因此它的重量非常轻。
优点: