第五章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:

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