您的位置：首页 > 其它

教程︰入门那么 2 SignalR（官网自动翻译）

2016-11-20 13:29 441 查看

本教程展示如何使用那么 SignalR 创建一个实时聊天应用程序。你会那么 SignalR 添加一个空的 ASP.NET web 应用程序，创建一个 HTML 页面发送并显示消息。

在本教程中使用的软件版本

本教程使用 Visual Studio 2012

教程的版本

问题和评论

概述

本教程介绍了那么 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();
});
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

教程︰ 入门那么 2 SignalR（官网自动翻译）