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引用

                               
登录/注册后可看大图

　　项目中添加Hubs文件夹

                               
登录/注册后可看大图

　　添加SignalR集线器类

                               
登录/注册后可看大图

　　服务端的集线器方法：
　　[HubName("myhub")]//声明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>

yuli92

非常好，顶一下

叫我牡羊座

发发呆，回回帖，工作结束~

才记纸品

我了个去，顶了

兮夏回忆heart

呵呵，低调，低调！

帕卡国王

我只是路过，不发表意见

惠州天驿

我也是坐沙发的

chenshibin

确实不错，顶先

众邦科技

佩服佩服！

小米小米米灵儿

看帖要回，回帖才健康，在踩踩，楼主辛苦了！