西瓜柚子冰 发表于 2018-7-23 20:57:50

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>

yuli92 发表于 2018-7-23 21:29:28

非常好,顶一下

叫我牡羊座 发表于 2018-7-26 00:42:42

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

才记纸品 发表于 2018-7-26 06:07:54

我了个去,顶了

兮夏回忆heart 发表于 2018-7-30 04:13:38

呵呵,低调,低调!

帕卡国王 发表于 2018-8-3 02:28:33

我只是路过,不发表意见

惠州天驿 发表于 2018-8-4 04:36:44

我也是坐沙发的

chenshibin 发表于 2018-8-4 07:32:56

确实不错,顶先

众邦科技 发表于 2018-8-6 17:17:05

佩服佩服!

小米小米米灵儿 发表于 2018-8-9 06:39:58

看帖要回,回帖才健康,在踩踩,楼主辛苦了!
页: [1] 2 3 4 5 6 7 8 9 10
查看完整版本: asp.net即时通信框架——signalR起步