SignalR新手系列教程详解（六）- ASP.NET 应用集成 SignalR 浏览器聊天室示例

在上一篇教程我们讲解了SignalR 平台配置要求，下面根据一步步详细示例搭建一个 SignalR 的示例项目，以此了解 SignalR 到底是一个什么样的效果。

SignalR 示例所使用的软件版本

Visual Studio 2013，当然更高的版本也是支持的。
.NET 4.5及其以上
SignalR version 2

使用 VS2012 集成SignalR步骤

如果你是使用VS2012，那么你可以按照下面的步骤操作：

更新你的 Package Manager 到最新版本。
安装 Web Platform Installer。
在 Web Platform Installer 中搜索安装ASP.NET and Web Tools 2013.1 for Visual Studio 2012。这样就会安装VS支持SignalR 类的组件，比如“Hub”。
尽管如此，但是有些模板（比如：OWIN Startup 类）还是不会安装，所以你需要自己手动建类。

SignalR 版本

如果你想知道更多关于 SignalR 更早的版本，你可以查看 SignalR 早期版本。

SignalR 示例概述

这篇教程会引导你创建一个浏览器版本的聊天室应用；你需要添加 SignalR 类库到一个空的 ASP.NET web 应用，然后创建一个 Hub 类从服务器端发送消息到客户端；最后你需要创建一个 HTML 页面，以便可以让用户发送和收取消息。类似的教程还有使用 MVC 5 集成 SignalR，你可以参考 SignalR ASP.NET MVC 5集成聊天室应用示例。

SignalR 是一个开源的 .NET 类库，用它可以创建在线用户的实时交互程序。比如：社交应用、多人在线游戏、商业合作、新闻、金融等实时应用。

SignalR 使得创建实时应用非常的方便。创建一个 SignalR 的实时应用，需要一个服务端的类库和一个客户端的JavaScript 类库，有了这两个东西就能够非常方便的管理服务端与客户端的连接，从而达到实时推送内容到客户端。所有你可以非常方便的引入 SignalR 的类库到一个现有的 ASP.NET 应用程序中，使其具备实时交互的功能。

下面我们具体示范 ASP.NET 应用集成 SignalR 的步骤：

引入 SignalR 类库到ASP.NET 应用程序中。
创建一个 Hub 类用以服务器推送消息到客户端。
创建一个 OWIN startup 类来配置应用程序；如果程序中有了Startup.cs文件就不用再创建了。
使用 SignalR jQuery 的类库在前端页面发送消息到Hub，然后其他客户端显示发送的消息。

下面的截图就是浏览器运行程序的样子，任何客户端访问页面，输入任何消息都会在其他客户端显示出来。

SignalR 聊天室示例

创建 SignalR 项目示例

下面的模块展示了怎样使用Visual Studio 2013 创建一个使用SignalR 2 带有聊天功能的应用。

创建前准备：

Visual Studio 2013，或者更高版本。

下面使用Visual Studio 2013 一步步跟着示例创建一个空的 Web 应用，并且集成 SignalR2。

打开VS，创建一个 ASP.NET Web Application。
在New ASP.NET Project 窗口，选择Empty ，然后点击Ok。
在Solution Explorer中，右击“Project”，然后选择Add | SignalR Hub Class (v2)。将类命名为ChatHub.cs，并确定。
在Solution Explorer中，展开 Scripts 节点，你可以看到 SignalR 相关 jQuery。

将ChatHub类的代码替换如下：

using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
}

在Solution Explorer中，右击Add | OWIN Startup Class，命名为Startup，然后点击Ok。

修改Startup类的代码如下：

using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Any connection or hub wire up and configuration should go here
            app.MapSignalR();
        }
    }
}

在Solution Explorer中，右击Add | HTML Page，命名为index.html。
右键，将index.html页面设置为启动页。

将将index.html页面页面的代码替换如下：

<!DOCTYPE html><html><head>
    <title>SignalR Simple Chat</title>
    <style type="text/css">
        .container {            background-color: #99CCFF;            border: thick solid #808080;            padding: 20px;            margin: 20px;
        }    </style></head><body>
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <ul id="discussion">
        </ul>
    </div>
    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-3.1.1.min.js" ></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="signalr/hubs"></script>
    <!--Add script to update the page and send messages.--> 
    <script type="text/javascript">
        $(function () {            // Declare a proxy to reference the hub. 
            var chat = $.connection.chatHub;            // Create a function that the hub can call to broadcast messages.
            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>');
            };            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));            // Set initial focus to message input box.  
            $('#message').focus();            // Start the connection.
            $.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();
                });
            });
        });    </script></body></html>

保存项目。

运行 SignalR 示例

按F5 Debug 模式运行项目，然后启动浏览器运行你可以看到下面的例子：

运行 SignalR 示例

随便输入一个名字。
然后复制URL，多开几个浏览器窗口访问，每个都输入不同的名字。
在每个页面都随便输入一句话，然后点击发送，然后输入的内容立即会在其他浏览器页面显示。
下面的截图显示了运行的结果：
在Solution Explorer中，检查Script Documents节点，发现会有一个hubs的类库在运行时动态生成。这个文件就是管理管理客户端jQuery 脚本和服务器端代码关键。