SignalR 实现web浏览器客户端与服务端的推送功能.docx

上传人:hw****26 文档编号:3171957 上传时间:2019-05-24 格式:DOCX 页数:6 大小:187.87KB
下载 相关 举报
SignalR 实现web浏览器客户端与服务端的推送功能.docx_第1页
第1页 / 共6页
SignalR 实现web浏览器客户端与服务端的推送功能.docx_第2页
第2页 / 共6页
SignalR 实现web浏览器客户端与服务端的推送功能.docx_第3页
第3页 / 共6页
SignalR 实现web浏览器客户端与服务端的推送功能.docx_第4页
第4页 / 共6页
SignalR 实现web浏览器客户端与服务端的推送功能.docx_第5页
第5页 / 共6页
点击查看更多>>
资源描述

1、SignalR 实现 web 浏览器客户端与服务端的推送功能SignalR 是一个集成的客户端与服务器库,基于浏览器的客户端和基于 ASP.NET 的服务器组件可以借助它来进行双向多步对话。 换句话说,该对话可不受限制地进行单个无状态请求/响应数据交换;它将继续,直到明确关闭。 对话通过永久连接进行,允许客户端向服务器发送多个消息,并允许服务器做出相应答复,值得注意的是,还允许服务器向客户端发送异步消息。它和 AJax 类似,都是基于现有的技术。本身是一个复合体。一般情况下,SignalR 会使用 Javascript 的长轮询( long polling) ,实现客户端和服务端通信。在Web

2、Sockets 出现以后, SignalR 也支持 WebSockets 通信。当然 SignalR 也使用了服务端的任务并行处理技术以提高服务器的扩展性。它的目标整个 .NET Framework 平台,它也不限 Hosting 的应用程序,而且还是跨平台的开源项目,支持 Mono 2.10+,觉得它变成是 Web API 的另一种实作选择,但是它在服务端处理联机的功能上比 ASP.NET MVC 的 Web API 要强多了,更重要的是,它可以在 Web Form 上使用。SignalR 内的客户端库 (.NET/JavaScript) 提供了自动管理的能力,开发人员只需要直接使用 Sig

3、nalR 的 Client Library 即可,同时它的 JavaScript 库可和 jQuery 完美整合,因此能直接与像 jQuery 或 Knockout.js 一起使用。SignalR 内部有两类对象: Persistent Connection:持久性连接,用来解决长时间连接的能力,而且还可以由客户端主动向服务器要求数据,而服务器端也不需要实现太多细节,只需要处理 PersistentConnection 内所提供的五个事件:OnConnected, OnReconnected, OnReceived, OnError 和 OnDisconnect 即可。 Hub:信息交换器,用

4、来解决 realtime 信息交换的功能,服务器端可以利用 URL 来注册一个或多个 Hub,只要连接到这个 Hub,就能与所有的客户端共享发送到服务器上的信息,同时服务器端可以调用客户端的脚本,不过它背后还是不离 HTTP 的标准,所以它看起来神奇,但它并没有那么神奇,只是 JavaScript 更强,强到可以用像 eval() 或是动态解释执行的方式,允许 JavaScript 能够动态的加载与执行方法调用而己。SignalR 将整个交换信息的行为封装得非常漂亮,客户端和服务器全部都使用 JSON 来沟通,在服务器端声明的所有 hub 的信息,都会一般生成 JavaScript 输出到客户

5、端,.NET 则是依赖 Proxy 来生成代理对象,这点就和 WCF/.NET Remoting 十分类似,而 Proxy 的内部则是将 JSON 转换成对象,以让客户端可以看到对象。下面我们来针对 Persistent Connection 和 Hub 做个 Demo 试试:新建一个 ASP.NET MVC 项目 MvcApplicationSignalR,通过 Nuget 添加 SignalR 的包。新建一个类 MyConnection 继承自 PersistentConnection ,引用 SignalR 命名空间,重写OnReceivedAsync 的方法,并要求 SignalR 对

6、传入的信息做广播using System; using System.Collections.Generic; using System.Linq; using System.Text; using SignalR; using System.Threading.Tasks;namespace MvcApplicationSignalR public class MyConnection : PersistentConnection protected override Task OnReceivedAsync(IRequest request, string connectionId, st

7、ring data) / Broadcast data to all clients data = string.Format(“数据是:0 时间是:1“, data, DateTime.Now.ToString(); return Connection.Send(connectionId, data); 接着在 Global.asax 中加入对应路由信息,这会由 SignalR 的路由表来处理 Metadata 的输出工作,红色部分代码:protected void Application_Start() RouteTable.Routes.MapConnection(“echo“, “ec

8、ho/*operation“);这样服务器端就完成了。现在我们在项目中 Master、View (Home/Index),然后加入必要的代码:ViewBag.Title ViewBag.Title = “Home Page“; $(function () var connection = $.connection(echo);connection.received(function (data) $(#messages).append( + data + ); );connection.start();$(“#broadcast“).click(function () connection.s

9、end($(#msg).val(); ); $(“#btnStop“).click(function () connection.stop(); ); );ViewBag.Message 运行起来就是这个效果:下面我们来展示 SignalR 的另一个功能:由服务器端调用客户端的 JavaScript 脚本的功能,而这个功能的要求必须是要实现成 Hub 的模式,因此我们可以顺便看到如何实现一个 Hub 类型的 SignalR 应用程序。向项目中加入一个类 Chat 继承自 Hub 类 (这是 Hub 应用程序的要求) :using System; using System.Collections

10、.Generic; using System.Linq; using System.Web; using SignalR.Hubs; using System.Threading.Tasks; using System.Threading;namespace MvcApplicationSignalR HubName(“geffChat“) public class Chat : Hub public void SendMessage(string message) Clients.sendMessage(message); 这段程序代码的用意是,在连接进到 Hub 时,将连接代码加到联机用户

11、的集合中,等会就会使用到,因为我们会依照客户端的 ID 来调用客户端脚本。1. HubName:这个 atttibute 代表 client 端要如何建立对应 server 端对象的 proxy object。通过 HubName , server 端的 class name 才不会被 client 绑死。如果没有设定,则会以 server 端 class name 为 HubName 默认值。2. 继承 Hub:继承 Hub 之后,很多对应的设计就都不用写了,我们只需要把注意力放在 client 如何送 request 给 server 的 hub , server 如何通知 client

12、即可。3. public void SendMessage(string message) ,就像 WebService Method 或 PageMethod 一般, client 端通过 proxy object ,可以直接调用 server 端这个方法。后续会介绍到如何在页面上使用。4. Clients 属性:代表所有有使用 Chat 的页面。而 Clients 的型别是 dynamic ,因为要直接对应到 JavaScript 的对象。5. Clients.sendMessage(message):代表 server 端调用 Clients 上的 sendMessage 方法,也就是

13、JavaScript 的方法。6. 总结: Chat 对象职责就是当 client 端调用 SendMessage() 方法后,要把这个 message ,送给所有 client 页面上呈现。以达到聊天室的功能。澳门新濠天地官网 66bb.org服务端的做完了,开始制作客户端,同样在 Home/Index 页面上增加以下 html 代码 ViewBag.Title = “Home Page“; $(function () var connection = $.connection(/echo); connection.received(function (data) $(#messages).

14、append( + data + ); );connection.start();$(“#broadcast“).click(function () connection.send($(#msg).val(); ); $(“#btnStop“).click(function () connection.stop(); );/ 建立对应 server 端 Hub class 的对象,请注意 geffChat 的第一个字母要改成小写 var chat = $.connection.geffChat;/ 定义 client 端的 javascript function,供 server 端 hub,

15、通过 dynamic 的方式,调用所有 Clients 的 javascript function chat.sendMessage = function (message) /当 server 端调用 sendMessage 时,将 server push 的 message 数据,呈现在wholeMessage 中 $(#wholeMessages).append( + message + ); ;$(“#send“).click(function () /调用叫 server 端的 Hub 对象,将#message 数据传给 server chat.sendMessage($(#mess

16、age).val(); $(#message).val(“); );/把 connection 打开 $.connection.hub.start(););ViewBag.Message 聊天室内容: 1. 先引用 jQuery 与 signalR 的 js 文件。2. 很重要的一个步骤:加入一个 js 引用,其路径为根目录 /signalr/hubs 。 SignalR 会建立相关的 JavaScript,放置于此。3. 通过 $.connection.server 端的 HubName ,即可建立对应该 hub 的 proxy object。要注意,首字母需小写。4. 定义 client

17、端上,b31.org 供 server 端通知的 JavaScript function,这边的例子是 sendMessage。5. 当按下发送按钮时,调用 server 端的 SendMessage() 方法,只需要直接通过 proxy object 即可。要注意,首字母需小写。6. 记得透过 $.connection.hub.start() ,把 connection 打开。注意:SingalR 会自动生成一个 siganlr/hub 的桥接 js.,在本机使用 localhost 测试都不会有问题。当部署到 IIS 的时候会发生 404 错误,是由于被 IIS 误判可能是虚拟目录,解决方法是在 web.config 加入一段:

展开阅读全文
相关资源
相关搜索

当前位置:首页 > 教育教学资料库 > 精品笔记

Copyright © 2018-2021 Wenke99.com All rights reserved

工信部备案号浙ICP备20026746号-2  

公安局备案号:浙公网安备33038302330469号

本站为C2C交文档易平台,即用户上传的文档直接卖给下载用户,本站只是网络服务中间平台,所有原创文档下载所得归上传人所有,若您发现上传作品侵犯了您的权利,请立刻联系网站客服并提供证据,平台将在3个工作日内予以改正。