SignalR新手系列教程详解（七）- SignalR 浏览器聊天室示例代码分析

在上一篇教程我们讲解了ASP.NET 应用集成 SignalR 浏览器聊天室示例，下面分析一下上一讲 SignalR 代码。

SignalR 浏览器聊天室示例代码分析

在上一篇教程中的代码我们主要实现SignalR开发中的两个基本任务：创建服务端的 hub 类作为服务器的协调，然后就是使用 SignalR jQuery 库来收发信息。

SignalR 浏览器聊天室示例代码分析

SignalR Hubs

在前面的示例的ChatHub类继承自Microsoft.AspNet.SignalR.Hub，一般创建一个 SignalR 应用都会继承 Hub 类，然后你可以在你的Hub类上创建公用的方法，供前端的 SignalR jQuery 来调用。

在示例中客户端使用 ChatHub.Send 方法发送一条新消息，然后hub通过Clients.All.broadcastMessage将消息发送到所有的客户端。

Send这个方法展示了 hub 的几个概念：

在 hub 类上定义的公共方法，客户端是可以调用的。
使用Microsoft.AspNet.SignalR.Hub.Clients的动态特性是可以连接所有的客户端到 hub。

在客户端调用方法（比如broadcastMessage）是能够触发更新其他客户端的

public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
    // Call the broadcastMessage method to update clients.
    Clients.All.broadcastMessage(name, message);
    }
}

SignalR 和 jQuery

在HTML示例代码中展示了怎样使用SignalR jQuery 类库去连接 SignalR Hub。示例代码所起的作用就是声明一个 hub 代理的引用，声明一个方法能够让服务端发送消息到客户端，并且建立一个连接能够发送消息到 hub。

下面的代码就是声明一个到hub 代理的引用。

    var chat = $.connection.chatHub;

需要注意的是，默认情况下，JavaScript对服务器类的引用是其类名的驼峰格式。比如示例中的c#类名是ChatHub，在JavaScript中就是chatHub。

下面的代码显示的就是在脚本创建的一个回调方法。在服务器的 hub 类可以调用这个方法去推送消息到每一个客户端。

chat.client.broadcastMessage = function (name, message) {
        // Html encode display name and message. 
        var encodedName = $('<div />').text(name).html();
        var encodedMsg = $('<div />').text(message).html();
        // Add the message to the page. 
        $('#discussion').append('<li><strong>' + encodedName
            + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
    };

下面的代码展示了怎样打开一个到 hub 的会话。当在 HTML 页面点击 Send 按钮的时候就会去创建一个到服务器端的会话连接。

$.connection.hub.start().done(function () {
        $('#sendmessage').click(function () {            // Call the Send method on the hub. 
            chat.server.send($('#displayname').val(), $('#message').val());            // Clear text box and reset focus for next comment. 
            $('#message').val('').focus();
        });
    });