在本教程中使用的软件版本
- Visual Studio 2015
- .NET 4.5
- SignalR 版本 2
概述
本教程介绍了通过演示如何生成简单的基于浏览器的聊天应用程序的 SignalR 开发。 将 SignalR 库添加到空的 ASP.NET web 应用程序，创建一个中心类，用于将消息发送到客户端，并创建使用户能够发送和接收聊天消息的 HTML 页。 有关演示如何在 MVC 5 中创建的聊天应用程序使用 MVC 视图的类似教程，请参阅SignalR 2 和 MVC 5 入门。
SignalR 是构建 web 应用程序的需要实时用户交互或实时数据更新的开放源.NET 库。 示例包括社交应用程序、 多用户游戏、 业务协作和新闻、 天气或财务更新应用程序。 这些测试通常称为实时应用程序。
SignalR 简化了构建实时应用程序的过程。 它包括 ASP.NET 服务器库和 JavaScript 客户端库来轻松地管理客户端-服务器连接，并将内容更新推送到客户端。 您可以将 SignalR 库添加到现有 ASP.NET 应用程序以获取实时功能。
本教程演示以下的 SignalR 开发任务：
- SignalR 库添加到 ASP.NET web 应用程序。
- 创建用于将内容推送到客户端的中心类。
- 创建配置应用程序的 OWIN 启动类。
- 使用 SignalR jQuery 库在网页上发送消息并显示从中心的更新。
以下屏幕截图显示在浏览器中运行的聊天应用程序。 每个新用户可以发表评论，并查看用户加入聊天后已添加注释。
聊天实例
设置项目
本部分演示如何使用 Visual Studio 2013 和 SignalR 版本 2 创建空的 ASP.NET web 应用程序，将 SignalR 中，并创建聊天应用程序。
先决条件：
- Visual Studio 2013+
以下步骤使用 Visual Studio 2015 创建 ASP.NET 空 Web 应用程序并添加 SignalR 库：
- 在 Visual Studio 中创建 ASP.NET Web 应用程序。
-
在中新建 ASP.NET 项目窗口中，保留空选中然后单击创建项目。
-
在中解决方案资源管理器，右键单击项目，选择添加 |SignalR Hub 类 (v2)。 将类命名ChatHub.cs并将其添加到项目。 此步骤将创建ChatHub类，并将一组脚本文件和支持 SignalR 的程序集引用添加到项目。
您还可以将 SignalR 通过打开添加到项目工具 > NuGet 包管理器 > 程序包管理器控制台并运行命令：
install-package Microsoft.AspNet.SignalR
如果使用控制台来添加 SignalR，SignalR hub 类作为单独的步骤后创建将 SignalR 添加。
如果使用 Visual Studio 2012 中， SignalR Hub 类 (v2) 模板将不可用。 您可以添加纯类调用ChatHub相反。
在中解决方案资源管理器，展开脚本节点。 适用于 jQuery 和 SignalR 的脚本库将显示在该项目。
在新的代码替换为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); } } }
- 在中解决方案资源管理器，展开脚本节点。 适用于 jQuery 和 SignalR 的脚本库将显示在该项目。
- 在新的代码替换为ChatHub用下面的代码的类。
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(); } } }
-
在中解决方案资源管理器，右键单击项目，然后单击添加 |OWIN 启动类。 新类命名为Startup并单击确定。
备注 -
如果使用 Visual Studio 2012 中， OWIN 启动类模板将不可用。 您可以添加纯类调用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(); } } }
- 在中解决方案资源管理器，右键单击项目，然后单击添加 |HTML 页。 命名新页面index.html。
备注：可能需要更改对 JQuery 和 SignalR 库的引用的版本号
- 在中解决方案资源管理器，右键单击刚创建的 HTML 页，然后单击设为起始页。
HTML 页中的默认代码替换为以下代码。
备注：可能通过程序包管理器安装 SignalR 脚本的更高版本。 验证以下脚本参考对应于版本的脚本文件在项目中 （它们将与此不同如果添加了使用 NuGet，而不是添加 hub 的 SignalR。）
<!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>: ' + 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>
保存所有项目。
运行示例
按 F5 以在调试模式下运行该项目。 中的浏览器实例并提示输入用户名称的 HTML 页面加载。
- 输入用户名;输入用户名称。
- 从地址行中的浏览器复制 URL 并将其用于打开两个更多的浏览器实例。 在每个浏览器实例中，输入唯一的用户名称。
在每个浏览器实例中，添加注释并单击发送。 注释应显示在浏览器的所有实例。
下面的屏幕截图显示了在三个浏览器情况下，所有这些更新一个实例发送消息时运行的聊天应用程序：
- 在中解决方案资源管理器，检查脚本文档节点运行的应用程序。 没有名为的脚本文件中心在运行时动态生成 SignalR 库。 此文件管理的 jQuery 脚本和服务器端代码之间的通信。
检查代码检查代码
SignalR 聊天应用程序演示了两个基本的 SignalR 开发任务： 在服务器上的主要协调对象为创建中心和使用 SignalR jQuery 库来发送和接收消息。
SignalR 集线器
中的代码示例ChatHub类派生自Microsoft.AspNet.SignalR.Hub类。 派生自中心类是一种有用的方式来构建 SignalR 应用程序。 可以在中心类上创建的公共方法，然后通过调用从网页中的脚本中访问这些方法。
在聊天代码中，客户端调用ChatHub.Send方法发送一封新邮件。 在中心反过来将消息发送给所有客户端，通过调用Clients.All.broadcastMessage。
发送方法演示了多个中心概念：
集线器上声明的公共方法，以便客户端可以调用它们。
使用Microsoft.AspNet.SignalR.Hub.Clients动态属性来访问所有客户端连接到此中心。
在客户端上调用的函数 (如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 中心进行通信。 在代码中的基本任务声明的代理服务器能够引用中心，声明服务器可以将内容推送到客户端，调用的函数和启动的连接将消息发送到中心。
下面的代码声明对集线器代理的引用。
var chat = $.connection.chatHub;
下面的代码是如何在脚本中创建一个回调函数。 在服务器上的中心类会调用此函数可将内容更新推送到每个客户端。 HTML 显示前先编码内容的两行都是可选的并显示简单的方法来阻止脚本注入。
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>: ' + encodedMsg + '</li>'); };
下面的代码演示如何在中心打开的连接。 代码启动连接，然后将其传递函数来处理单击事件上发送HTML 页中的按钮。
$.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(); }); });