标签：
说明：本篇文章与上篇文章 实现服务器端与客户端的实时通信 SignalR(1) 基本代码类似，只是做了些处理 高频 的改动。
一、本文出处：SignalR 实例介绍 （建议看原著里面有DEMO下载）
二、这篇文章介绍如何利用 VS2012 创建一个简单的实时高频反馈系统，建好后的样子如下：拖动某个窗口的红色框，其余窗口的红色框跟着运动。
三、Demo 创建
1、新建项目以及新建完成后的目录结构如上篇文章所示（项目名称为 MoveShape）：
2、安装 SignalR 程序包，该包实现了服务端与客户端的通信。
与上篇的区别在于，此处需要另外安装 Jquery.UI 的程序包，运行命令：Install-Package jQuery.UI.Combined。
3、添加类用于接收客户端的信息以及广播收到的信息，该类的名字命名为： MoveHub.cs，该类继承自 Hub 类，并在该类中添加如下代码：
namespace MoveShape { [HubName("MoveHub")] public class MoveHub : Hub { [HubMethodName("UpdateOtherModel")] public void UpdateOtherModel(ServerModel clientModel) { clientModel.LastUpdatedBy = Context.ConnectionId; // 更新在Web端注册的站点 Model（去掉了当前的发送者） Clients.AllExcept(clientModel.LastUpdatedBy).updateShape(clientModel); } } public class ServerModel { //将传输的 Json 属性定义为与客户端一样的名字 left top [JsonProperty("left")] public double Left1 { get; set; } [JsonProperty("top")] public double Top2 { get; set; } // 拒绝客户端获得 LastUpdatedBy 属性 [JsonIgnore] public string LastUpdatedBy { get; set; } } }
4、添加启动类用于配置路由，该类的名字命名为：Startup.cs，与上篇文章代码一样。
5、添加HTML页面用于发送以及接受消息,该HTML页面的名字命名为：MoveShape.Html ，代码如下：
HTML：
<div id="shape" ></div>
CSS：
<style> #shape { width: 100px; height: 100px; background-color: #FF0000; } </style>
脚本：
<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery-ui-1.11.4.min.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="/signalr/hubs"></script>
<script>
$(function () {
var moveShapeHub = $.connection.MoveHub;
$shape = $("#shape");
shapeModel = {
left: 0,
top: 0
};
moveShapeHub.client.updateShape = function (model) {
shapeModel = model;
$shape.css({ left: shapeModel.left, top: shapeModel.top });
};
$.connection.hub.start().done(function () {
$shape.draggable({
drag: function () {
shapeModel = $shape.offset();
moveShapeHub.server.UpdateOtherModel(shapeModel);
}
});
});
});
</script>
6、运行该HTML页面，复制到不同标签页，就可以实现拖动功能的互动。
7、上面的操作与我们上一篇的发送以及接受机制完全一样，但是在拖动红色框的过程中，一直在向服务器发送信息，这样非常浪费资源，因此我们可以在客户端使用 setInterval 来控制发送的频率，改动JS脚本如下：
<script> $(function () { var moveShapeHub = $.connection.MoveHub; $shape = $("#shape"); shapeModel = { left: 0, top: 0 }; updateRate = 2000; moved = false; moveShapeHub.client.updateShape = function (model) { shapeModel = model; $shape.css({ left: shapeModel.left, top: shapeModel.top }); }; $.connection.hub.start().done(function () { $shape.draggable({ drag: function () { shapeModel = $shape.offset(); //moveShapeHub.server.UpdateOtherModel(shapeModel); moved = true; } }); setInterval(updateServerModel, updateRate); }); function updateServerModel() { // Only update server if we have a new movement if (moved) { moveShapeHub.server.UpdateOtherModel(shapeModel); moved = false; } } });
标签：
原文地址：http://www.cnblogs.com/waitingAlone/p/5053260.html
