第五章SignalR的實時高頻通訊

2019-11-17 02:03:08

字體：大中小

來源：轉載

供稿：網友

第五章SignalR的實時高頻通訊

Posted on 2015-03-29 15:51 珠海華仔閱讀(...) 評論(...) 編輯收藏

第五章SignalR的實時高頻通訊

概述：本例子演示了如果創建一個對象與其他瀏覽器共享實時狀態的應用程序。我們要創建的應用程序為“MoveShape”，該MoveShape頁面會顯示一個Html Div元素，用戶可以拖動，并且在用戶拖動時，該元素的新位置將被發送到服務器，這樣，其他所有已連接的客戶端都會同步更新該元素的位置。

在這個例子中使用的應用程序是基于迪米安·愛德華茲的Demo制作的，你可以在這里看到該視頻。

本例子將演示從形狀的拖動事件引發時，如何發送SignalR消息開始，至每個已連接的客戶端將收到該消息，并且更新本地形狀的位置。

雖然使用這種方法能夠很好地對SignalR的高頻實時功能進行演示，但這不是一個推薦的編程模型。因為:

1）沒有限制發送消息上限，會令客戶端和服務器端發送和接收大量的消息，最終導致性能下降。

2）每次接收到新位置后，形狀的位置會由方法立即更新，而不是平滑地移動到新位置，所以客戶端上形狀動畫也會被打亂。

本例子的后面部分將演示如何創建一個定時器的功能，限制該消息在客戶端和服務器端之間的發送更新消息的最大頻率。本例子創建的應用程序的最終版可以在這里下載。

1.創建項目并添加SignalR和jQuery.UI NuGet包：

1）在VS2013中創建一個 asp.net Web應用程序：

2）在新的Asp.Net項目窗口中，選擇空項目并且創建：

3）在解決方案資源管理器中，右擊該項目，添加一個SignalR集顯器類（V2），該類命名為MoveShapeHub.cs，并將其添加到項目中，此步驟創建MoveShapeHub類，并將SignalR腳本和程序集引用添加到該項目中。

注意：您同樣可以用庫軟件包管理器來添加SignalR引用，可以參考前面的例子。

4）使用庫軟件包管理器來添加jQueryUI。

在程序包管理控制臺中，運行以下命令：

Install-Package jQuery.UI.Combined

該步驟將jQuery.UI庫添加到項目中。

5）在解決方案資源管理器中展開腳本文件夾，您可以看到SignalR和jQuery腳本已經被添加到項目中：

2.創建基礎應用程序：

在本節中，我們將創建在客戶端中鼠標移動事件觸發時，形狀的位置發送到服務器的應用程序。至于創建服務器廣播該消息給所有其他已連接的客戶端的功能，我們將在后面的章節中繼續講解，現在，請把注意力集中在集線器類的創建上。

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集線器類的一個實現。在入門教程中，我們使用了客戶端直接調用的方法。在這本教程中，客戶端將會發送一個包含形狀的新的X及Y坐標點對象到服務器上，并且被廣播給其他所有已連接的客戶端。SignalR將使用JSON來序列化該對象。

我們創建了一個ShapeModel類來作為坐標屬性的容器，它包含了形狀位置的信息。同時，我們需要指定那些客戶僅作為消息的接收端。所以服務器上的對象還包含一個成員跟蹤那些客戶端的數據被儲存。這樣，指定的客戶端才不會發送它自己的形狀坐標數據到服務器上。該成員使用JsonIgnore屬性，防止它被序列化并被發送到客戶端。

3.在應用程序啟動時啟用集線器：

1）我們將把設置在應用程序啟動時，自動啟用集線器映射。在SignalR2.0中，這是通過增加OWIN啟動類來實現的。啟動類的配置方法中會調用MapSigalR方法，同時啟動類會使用Assembly特性來將啟動類注冊到OWIN的啟動處理過程中。

在解決方案資源管理器中，添加一個OWIN啟動類，將其命名為Startup并添加。

2）使用一下的代碼替換Startup類的內容：

using Microsoft.Owin;

using Owin;

[assembly: OwinStartup(typeof(MoveShapeDemo.Startup))]

namespace MoveShapeDemo

{

public class Startup

{

public void Configuration(IAppBuilder app)

{

app.MapSignalR();

}

4.添加客戶端：

1）接下來，我們將添加客戶端。添加一個Html頁面，并且命名為Default.html帶項目中。

2）在解決方案資源管理器中，右擊剛剛添加的頁面，點擊設為起始頁。

3）用下面的代碼替換Html頁面中的：

<!DOCTYPE html>

<html>

<head>

<title>SignalR MoveShape Demo</title>

</head>

<body>

$(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>

</body>

</html>

意：請檢查代碼中所引用的腳本是否同腳本文件夾中的一致：

上面的Html和JS代碼創建了一個紅色的Div，id為Shape。在Shape拖動時，將觸發它的drag事件，并將Div的位置發送給服務器。

4) 按下F5啟動應用程序，復制頁面的URL并打開一個新的瀏覽器，粘貼并打開，拖動一個瀏覽器的窗口中的形狀，另一個瀏覽器的形狀位置也將同步進行更新。

5.添加服務器循環：

在目前的應用中，每當服務器接收到新的消息時，都會將它們廣播到所有的客戶端上。同客戶端的問題一樣：消息總是不斷發送，而不是在需要時才發送，并且可能導致連接被結果淹沒。以下服務器代碼就是為了解決這一問題：已實現節流出書消息的速率定時器（減少并發，防止不斷并發而導致連接的實例沒創建，就要發送，導致發送失敗，也可以防止并發連接和并發推送消息太多，導致同一時間資源占用過多，）。

1）使用以下代碼更新MoveShapeHub: