概述：本例子演示了如果創(chuàng)建一個對象與其他瀏覽器共享實時狀態(tài)的應(yīng)用程序。我們要創(chuàng)建的應(yīng)用程序為“MoveShape”，該MoveShape頁面會顯示一個Html Div元素，用戶可以拖動，并且在用戶拖動時，該元素的新位置將被發(fā)送到服務(wù)器，這樣，其他所有已連接的客戶端都會同步更新該元素的位置。
在這個例子中使用的應(yīng)用程序是基于迪米安·愛德華茲的Demo制作的，你可以在這里看到該視頻。
本例子將演示從形狀的拖動事件引發(fā)時，如何發(fā)送SignalR消息開始，至每個已連接的客戶端將收到該消息，并且更新本地形狀的位置。
雖然使用這種方法能夠很好地對SignalR的高頻實時功能進行演示，但這不是一個推薦的編程模型。因為:
1）沒有限制發(fā)送消息上限，會令客戶端和服務(wù)器端發(fā)送和接收大量的消息，最終導致性能 下降。
2）每次接收到新位置后，形狀的位置會由方法立即更新，而不是平滑地移動到新位置，所 以客戶端上形狀動畫也會被打亂。
本例子的后面部分將演示如何創(chuàng)建一個定時器的功能，限制該消息在客戶端和服務(wù)器端之間的發(fā)送更新消息的最大頻率。本例子創(chuàng)建的應(yīng)用程序的最終版可以在這里下載。
1）在VS2013中創(chuàng)建一個asp.net Web應(yīng)用程序：
2）在新的Asp.Net項目窗口中，選擇空項目并且創(chuàng)建：
3）在解決方案資源管理器中，右擊該項目，添加一個SignalR集顯器類（V2），該類命名為MoveShapeHub.cs，并將其添加到項目中，此步驟創(chuàng)建MoveShapeHub類，并將SignalR腳本和程序集引用添加到該項目中。
注意：您同樣可以用庫軟件包管理器來添加SignalR引用，可以參考前面的例子。
4）使用庫軟件包管理器來添加jQueryUI。
在程序包管理控制臺中，運行以下命令：
Install-Package jQuery.UI.Combined |
該步驟將jQuery.UI庫添加到項目中。
5）在解決方案資源管理器中展開腳本文件夾，您可以看到SignalR和jQuery腳本已經(jīng)被添加到項目中：
在本節(jié)中，我們將創(chuàng)建在客戶端中鼠標移動事件觸發(fā)時，形狀的位置發(fā)送到服務(wù)器的應(yīng)用程序。至于創(chuàng)建服務(wù)器廣播該消息給所有其他已連接的客戶端的功能，我們將在后面的章節(jié)中繼續(xù)講解，現(xiàn)在，請把注意力集中在集線器類的創(chuàng)建上。
1）如果在之前您使用包控制臺來添加SignalR，請先添加MoveShapeHub類到項目中。
2）使用下面的代碼替代換掉的MoveShapeHub中的：
using Microsoft.AspNet.SignalR; using Newtonsoft.Json; namespace MoveShapeDemo { public class MoveShapeHub : Hub { public void UpdateModel(ShapeModel clientModel) { clientModel.LastUpdatedBy = Context.ConnectionId; // Update the shape model within our broadcaster Clients.AllExcept(clientModel.LastUpdatedBy).updateShape(clientModel); } } public class ShapeModel { // We declare Left and Top as lowercase with // JsonPRoperty to sync the client and server models [JsonProperty("left")] public double Left { get; set; } [JsonProperty("top")] public double Top { get; set; } // We don't want the client to get the "LastUpdatedBy" property [JsonIgnore] public string LastUpdatedBy { get; set; } } } |
MoveShapeHub是SignalR集線器類的一個實現(xiàn)。在入門教程中，我們使用了客戶端直接調(diào)用的方法。在這本教程中，客戶端將會發(fā)送一個包含形 狀的新的X及Y坐標點對象到服務(wù)器上，并且被廣播給其他所有已連接的客戶端。SignalR將使用JSON來序列化該對象。
我們創(chuàng)建了一個ShapeModel類來作為坐標屬性的容器，它包含了形狀位置的信息。同時，我們需要指定那些客戶僅作為消息的接收端。所以服務(wù)器上 的對象還包含一個成員跟蹤那些客戶端的數(shù)據(jù)被儲存。這樣，指定的客戶端才不會發(fā)送它自己的形狀坐標數(shù)據(jù)到服務(wù)器上。該成員使用JsonIgnore屬性， 防止它被序列化并被發(fā)送到客戶端。
1） 我們將把設(shè)置在應(yīng)用程序啟動時，自動啟用集線器映射。在SignalR2.0中，這是通過增加OWIN啟動類來實現(xiàn)的。啟動類的配置方法中會調(diào)用MapSigalR方法，同時啟動類會使用Assembly特性來將啟動類注冊到OWIN的啟動處理過程中。
在解決方案資源管理器中，添加一個OWIN啟動類，將其命名為Startup并添加。
2）使用一下的代碼替換Startup類的內(nèi)容：
using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(MoveShapeDemo.Startup))] namespace MoveShapeDemo { public class Startup { public void Configuration(IAppBuilder app) { app.MapSignalR(); } } } |
1）接下來，我們將添加客戶端。添加一個Html頁面，并且命名為Default.html帶項目中。
2）在解決方案資源管理器中，右擊剛剛添加的頁面，點擊設(shè)為起始頁。
3）用下面的代碼替換Html頁面中的：
<!DOCTYPE html> <html> <head> <title>SignalR MoveShape Demo</title> <style>#shape { width: 100px;height: 100px;background-color: #FF0000;}</style> </head> <body> <script src="Scripts/jquery-1.10.2.min.js"></script> <script src="Scripts/jquery-ui-1.10.4.min.js"></script> <script src="Scripts/jquery.signalR-2.0.0.js"></script> <script src="/signalr/hubs"></script> <script> $(function () { var moveShapeHub = $.connection.moveShapeHub, $shape = $("#shape"), shapeModel = { left: 0, top: 0 }; moveShapeHub.client.updateShape = function (model) { shapeModel = model; $shape.CSS({ left: model.left, top: model.top }); }; $.connection.hub.start().done(function () { $shape.draggable({ drag: function () { shapeModel = $shape.offset(); moveShapeHub.server.updateModel(shapeModel); } }); }); }); </script> <div id="shape" /> </body> </html> |
意：請檢查代碼中所引用的腳本是否同腳本文件夾中的一致：
上面的Html和JS代碼創(chuàng)建了一個紅色的Div，id為Shape。在Shape拖動時，將觸發(fā)它的drag事件，并將Div的位置發(fā)送給服務(wù)器。
4) 按下F5啟動應(yīng)用程序，復(fù)制頁面的URL并打開一個新的瀏覽器，粘貼并打開，拖動一個瀏覽器的窗口中的形狀，另一個瀏覽器的形狀位置也將同步進行更新。
在目前的應(yīng)用中，每當服務(wù)器接收到新的消息時，都會將它們廣播到所有的客戶端上。同客戶端的問題一樣：消息總是不斷發(fā)送，而不是在需要時才發(fā)送，并且可能導致連接被結(jié)果淹沒。以下服務(wù)器代碼就是為了解決這一問題：已實現(xiàn)節(jié)流出書消息的速率定時器（減少并發(fā)，防止不斷并發(fā)而導致連接的實例沒創(chuàng)建，就要發(fā)送，導致發(fā)送失敗，也可以防止并發(fā)連接和并發(fā)推送消息太多，導致同一時間資源占用過多，）。
1）使用以下代碼更新MoveShapeHub:
using System; using System.Threading; using Microsoft.AspNet.SignalR; using Newtonsoft.Json; namespace MoveShapeDemo { public class Broadcaster { private readonly static Lazy<Broadcaster> _instance = new Lazy<Broadcaster>(() => new Broadcaster()); // We're going to broadcast to all clients a maximum of 25 times per second private readonly TimeSpan BroadcastInterval = TimeSpan.FromMilliseconds(40); private readonly IHubContext _hubContext; private Timer _broadcastLoop; private ShapeModel _model; private bool _modelUpdated; public Broadcaster() { // Save our hub context so we can easily use it
學習交流
熱門圖片
猜你喜歡的新聞
新聞熱點  2019-10-23 09:17:05
 2019-10-21 09:20:02
 2019-10-21 09:00:12
 2019-09-26 08:57:12
 2019-09-25 08:46:36
 2019-09-25 08:15:43
疑難解答 |
