[.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 的网站