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

知道91 | 教程 | 2017-11-23 | 阅读:122

在上一篇教程我们讲解了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();
        });
    });

SignalR Hubs 聊天室

总结

通过前面的例子讲解,你已经明白 SignalR 就是一个创建实时应用的框架。你应该明白创建 SignalR 应用的主要开发工作就是:怎样集成 SignalR 到现有的应用中;怎样创建 hub 类;怎样在 hub 上去发送和接收消息。