-
SignalR 2.0 and MVC 5即时通讯完整版示例下载
资源介绍
本教程将向您介绍使用ASP.NET SignalR 2和ASP.NET MVC 5进行实时Web应用程序开发。本教程使用与SignalR入门教程相同的聊天应用程序代码，但演示如何将其添加到MVC 5应用程序。
在这个主题中，您将学习以下SignalR开发任务：
将SignalR库添加到MVC 5应用程序。
创建集线器和OWIN启动类来将内容推送到客户端。
在网页中使用SignalR jQuery库来发送消息并从集线器显示更新。
以下屏幕截图显示了在浏览器中运行的已完成的聊天应用程序。
聊天实例
部分：
设置项目
运行示例
检查代码
下一步
设置项目
先决条件：
Visual Studio 2013.如果您没有Visual Studio，请参阅ASP.NET下载以获取免费的Visual Studio 2013 Express开发工具。
本节介绍如何创建ASP.NET MVC 5应用程序，添加SignalR库以及创建聊天应用程序。
在Visual Studio中，创建一个面向.NET Framework 4.5的C＃ASP.NET应用程序，将其命名为SignalRChat，然后单击确定。
创建网页
在New ASP.NET Project对话框中选择MVC，然后点击Change Authentication。
创建网页
在更改身份验证对话框中选择无身份验证，然后单击确定。
选择不验证
注意
如果您为您的应用程序选择不同的身份验证提供程序，Startup.cs则将为您创建一个班级; 您将不需要Startup.cs在下面的第10步中创建自己的课程。
在“ 新建ASP.NET项目”对话框中单击确定。
打开工具| 库包管理器| 程序包管理器控制台并运行以下命令。此步骤向项目添加了一组启用SignalR功能的脚本文件和程序集引用。
install-package Microsoft.AspNet.SignalR
在解决方案资源管理器中，展开脚本文件夹。请注意，SignalR的脚本库已添加到项目中。
脚本文件夹
在解决方案资源管理器中，右键单击该项目，选择添加| 新建文件夹，并添加一个名为Hubs的新文件夹。
用鼠标右键单击该Hubs文件夹，单击添加| 新建项目，选择Visual C＃| Web | SignalR节点安装窗格中，从中心窗格中选择SignalR Hub Class（v2），并创建一个名为ChatHub.cs的新中心。您将使用此类作为将消息发送到所有客户端的SignalR服务器中心。
创建新的中心
用下面的代码替换ChatHub类中的代码。
C＃
复制
using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
public class ChatHub : Hub
{
public void Send(string name, string message)
{
// Call the addNewMessageToPage method to update clients.
Clients.All.addNewMessageToPage(name, message);
}
}
}
创建一个名为Startup.cs的新类。将文件的内容更改为以下内容。
C＃
复制
using Owin;
using Microsoft.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();
}
}
}
编辑HomeController在Controllers / HomeController.cs中找到的类，并将以下方法添加到类中。此方法返回您将在稍后的步骤中创建的聊天视图。
C＃
复制
public ActionResult Chat()
{
return View();
}
右键单击Views / Home文件夹，然后选择Add ... | 查看。
在添加视图对话框中，命名新视图聊天。
添加一个视图
用以下代码替换Chat.cshtml的内容。
重要
将SignalR和其他脚本库添加到Visual Studio项目中时，程序包管理器可能会安装比本主题中显示的版本更新的SignalR脚本文件版本。确保代码中的脚本引用与项目中安装的脚本库的版本相匹配。
CSHTML
复制
@{
ViewBag.Title = "Chat";
}
' + htmlEncode(name)
+ ': ' + htmlEncode(message) + ' ');
};
// 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();
});
});
});
// This optional function html-encodes messages for display in the page.
function htmlEncode(value) {
var encodedValue = $('').text(value).html();
return encodedValue;
}
[removed]
}
保存所有的项目。
运行示例
按F5以调试模式运行项目。
在浏览器地址行中，将/ home / chat附加到项目默认页面的URL。“聊天”页面将加载到浏览器实例中，并提示输入用户名。
输入用户名
输入一个用户名。
复制浏览器地址栏中的URL，并使用它打开两个浏览器实例。在每个浏览器实例中，输入唯一的用户名。
在每个浏览器实例中，添加注释并单击发送。评论应显示在所有浏览器实例中。
注意
这个简单的聊天应用程序不会维护服务器上的讨论上下文。该集线器向所有当前用户广播评论。稍后加入聊天的用户将看到从加入时开始添加的消息。
以下屏幕截图显示了在浏览器中运行的聊天应用程序。
聊天浏览器
在解决方案资源管理器中，查看正在运行的应用程序的脚本文档节点 如果您使用Internet Explorer作为浏览器，则此节点在调试模式下可见。有一个名为hubs的脚本文件，SignalR库在运行时动态生成。这个文件管理jQuery脚本和服务器端代码之间的通信。如果您使用Internet Explorer以外的浏览器，则还可以通过直接浏览来访问动态集线器文件，例如http：// mywebsite / signalr / hubs。
检查代码
SignalR聊天应用程序演示了两个基本的SignalR开发任务：创建一个集线器作为服务器上的主要协调对象，并使用SignalR jQuery库来发送和接收消息。1
SignalR集线器
在代码示例中，ChatHub类从Microsoft.AspNet.SignalR.Hub类派生。从Hub类派生是构建SignalR应用程序的有效方法。您可以在Hub类上创建公共方法，然后通过从网页中的脚本调用这些方法来访问这些方法。
在聊天代码中，客户端调用ChatHub.Send方法发送一条新消息。集线器通过调用Clients.All.addNewMessageToPage将消息发送给所有客户端。
所述发送方法演示几个集线器概念：
在集线器上声明公用方法，以便客户端可以调用它们。
使用Microsoft.AspNet.SignalR.Hub.Clients属性访问连接到此集线器的所有客户端。
调用客户端上的函数（如addNewMessageToPage函数）来更新客户端。
C＃
复制
public class ChatHub : Hub
{
public void Send(string name, string message)
{
Clients.All.addNewMessageToPage(name, message);
}
}
SignalR和jQuery
代码示例中的Chat.cshtml视图文件显示了如何使用SignalR jQuery库与SignalR集线器进行通信。代码中的基本任务是创建对集线器的自动生成代理的引用，声明服务器可以调用的将内容推送到客户端的功能，以及启动连接以将消息发送到集线器。
以下代码声明了对中心代理的引用。
JavaScript的
复制
var chat = $.connection.chatHub;
注意
在JavaScript中，对服务器类及其成员的引用是驼峰式的。代码示例在JavaScript中引用C＃ChatHub类作为chatHub。如果你想ChatHub在传统的Pascal框架中引用jQuery中的类，就像在C＃中一样，编辑ChatHub.cs类文件。添加一个using语句来引用Microsoft.AspNet.SignalR.Hubs命名空间。然后将该HubName属性添加到ChatHub该类中，例如[HubName("ChatHub")]。最后，更新你的jQuery引用的ChatHub类。
以下代码显示了如何在脚本中创建回调函数。服务器上的集线器类调用此函数将内容更新推送到每个客户端。对htmlEncode函数的可选调用显示了一种在将消息内容显示在页面中之前对其进行HTML编码的方法，以防止脚本注入。
HTML
复制
chat.client.addNewMessageToPage = function (name, message) {
// Add the message to the page.
$('#discussion').append('' + htmlEncode(name)
+ ': ' + htmlEncode(message) + ' ');
};
以下代码显示如何打开与集线器的连接。代码启动连接，然后传递一个函数来处理“聊天”页面中“ 发送”按钮上的点击事件。
注意
这种方法可以确保在事件处理程序执行之前建立连接。
JavaScript的
复制
$.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();
});
});
Chat
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname" />
@section scripts {
<!--Script references. -->
<!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
<!--Reference the SignalR library. -->
[removed][removed]
<!--Reference the autogenerated SignalR hub script. -->
[removed][removed]
<!--SignalR script to update the chat page and send messages.-->
[removed]
$(function () {
// Reference the auto-generated proxy for the hub.
var chat = $.connection.chatHub;
// Create a function that the hub can call back to display messages.
chat.client.addNewMessageToPage = function (name, message) {
// Add the message to the page.
$('#discussion').append('- 上一篇: Genesis C#接口
- 下一篇: C++脚本执行引擎