asp.net即时通信框架——signalR起步
最近做项目有用到了即时通信的需求,写原生的WebSocket太麻烦,所以选择了SignalR。
SignalR 是一个集成的客户端与服务器库,基于浏览器的客户端和基于 ASP.NET 的服务器组件可以借助它来进行双向多步对话。
换句话说,该对话可不受限制地进行单个无状态请求/响应数据交换;它将继续,直到明确关闭。
对话通过永久连接进行,允许客户端向服务器发送多个消息,并允许服务器做出相应答复,值得注意的是,还允许服务器向客户端发送异步消息。它和AJax类似,都是基于现有的技术。本身是一个复合体。一般情况下,SignalR会使用Javascript的长轮询( long polling),实现客户端和服务端通信。在WebSockets出现以后,SignalR也支持WebSockets通信。当然SignalR也使用了服务端的任务并行处理技术以提高服务器的扩展性。它的目标整个 .NET Framework 平台,它也不限 Hosting 的应用程序,而且还是跨平台的开源项目,支持Mono 2.10+,觉得它变成是 Web API 的另一种实作选择,但是它在服务端处理联机的功能上比 ASP.NET MVC 的 Web API 要强多了,更重要的是,它可以在 Web Form 上使用。
SignalR 内的客户端库 (.NET/JavaScript) 提供了自动管理的能力,开发人员只需要直接使用 SignalR 的 Client Library 即可,同时它的 JavaScript 库可和 jQuery 完美整合,因此能直接与像 jQuery 或 Knockout.js 一起使用。
SignalR内部有两类对象:
· Persistent Connection(HTTP持久链接):持久性连接,用来解决长时间连接的能力,而且还可以由客户端主动向服务器要求数据,而服务器端也不需要实现太多细节,只需要处理 PersistentConnection 内所提供的五个事件:OnConnected, OnReconnected, OnReceived, OnError 和 OnDisconnect 即可。
· Hub:信息交换器,用来解决 realtime 信息交换的功能,服务器端可以利用 URL 来注册一个或多个 Hub,只要连接到这个 Hub,就能与所有的客户端共享发送到服务器上的信息,同时服务器端可以调用客户端的脚本,不过它背后还是不离 HTTP 的标准,所以它看起来神奇,但它并没有那么神奇,只是 JavaScript 更强,强到可以用像 eval() 或是动态解释执行的方式,允许 JavaScript 能够动态的加载与执行方法调用而己。
SignalR 将整个交换信息的行为封装得非常漂亮,客户端和服务器全部都使用 JSON 来沟通,在服务器端声明的所有 hub 的信息,都会一般生成 JavaScript 输出到客户端,.NET 则是依赖 Proxy 来生成代理对象,这点就和 WCF/.NET Remoting 十分类似,而 Proxy 的内部则是将 JSON 转换成对象,以让客户端可以看到对象。
下面我们来针对Persistent Connection和Hub 做个Demo试试:
添加SignalR引用
http://ww2.sinaimg.cn/large/87c01ec7gy1fsq0wlc7tsj20fe01tq38.jpg
项目中添加Hubs文件夹
http://ww1.sinaimg.cn/large/87c01ec7gy1fsq0wllm3wj2051020mwx.jpg
添加SignalR集线器类
http://ww4.sinaimg.cn/large/87c01ec7gy1fsq0wm08ikj20fe0anmyd.jpg
服务端的集线器方法:
//声明hub的显式名字
public class MyHub : Hub
{
/// <summary>
/// 服务端的Hub方法
/// </summary>
public void Send(string name, string msg)
{
Clients.All.receive(name, msg);//dynamic表达式,All:所有客户端都拿到数据,Others:除自己外的其他客户端都拿到数据,Caller:只有自己拿到数据
}
}
添加Startup.cs类配置路由:
public void Configuration(IAppBuilder app)
{
// 配置路由
app.MapSignalR();
}
前端引入脚本:
<script src="Scripts/jquery-3.1.1.js"></script>
<script src="Scripts/jquery.signalR-2.2.1.js"></script>
<script src="/signalr/hubs"></script><!--后端SignalR根据注册的路由生成的js脚本-->
前端调用:
//客户端都以驼峰命名法使用
let hubProxy = $.connection["myhub"];//hub代理对象
var $msgList = $("#msg-list");
//注册客户端方法
hubProxy.client.receive= function(name,msg) {
$msgList.append(`<li><strong>${name}</strong>:${msg}</li>`);
}
//向服务端发数据
$.connection.hub.start().done(function() {
$("#send").on("click", function(e) {
hubProxy.server.send($("#name").val(), $("#msg").val());
});
});
完整前端Demo:
<ul id="msg-list"></ul>
<input type="text" name="name" id="name"/>
<textarea name="msg" id="msg"></textarea>
<button type="button" id="send">send</button>
<script src="Scripts/jquery-3.1.1.js"></script>
<script src="Scripts/jquery.signalR-2.2.1.js"></script>
<script src="/signalr/hubs"></script><!--后端SignalR根据注册的路由生成的js脚本-->
<script>
$(function() {
//客户端都以驼峰命名法使用
let hubProxy = $.connection["myhub"]; //hub代理对象
var $msgList = $("#msg-list");
//注册客户端方法
hubProxy.client.receive = function(name, msg) {
$msgList.append(`<li><strong>${name}</strong>:${msg}</li>`);
}
//向服务端发数据
$.connection.hub.start().done(function() {
$("#send").on("click", function(e) {
hubProxy.server.send($("#name").val(), $("#msg").val());
});
});
});
</script> 非常好,顶一下 发发呆,回回帖,工作结束~ 我了个去,顶了 呵呵,低调,低调! 我只是路过,不发表意见 我也是坐沙发的 确实不错,顶先 佩服佩服! 看帖要回,回帖才健康,在踩踩,楼主辛苦了!