[.NET]SignalR简介 - 建立 realtime 的网站
前言
一早起床后,在消化 RSS 的过程中,看到 Scott Hanselman 在 Russia TechDays 介绍 SignalR 的影片,一整个让人很惊艳,马上就想动手写写看。
由于我也是初学者,先把相关 Reference 列上来,有兴趣的朋友可以直接参考官网或影片,应该会比我的文章清楚的多。
Reference :
- github: SignalR
- Russia TechDays 影片
- Scott Hanselman blog
简介
SignalR 的重点,就在于即时 (realtime) ,以往在设计网站的时候,基本上都是透过 client 页面重新整理页面、重送 request 或定时轮询 server 端,以重新呈现即时的数据。但那根本不是即时,即时应该是 server 端一旦有了最新的数据,会主动通知 client 端更新数据的呈现。
但这样的机制,往往得透过很多机制,很多复杂的设计,才有可能达成。
SignalR 则像撰写 .NET Remoting 一般
- 在 server 端定义对应的 hub class。
- 在 client 定义 hub class 所对应的 proxy。
- 在 client 与 server间,建立一个不断的connection。
- 接着 client 端可以调用 proxy object 的方法,也就是 server 端的方法,也就是送 request 给 server 端。
- server 端接收到 request 数据后,可以针对所有的 client 发送通知。
如果各位去下载 SignalR.Sample ,其例子就是股票的即时资讯,股票的资讯没法子透过定时重新整理,那可能会亏死。如果每一秒都跟 server 送 request,那 server 一定会 loading 太重而炸掉。透过 SignalR,这不再是无解的问题。
有兴趣的朋友,可以直接在 NuGet 的 Package Manager Console,输入
install-package SignalR.Sample
即时聊天室范例
这边跟着说明文档,来建立一个可即时对所有 client 送出,某人送出最新的消息。
- 建立一个 ASP.NET 4.0 的 WebApplication or WebSite,官网上是使用 Web Application,我这边则使用 WebSite 来示范。
- 在 NuGet 的Package Manager Console,输入“install-package SignalR”,相关的参考文件,如下图所示:
- 建立一个范例网页: SignalR_Sample.aspx,供使用者可以透过网页发送与接收聊天室消息。
- 建立一个 Chat class,用来处理 client 发送的消息,以及发送通知给所有 client 的处理。
接下来,来看网页与 server 端的 hub 该怎么设计。
实践
首先,设计一个最简单的发送与接收消息的画面,程序如下:
聊天室内容:
画面:
接下来撰写 server 端 Chat class 的内容:
几个重点:
- HubName:这个 atttibute 代表 client 端要如何建立对应 server 端对象的 proxy object。透过 HubName , server 端的 class name才不会被 client 绑死。如果没有设定,则会以 server 端 class name 为 HubName 默认值。
- 继承 Hub:继承 Hub 之后,很多对应的设计就都不用写了,我们只需要把注意力放在 client 如何送 request 给 server的 hub , server 如何通知 client 即可。 Hub 上有一些属性可以使用,请参考下图:
- public void SendMessage(string message) ,就像 WebService Method 或 PageMethod 一般, client 端透过 proxy object ,可以直接调用 server 端这个方法。后续会介绍到如何在页面上使用。
- Clients property:代表所有有使用 Chat 的页面。而 Clients 的类型是 dynamic ,因为要直接对应到 JavaScript 的对象。
- Clients.addMessage(message):代表 server 端调用 Clients 上的 addMessage 方法,也就是 JavaScript 的方法。
- 总结: Chat 对象负责的,就是当 client 端调用 SendMessage() 方法后,要把这个 message ,送给所有 client 页面上呈现。以达到聊天室的功能。
Server 端的 Hub 对象设计好后,接着来看页面上如何与 server 的 hub 对象交互。
页面:
<%--很重要的一个参考,一定要加,且在这一行之前,一定要先参考jQuery.js与signalR.js--%>
- 先引用 jQuery 与 signalR 的 js 档。
- 很重要的一个步骤:加入一个 js 参考,其路径为“根目录/signalr/hubs”。 SignalR 会建立相关的 JavaScript,放置于此。
- 透过 $.connection.‘server 端的 HubName’,即可建立对应该 hub 的 proxy object。要注意,首字母需小写。
- 定义 client 端上,供 server 端通知的 JavaScript function,这边的范例是 addMessage。
- 当按下送出按钮时,调用 server 端的 SendMessage() 方法,只需要直接透过 proxy object 即可。要注意,首字母需小写。
- 记得透过 $.connection.hub.start() ,把 connection 打开。
画面
我们透过多个 browser 页面,来模拟是否所有 client 都会收到同步的消息。
接着在某一页上输入 hello world,按下送出的同时,所有页面都会即时更新消息。
结论
- 安装相当简单
- 使用相当简单
- 应用面相当广泛
其实我也只是初学者,但实在觉得这样的东西实在把底层复杂的机制包装的太美好了,忍不住赶紧跟大家介绍这个好物,相信很快就可以看到不同的应用或更深入的介绍了。
Sample
download : SignalR_WebSite.zip
或许您会对下列培训课程感兴趣:
- 2019/7/27(六)~2019/7/28(日):演化式设计:测试驱动开发与持续重构 第六梯次(中国台北)
- 2019/8/16(五)~2019/8/18(日):【C#进阶设计-从重构学会高易用性与高弹性API设计】第二梯次(中国台北)
- 2019/9/21(六)~2019/9/22(日):Clean Coder:DI 与 AOP 进阶实战 第二梯次(中国台北)
- 2019/10/19(六):【针对遗留代码加入单元测试的艺术】第七梯次(中国台北)
- 2019/10/20(日):【极速开发】第八梯次(中国台北)
想收到第一手公开培训课程资讯,或想询问企业内训、顾问、教练、咨询服务的,请洽 Facebook 粉丝专页:91敏捷开发之路。 |
原文:大专栏 [.NET]SignalR简介 - 建立 realtime 的网站