【译】教程: SignalR 2入门
作者：Patrick Fletcher 发表于：June 10, 2014
下载完整的项目
这篇文章介结了如何利用SignalR创建一个实时的聊天应用。此应用从一个空白的ASP.NET项目中加入SignalR功能来创建一个能够发送和显示消息的网页。
这篇文章通过如何建立一个简单的基于浏览器的应用来介绍SignalR的开发。在一个空的ASP.NET项目中，引入SignalR库，创建一个为客户端发送消息的hub类，创建一个让用户发送和接收聊天消息的网页。如何用MVC5中的MVC视图来开发一个聊天应用的简单介绍，参见在MVC 5中使用SignalR 2.
SignalR是一个开源的.NET库，用于创建有着用户交互或实时数据更新需求的web项目。像社交应用，多用户游戏，商务合作，新闻，天气，金融等领域中需要刷新数据的地方。通常这些都称为实时应用。
SignalR简化了实时应用的创建过程。它包括一个ASP.NET服务端库和一个JavaScript脚本库，很容易的管理CS服务器与客户端的连接，很方便的向客户端发送更新数据内容。向一个ASP.NET应用中加上SignalR库就为这个应用增加了实时功能。
这篇文章示范了下面的SigalR开发任务：
向一个空的ASP.NET web应用中加入SignalR库
创建一个用于向客户端发送内容的hub类
创建一个OWIN启动类用于配置此应用
在网页中使用Signal jQuery 库发送和显示来自hub的更新数据
下图显示了一个运行着聊天应用的浏览器。每个用户都可以发送消息，都能看到有用户加入聊天的消息。
设置项目
这一部分显示了如何使用VS2013和SignalR第2版创建一个空的ASP.NET web应用并加入SignalR实现聊天功能。
先决条件：
VS2013。如果你还没有VS，从 ASP.NET Downloads 获得一个免费的VS2013快速开发工具
下面这一步使用VS2013创建一个空的ASP.NET web应用并加入SignalR库：
在VS中，创建一个ASP.NET Web应用。
在 New ASP.NET Project 窗口中，选择 Empty 然后点击 OK 创建项目。
在解决方案管理器中，右击项目名称，选择添加，选择SignalR Hub类（v2)，类名为ChatHub.cs，这一步创建了一个ChatHub类并加入了用于支持SignalR的脚本和引用集。
注意：你也可以通过工具 ｜ 包管理器 ｜ 包管理控制台，运行一个命令来向项目中加入SignalR：
install-package Microsoft.AspNet.SignalR如果你使用控制台来加入SignalR，那么创建SignalR hub类就成了加入SignalR之后的单独的一步了。
注意：如果你使用的是VS2012，并没有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); } } }在解决方案管理器中，右键点击项目，依次点击 添加 ｜ OWIN启动类，命名类名为Startup，点击OK。
注意：如果你使用VS2012，并没有OWIN 启动类模板，你需要自行添加Startup原始类。
照下面修改这个新的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.hmtl。
在解决方案管理器中，右击这个HTML页面并点击“设为启动页”。
用下面的代码替换HTML页面中的代码：
注意：后续版本的SignalR脚本可能会被包管理代替。检查一下面的脚本引用是否和项目中的脚本版本一致（使用NuGet方式加入的SignalR可能会与手动加入hub方式的不同）。
<!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键以debug方式运行此项目。在浏览器中会打开网页，并提示输入用户名。
输入用户名。
复制浏览器地址栏中的URL，并用更多的浏览器实例打开此网址。每个浏览器实例都要输入一个聊天者唯一的名字。
每个浏览器实例中，都写上一条消息，并点击“发送”，这条消息会显示到所有的浏览器实例中。
注意：这个简单的聊天应用并不会在服务器上保存上下文。hub把当前的消息广播到所有在线用户。后加入聊天的用户只能看到他加入之后的相关消息。
下图显示了三个浏览器开启聊天应用的示例，当一个浏览器发送了一个消息后，所有的浏览器都显示了这个消息。
在解决方案管理器，在此应用运用时检查一下脚本文档这个节点，此时会动态产生一个叫hubs的脚本文件。这个文件管理着jQuery脚本和服务器端代码的通讯。
解释代码
SignalR聊天应用示范了SignalR开发中的两个基本任务：创建一个hub用做服务器端的主要协作目标，使用Siganl jQuery脚本库发送和接收消息。
SignalR Hubs
在示例中，ChatHub类派生于Microsoft.AspNet.SignalR.Hub类，使用Hub类是创建SignalR应用的有效途径。你可以在hub类中创建一个公开的方法，然后在网页中用脚本访问这些方法。
在聊天的代码中，客户端调用ChatHub.Send方法来发送一条新的消息。hub会通过调用Clients.All.BroadcastMessage来向所有客户端转发此消息。
发送方法演示了hub的几个概念：
Declare public methods on a hub so that clients can call them.
在hub中声明的公开的方法客户端就可以直接调用
使用Microsoft.AspNet.SignalR.Hub.Clients动态属性就可以访问到连接到此hub的所有客户端
调用客户端的函数（例如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
网页中简单的代码说明了SignalR jQuery库如何与SignalR hub进行通信.代码中一个必要的任务就是声明一个代理来引用hub，声明一个服务器端能够调用的向客户端推送消息的函数，然后开始连接到hub进行消息发送。
下面的代码声明的一个hub代理的引用。
var chat = $.connection.chatHub;
注意：在脚本里引用服务器的成员时要使用驼峰格式。代码中引用C#的ChatHub类，要写成chatHub
The following code is how you create a callback function in the script. The hub class on the server calls this function to push content updates to each client. The two lines that HTML encode the content before displaying it are optional and show a simple way to prevent script injection.
下面的代码显示了如何在脚本中创建一个回调函数。服务器端的hub类调用这个函数向每一个客户端推送刷新的消息，下面这两行代码提供了一个可选的简单的预防脚本注入的方法，就是在显示文本之前内容要经过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>');
};
下面的代码显示了如何打开一个与hub的连接。下面代码启动了一个连接并且通过一个方法处理网页中发送按钮的点击事件。
注意: 要确保事件处理程序执行之前要建立连接。
$.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();
});
});
下一步
你学到的SiganlR只是创建实时web应用的一个框架。你还会学到了SignalR开发的其他几个任务：如何将SignalR添加到ASP.NET应用中，如何创建一个hub类，和如何从hub中发送和接收消息。
You can make the sample application in this tutorial or other SignalR applications available over the Internet by deploying them to a hosting provider. Microsoft offers free web hosting for up to 10 web sites in a free Windows Azure trial account. For a walkthrough on how to deploy the sample SignalR application, see Using SignalR with Windows Azure Web Sites. For detailed information about how to deploy a Visual Studio web project to a Windows Azure Web Site, see Deploying an ASP.NET Application to a Windows Azure Web Site.
你可以将本教程中和互联网上其他可用的SignalR应用程序部署到提供商的主机中。微软提供的Windows Azure试用账号可以免费使用网络托管主机，最多可部署十个网站。如何部署SignalR应用程序的演练，请参阅在Windows Azure网站中使用SignalR。关于如何部署一个VS web项目到Windows Azure网站，查参阅在Windows Azure中部署ASP.NET应用。学习更多的关于SignalR开发的内容，请方问下面的有关SignalR代码和资源的网站：
SignalR Project
SignalR Github and Samples
SignalR Wiki
这篇文章最初创建于 June 10, 2014
作者信息
Patrick Fletcher – Patrick Fletcher 是ASP.NET组中著名的代码写手.