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

知道91 | 教程 | 2017-11-16 | 阅读:9120

在上一篇教程我们讲解了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 的步骤:

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

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

SignalR 聊天室示例

创建 SignalR 项目示例

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

创建前准备:

  • Visual Studio 2013,或者更高版本。

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

  1. 打开VS,创建一个 ASP.NET Web Application。

    创建 SignalR 项目示例1        

  2. New ASP.NET Project 窗口,选择Empty ,然后点击Ok

    创建 SignalR 项目示例2        

  3. Solution Explorer中,右击“Project”,然后选择Add | SignalR Hub Class (v2)。将类命名为ChatHub.cs,并确定。

  4. Solution Explorer中,展开 Scripts 节点,你可以看到 SignalR 相关 jQuery。
  5. 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);
            }
        }
    }
       
  6. Solution Explorer中,右击Add | OWIN Startup Class,命名为Startup,然后点击Ok。
  7. 修改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();
            }
        }
    }
       
  8. Solution Explorer中,右击Add | HTML Page,命名为index.html
  9. 右键,将index.html页面设置为启动页。
  10. 将将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>
       
  11. 保存项目。

运行 SignalR 示例

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

运行 SignalR 示例

  1. 随便输入一个名字。
  2. 然后复制URL,多开几个浏览器窗口访问,每个都输入不同的名字。
  3. 在每个页面都随便输入一句话,然后点击发送,然后输入的内容立即会在其他浏览器页面显示。

    下面的截图显示了运行的结果:

    SignalR 示例运行结果        

  4. Solution Explorer中,检查Script Documents节点,发现会有一个hubs的类库在运行时动态生成。这个文件就是管理管理客户端jQuery 脚本和服务器端代码关键。

    SignalR 示例运行结果1        

以上就是创建一个SignalR 应用的全部示例教程,在下一讲我们将会针对示例进行代码分析,解释为什么需要这么写代码。最后附上 完整代码下载地址