在 Asp.NET MVC 中使用 SignalR 实现推送功能

　　在 HomeController 中添加如下方法：

　　public ActionResult HubChat()

　　{

　　ViewBag.ClientName = "用户-" + Rnd.Next(10000, 99999);

　　return View();

　　}

　　这里由服务器根据随机数来设定客户端的名字，不够严谨，因为随机数生成的名字不是唯一的的，在这里仅为简化演示，实际应用中应该使用 GUID 。

　　然后生成对应的 View：HubChat.cshtml

　　@model dynamic

　　@{

　　ViewBag.Title = "title";

　　}

Hub Chat

　　消息记录： (你是：@ViewBag.ClientName):

　　

　　在上面的页面代码中，我添加了名为 hubDemo.js 的脚本，这将在下面介绍;此外还有一个id 为 Placeholder 的隐藏 input 控件，这是为了向 Javascript 中传递客户端的名字。

　　3)，编写 Javascript

　　向 Scripts 目录添加新的 Javescript 脚本：hubDemo.js。其内容如下：

　　$(function () {

　　var myClientName = $(‘#Placeholder‘).val();

　　// Proxy created on the fly

　　var chat = $.connection.chat;

　　// Declare a function on the chat hub so the server can invoke it

　　chat.addSomeMessage = function (clientName, message) {

　　writeEvent(‘‘ + clientName + ‘ 对大家说: ‘ + message, ‘event-message‘);

　　};

　　$("#broadcast").click(function () {

　　// Call the chat method on the server

　　chat.send(myClientName, $(‘#msg‘).val())

　　.done(function () {

　　console.log(‘Sent message success!‘);

　　})

　　.fail(function (e) {

　　console.warn(e);

　　});

　　});

　　// Start the connection

　　$.connection.hub.start();

　　//A function to write events to the page

　　function writeEvent(eventLog, logClass) {

　　var now = new Date();

　　var nowStr = now.getHours() + ‘:‘ + now.getMinutes() + ‘:‘ + now.getSeconds();

　　$(‘#messages‘).prepend(‘

　　});

　　上面代码有详细的注释，下面再讲讲关键之处：

　　1，首先获取客户端页面的名字;

　　2，然后通过 $.connection.chat 建立对应服务器端 Hub 类的代理对象 chat;

　　3，定义客户端的 Javascript 方法 addSomeMessage ，服务器通过 dynamic 方式调用客户端的该方法以实现推送功能。在这里每当收到服务器推送来的消息，就在客户端页面的 messages 列表表头插入该消息。

　　4，当点击广播按钮时，客户端通过代理对象调用服务器端的 send 方法以实现向服务器发送消息。

　　5，通过 $.connection.hub.start(); 语句打开链接。

　　6)，编译运行 Hub 示例

　　在多个浏览器窗口打开页面，效果如下：

　　四，Persistent Connection 示例教程

　　1，实现服务器端代码

　　1)，编写服务器 PersistentConnection 代码

　　向工程中 SignalR 目录中添加 PersistentConnection.cs 文件，内容如下：

　　using System;

　　using System.Collections.Generic;

　　using System.Threading.Tasks;

　　using SignalR;

　　namespace SignalTutorial.SignalR

　　{

　　public class MyConnection : PersistentConnection

　　{

　　protected override Task OnConnectedAsync(IRequest request, string connectionId)

　　{

　　return Connection.Broadcast("Connection " + connectionId + " connected");

　　}

　　protected override Task OnReconnectedAsync(IRequest request, IEnumerable groups, string clientId)

　　{

　　return Connection.Broadcast("Client " + clientId + " re-connected");

　　}

　　protected override Task OnReceivedAsync(IRequest request, string connectionId, string data)

　　{

　　var info = data + ". ConnectionId is [" + connectionId + "]";

　　// return Connection.Send(connectionId, info);

　　// Broadcast data to all clients

　　return Connection.Broadcast(info);

　　}

　　protected override Task OnDisconnectAsync(string connectionId)

　　{

　　return Connection.Broadcast("Connection " + connectionId + " disconncted");

　　}

　　protected override Task OnErrorAsync(Exception error)

　　{

　　return Connection.Broadcast("Error ocurred " + error);

　　}

　　}

　　}

　　在上面的代码中：

　　1，MyConnection 继承自 PersistentConnection，这样我们就能在客户端连接，重连接，断开连接，发送消息以及连接出错的情况下进行相关的处理。从下面的 PersistentConnection 接口中可以看到，PersistentConnection 同样支持组进行推送。

　　2，推送消息由 PersistentConnection 的属性 Connection 来提供，它继承自 IConnection 接口，该接口提供两个函数来实现对特定客户端的推送和广播功能。

　　System.Threading.Tasks.Task Send(string signal, object value)

　　System.Threading.Tasks.Task Broadcast(object value)

　　2)，配置访问路由

　　为了支持客户端访问，需要在路由表中进行配置。打开 Global.asax.cs ，修改 Application_Start() 函数如下：

　　protected void Application_Start()

　　{

　　AreaRegistration.RegisterAllAreas();

　　RouteTable.Routes.MapConnection("echo", "echo/{*operation}");

　　RegisterGlobalFilters(GlobalFilters.Filters);

　　RegisterRoutes(RouteTable.Routes);

　　// Make connections wait 50s maximum for any response. After

　　// 50s are up, trigger a timeout command and make the client reconnect.

　　GlobalHost.Configuration.ConnectionTimeout = TimeSpan.FromSeconds(50);

　　//DisconnectTimeout

　　//HeartBeatInterval

　　//KeepAlive

　　}

　　在上面的代码中，我将 echo 及其子路径的访问映射到 MyConnection 上，并设置连接超时时间为 50 s。在这里还可以设置其他的一些参数，如断连超时时间，心跳间隔等。

　　2，实现客户端代码

　　1)，生成访问页面

　　在前面三 Hub 示例教程的基础上，我们向该工程加入使用 Persistent Connection 的演示。和前面一样，向 _Layout.cshtml 中加入 PersistentChat Tab：

　　public ActionResult PersistentChat()

　　{

　　ViewBag.ClientName = "用户-" + Rnd.Next(10000, 99999);

　　return View();

　　}

　　这里由服务器根据随机数来设定客户端的名字，不够严谨，因为随机数生成的名字不是唯一的的，在这里仅为简化演示，实际应用中应该使用 GUID 。

　　然后生成对应的 页面： PersistentChat.cshtml：

　　@model dynamic

　　@{

　　ViewBag.Title = "title";

　　}

Persistent Chat

　　消息记录： (你是：@ViewBag.ClientName):

　　

　　在上面的页面代码中，我添加了名为 persistent.js 的脚本，这将在下面介绍;此外还有一个id 为 Placeholder 的隐藏 input 控件，这是为了向 Javascript 中传递客户端的名字。

　　2)，编写 Javascript

　　向 Scripts 目录添加新的 Javescript 脚本：persistent.js。其内容如下：

　　$(function () {

　　var myClientName = $(‘#Placeholder‘).val();

　　var connection = $.connection(‘/echo‘);

　　connection.received(function (data) {

　　var msg = new String(data);

　　var index = msg.indexOf("#");

　　var clientName = msg.substring(0, index);

　　var content = msg.substring(index + 1);

　　if (clientName == null || clientName == "") {

　　writeEvent(‘‘ + "系统消息" + ‘: ‘ + content, ‘event-message‘);

　　}

　　else {

　　writeEvent(‘‘ + clientName + ‘ 对大家说: ‘ + content, ‘event-message‘);

　　}

　　});

　　connection.start();

　　$("#broadcast").click(function () {

　　var msg = myClientName + "#" + $(‘#msg‘).val();

　　connection.send(msg);

　　});

　　//A function to write events to the page

　　function writeEvent(eventLog, logClass) {

　　var now = new Date();

　　var nowStr = now.getHours() + ‘:‘ + now.getMinutes() + ‘:‘ + now.getSeconds();

　　$(‘#messages‘).prepend(‘

　　});

　　上面的代码基本与前面的 Hub 实现相同，在此就不再一一讲述。有两点值得说明：

　　1，创建连接时，指定路径为 "/echo"，该路径在服务器端的路由映射表被映射为 MyConnection，因而这个连接就被指向前面提供的 MyConnection。

　　2，将 clientName 信息放入 message 中，并用 # 将 clientName 和消息内容连接成一个 msg。

　　3，编译运行 Persistent 示例