SignalR 2.0入门
概述
本教程介绍了那么 SignalR 发展展现了如何构建一个简单的基于浏览器的聊天应用程序。你会那么 SignalR 库添加到一个空的 ASP.NET web 应用程序、 建立一个集线器类将消息发送到客户端，和建立一个容许用户发送和接收聊天消息的 HTML 页面。演示如何在 MVC 5 建立一个聊天应用程序使用的 MVC 视图的相似教程，请参阅入门那么 SignalR 2 和 MVC 5.javascript
注︰本教程演示如何建立那么 SignalR 应用程序版本 2 中。那么 SignalR 之间的更改的详细信息 1.x 和 2，请参阅升级那么 SignalR 1.x 项目和视觉工做室 2013年发行说明.css
那么 SignalR 是开源.NET 库，用于构建 web 应用程序须要实时用户交互或实时数据更新。例子包括社交应用程序、 多用户游戏、 业务协做和新闻，天气或财务更新的应用程序。这些一般被称为实时应用程序。html
那么 SignalR 简化了构建实时应用程序的过程。它包括 ASP.NET 服务器库和 JavaScript 客户端库，以使它更易于管理客户端-服务器链接并将内容更新推送到客户端。你能够那么 SignalR 库添加到现有的 ASP.NET 应用程序以得到实时功能。java
本教程演示下面的那么 SignalR 开发任务︰jquery
- 将那么 SignalR 库添加到 ASP.NET web 应用程序。
- 建立一个集线器类，以将内容推送到客户端。
- 建立浩然启动类，以将应用程序配置。
- 使用 web 页中的那么 SignalR jQuery 库发送邮件并显示更新从集线器。
下面的屏幕快照显示在浏览器中运行的聊天应用程序。每一个新用户能够发表评论，并查看用户加入聊天后添加注释。git
各节︰github
设置项目
本节演示如何使用 Visual Studio 2013 和那么版本 2 SignalR 来建立空的 ASP.NET web 应用程序，添加那么 SignalR，并建立聊天应用程序。web
先决条件︰windows
- 视觉工做室 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').