实现服务器端与客户端的高频实时通信 SignalR(2)
说明:本篇文章与上篇文章 实现服务器端与客户端的实时通信 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;
}
} });
实现服务器端与客户端的高频实时通信 SignalR(2)的更多相关文章
- 【转】Android Https服务器端和客户端简单实例
转载地址:http://blog.csdn.net/gf771115/article/details/7827233 AndroidHttps服务器端和客户端简单实例 工具介绍 Eclipse3.7 ...
- 【知识积累】服务器端获取客户端的IP地址(当客户端调用由Axis开发的WebService)
一.前言 由于项目中一个小的模块需要获取客户端的IP地址以保证安全调用webservice接口,项目中客户端使用C#编写,服务器端使用Java编写,服务器端与客户端采用Axis开发的WebServic ...
- pushlet实现服务器端向客户端推送信息
使用Pushlet来实现服务器端向客户端推送信息 1. 实现方式: 有两种实现方式: 1. 通过配置文件来实现定时的从服务器端向客户端推送信息 2. 通过API主动 ...
- net remoting 服务器端订阅客户端(附源代码)
remoting 在分布式应用中逐渐在企业级应用发展开来,最初提出分布式应用,主要目的是为了降低服务器的压力,将耗性能的处理放在另外一个程序中,然后将计算结果发送到另外一个应用中.而remoting就 ...
- gridview checkbox从服务器端和客户端两个方面实现全选和反选
GridView中的checkbox的全选和反选在很多的地方都是要求实现的,所以下面就从服务器端和客户端两个方面实现了checkbox的选择,感兴趣的朋友可以了解下,希望本文对你有所帮助 GridVi ...
- 使用Pushlet来实现服务器端向客户端推送信息
使用Pushlet来实现服务器端向客户端推送信息 1. 实现方式: 有两种实现方式: 1. 通过配置文件来实现定时的从服务器端向客户端推送信息 2. 通过A ...
- java 通过TCP\UDP 协议实现多人聊天,点对点,文件传送-----分服务器端和客户端
java 通过TCP\UDP 协议实现多人聊天,点对点,文件传送-----分服务器端和客户端 启动界面如下图: 首先启动服务器: 客户端登陆,登陆成功后为: 默认发送是全部用户,是多人发送. 当在边列 ...
- python服务器端、客户端的模型,客服端发送请求,服务端进行响应(web.py)
服务器端.客户端的模型,客服端发送的请求,服务端的响应 相当于启动了一个web server install web.py 接口框架用到的包 http://webpy.org/tutorial3.zh ...
- centos shell编程3【告警系统】 没有服务器端和客户端的概念 main.sh mon.conf load.sh 502.sh mail.php mail.sh disk.sh 第三十七节课
centos shell编程3[告警系统] 没有服务器端和客户端的概念 main.sh mon.conf load.sh 502.sh mail.php mail.sh disk.sh 第三十七 ...
随机推荐
- 为什么网页通常把JS调用放在底部?
JS是单线程,浏览器是多线程.当我们在浏览器的地址栏里输入一个url地址,访问新页面时,页面展示的快慢是由一个单线程控制,这个线程叫做UI线程.UI线程会根据页面里资源(资源是html文件.图片.cs ...
- 虚拟机CentOS-mini安装完成后的网络设置
系统环境:虚拟机, CentOS-mini,x86-64, 1. 主机名设置 涉及的文件: /etc/hostname; /etc/sysconfig/network 1.1 在/etc/hostn ...
- BZOJ3868 : The only survival
枚举每个点到$1$的距离,若$>k$则视为$k+1$,那么$d_1=1,d_n=k$. 对于$i$,如果$1\leq d_i\leq k$,则一定要存在一条边长度为$d_i-d_j$,且其他边长 ...
- 编写unit test以及自动化测试WebDriver
http://msdn.microsoft.com/en-us/library/hh694602.aspx#BKMK_Quick_starts http://www.seleniumhq.org/ ...
- topcoder SRM 623 DIV2 CatchTheBeatEasy
比较简单的一题,纠结比较久的是把my_cmp和my_minus放在类中,利用sort函数会出现 no matching function for call to ""sort(st ...
- 【BZOJ】2659: [Beijing wc2012]算不出的算式
题意 给两个奇质数\(p, q(p, q < 2^{31})\),求\(\sum_{k=1}^{\frac{p-1}{2}} \left \lfloor \frac{kq}{p} \right ...
- 【POJ】1160 Post Office
http://poj.org/problem?id=1160 题意:直线上有n个城市,其中有p个城市有邮局,问如何建p个邮局使得每个城市到最近的邮局和最小.(n<=300, p<=30&a ...
- BZOJ4027: [HEOI2015]兔子与樱花 贪心
觉得是贪心,但是一开始不太肯定...然后就A了 一个点对它的父亲的贡献就是自己的权值加儿子的个数 #include<bits/stdc++.h> using namespace std; ...
- UVA 558 判定负环,spfa模板题
1.UVA 558 Wormholes 2.总结:第一个spfa,好气的是用next[]数组判定Compilation error,改成nexte[]就过了..难道next还是特殊词吗 题意:科学家, ...
- 深入浅出 - Android系统移植与平台开发(十一) - Sensor HAL框架分析之一
作者:唐老师,华清远见嵌入式学院讲师. 1. Sensor的概念 Sensor即传感器,在当前智能手机上大量存在:G-Sensor.LightsSensor. ProximitySensor.Temp ...