概述
本教程介绍了那么 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();
});
});接下来的步骤
你学会了，那么 SignalR 是一个用于构建实时 web 应用程序框架。您还学习了几个那么 SignalR 开发任务︰ 如何将那么 SignalR 添加到 ASP.NET 应用程序、 如何创建一个集线器类，以及如何发送和接收邮件从集线器。
有关如何部署到 Azure 的示例那么 SignalR 应用程序的演练，请参阅使用那么 SignalR 与 Web 应用程序在 Azure 应用程序服务。有关如何将 Visual Studio web 项目部署到 Windows Azure Web 站点的详细信息，请参阅创建 ASP.NET web 应用程序在 Azure 应用程序服务.
若要了解更多高级那么 SignalR 的发展概念，请访问下面的网站，那么 SignalR 源代码和资源︰