本教程展示了如何使用SignalR2.0构建一个基于浏览器的聊天室程序。你将把SignalR库添加到一个空的asp.net Web应用程序中，创建用于发送消息到客户端的集线器（Hubs）类，创建一个Html页面让用户在该页面上发送和接收聊天信息。对于如何在MVC5环境中创建这个聊天室程序，请参阅Getting Started with SignalR 2.0 and MVC 5。
SignalR是一个开源的.Net库，用于构建需要实时用户交互或实时数据更新的Web应用程序。比如社交网站应用、多用户在线游戏、商务协作、新闻、天气、金融或更新应用的程序。以上通常被称为----实时应用程序。
SignalR简化构建实时应用程序的过程。它包含一个Asp.net服务器库和一个javaScript客户端库，使其更容易管理客户端到服务器端的连接并推送内容到客户端让其更新。您可以将SignalR库添加到现有的Asp.net应用程序已实现实时功能。
本教程将演示SignalR是如何开发的：
1） 添加Signal库到Asp.net Web 应用程序。
2） 建立一个集线器（Hubs）类来推送更新内容到客户端。
3） 建立一个.Net开放Web 接口（OWIN）启动类来配置应用程序
4） 杂网页中使用SignalR jQuery库发送和显示更新消息
下面的屏幕截图显示了在浏览器运行中的聊天应用程序，每个新加入聊天室的用户都可以随意发言。
本节说明如何使用VS2013及SignalR2.0库来创建一个空的Asp.Net Web应用程序，并向其添加SignalR，使它实现实时聊天室的功能。
1） 在VS2013中创建一个新的Web应用程序。
2） 在新的Asp.Net项目窗口中，选择空项目并且确定创建
3） 在解决方案资源管理器中，右击项目，选择添加----新建项，选择SignalR集线器类（v2），命名为ChatHus.cs并添加，如下图：
这一步将创建ChatHub类，并将一组SignalR脚本和程序集引用添加到项目中。
注意：您还可以通过NuGet来添加SignalR到项目中，通过打开工具----库软件包管理器----包管理器控制台，并运行一个明命令：install – package Microsoft.AspNet.SignalR
如果您使用包管理器控制台来添加SignalR，请在添加后再执行创建ChatHub类这一步。
4） 在解决方案资源管理器中，展开脚本文件夹，可以看到项目已经添加jQuery已经SignalR的JS引用。
5）编辑你的ChatHub文件，删除Hello方法并且添加Send方法，如下面代码：
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); } } } |
6）在解决方案资源管理器中，右击项目，然后添加----新建项----OWIN启动类，将类命名为Startup并添加。
7）在启动类的配置方法中添加SignalR的映射，如下面的代码：
using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(SignalRChat.Startup))] namespace SignalRChat { public class Startup { public void Configuration(IAppBuilder app) { // 有关如何配置应用程序的详细信息， // 请访问http://go.microsoft.com/fwlink/?LinkID=316888 app.MapSignalR(); } } } |
8）在解决方案资源管理器中，右键单击该项目，然后点击添加----新建项----HTML页面，命名为index.html并添加。
9）用下面的代码替换掉Html的：
<!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.0.2.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> |
注意：如果你使用包管理器来安装了SignalR，请核对脚本目录中的SignalR脚本文件名与上面Html代码中所引用的是否一致，如下图：
11）保存全部项
1）按下F5，在调试模式下运行该项目，如果一切正常，Html会在浏览器中打开并提示一个对话框。
2）输入用户名并确定。
3）复制这个浏览器中的URL，打开一个新的浏览器实例，在另外一个浏览器中，输入一个新用户名。
4）在每个浏览器实例中添加评论并且发送，评论将被发送到所有浏览器的页面中。
注意：这个简单的聊天室没有在服务器上维护一个聊天上下文（旧的数据），所有发送的评论将实时广播给打开了页面的所有浏览器，所以新加入的用户无法看到以前的历史记录。
新闻热点
疑难解答
