在本教程中使用的软件版本
本教程使用 Visual Studio 2012
教程的版本
问题和评论
概述
本教程介绍了那么 SignalR 发展展示了如何构建一个简单的基于浏览器的聊天应用程序。你会那么 SignalR 库添加到一个空的 ASP.NET web 应用程序、 创建一个集线器类将消息发送到客户端,和创建一个允许用户发送和接收聊天消息的 HTML 页面。演示如何在 MVC 5 创建一个聊天应用程序使用的 MVC 视图的类似教程,请参阅入门那么 SignalR 2 和 MVC 5.
注︰本教程演示如何创建那么 SignalR 应用程序版本 2 中。那么 SignalR 之间的更改的详细信息 1.x 和 2,请参阅升级那么 SignalR 1.x 项目和视觉工作室 2013年发行说明.
那么 SignalR 是开源.NET 库,用于构建 web 应用程序需要实时用户交互或实时数据更新。例子包括社交应用程序、 多用户游戏、 业务协作和新闻,天气或财务更新的应用程序。这些通常被称为实时应用程序。
那么 SignalR 简化了构建实时应用程序的过程。它包括 ASP.NET 服务器库和 JavaScript 客户端库,以使它更易于管理客户端-服务器连接并将内容更新推送到客户端。你可以那么 SignalR 库添加到现有的 ASP.NET 应用程序以获得实时功能。
本教程演示下面的那么 SignalR 开发任务︰
- 将那么 SignalR 库添加到 ASP.NET web 应用程序。
- 创建一个集线器类,以将内容推送到客户端。
- 创建浩然启动类,以将应用程序配置。
- 使用 web 页中的那么 SignalR jQuery 库发送邮件并显示更新从集线器。
下面的屏幕快照显示在浏览器中运行的聊天应用程序。每个新用户可以发表评论,并查看用户加入聊天后添加注释。
各节︰
设置项目
本节演示如何使用 Visual Studio 2013 和那么版本 2 SignalR 来创建空的 ASP.NET web 应用程序,添加那么 SignalR,并创建聊天应用程序。
先决条件︰
- 视觉工作室 2013 年。如果你没有 Visual Studio,请参见ASP.NET 下载要免费视觉工作室 2013年快递发展的工具。
下列步骤将使用 Visual Studio 2013 创建 ASP.NET 空 Web 应用程序并添加那么 SignalR 库︰
-
在 Visual Studio 中创建一个 ASP.NET Web 应用程序。
-
在新的 ASP.NET 项目窗口中,保留空选定,然后单击创建项目.
-
在解决方案资源管理器中,右键单击项目,选择添加|那么 SignalR 集线器类 (v2)。将类命名为ChatHub.cs并将其添加到项目。此步骤将创建ChatHub类,并向项目中添加一组脚本文件和支持那么 SignalR 的程序集引用。
注︰你也可以向项目添加那么 SignalR 通过打开工具 |库包管理器 |程序包管理器控制台和运行命令︰
install-package Microsoft.AspNet.SignalR
如果你使用控制台来添加那么 SignalR,那么 SignalR 集线器类作为一个单独的步骤之后创建您添加那么 SignalR。
注︰如果您使用的 Visual Studio 2012,那么 SignalR 集线器类 (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); } } }
-
在解决方案资源管理器中,右键单击项目,然后单击添加|欧文真启动类。
Startup
新类的名称并单击确定。注︰如果您使用的 Visual Studio 2012,浩然启动类模板将不可用。您可以添加一个名为
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
名称. -
在解决方案资源管理器中,右键单击 HTML 页面,您只需创建并单击设置为起始页.
-
在 HTML 页面中的默认代码替换为下面的代码。
注︰ 版本那么 SignalR 脚本可以通过软件包管理器进行安装。验证下面的脚本引用对应的版本 (他们会不同,如果你添加了那么 SignalR 使用 NuGet,而不是添加一个集线器。) 项目中的脚本文件
<!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-1.6.4.min.js" ></script> <!--Reference the SignalR library. --> <script src="Scripts/jquery.signalR-2.1.0.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。你可以在您的集线器类上创建公共方法,然后通过调用他们从 web 页中的脚本访问这些方法。
在聊天代码中,客户端调用ChatHub.Send方法将发送一封新邮件。集线器反过来将消息发送到所有客户端通过调用Clients.All.broadcastMessage.
Send方法演示中心的几个概念︰
- 集线器上声明公共方法,以便客户端可以调用它们。
- 使用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;
注︰ 在 JavaScript 对服务器类和其成员的引用是在 camel 大小写。该代码示例作为chatHub引用在 JavaScript 中的 C# 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();
});
});