SignalR 2.0入门

q36988 · 发表于 2017-7-1 20:24:07

下载已完成的项目

本教程展示如何使用那么 SignalR 创建一个实时聊天应用程序。你会那么 SignalR 添加一个空的 ASP.NET web 应用程序，创建一个 HTML 页面发送并显示消息。
概述
　　本教程介绍了那么 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 src="Scripts/jquery-1.6.4.min.js" ></script>

<script src="Scripts/jquery.signalR-2.1.0.min.js"></script>

<script src="signalr/hubs"></script>

<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();
});
});

接下来的步骤
　　你学会了，那么 SignalR 是一个用于构建实时 web 应用程序框架。您还学习了几个那么 SignalR 开发任务︰如何将那么 SignalR 添加到 ASP.NET 应用程序、如何创建一个集线器类，以及如何发送和接收邮件从集线器。
　　有关如何部署到 Azure 的示例那么 SignalR 应用程序的演练，请参阅使用那么 SignalR 与 Web 应用程序在 Azure 应用程序服务。有关如何将 Visual Studio web 项目部署到 Windows Azure Web 站点的详细信息，请参阅创建 ASP.NET web 应用程序在 Azure 应用程序服务.
若要了解更多高级那么 SignalR 的发展概念，请访问下面的网站，那么 SignalR 源代码和资源︰

那么 SignalR 项目
那么 SignalR Github 和样品
那么 SignalR Wiki

账号		自动登录	找回密码
密码			立即注册

VMware vcenter+vSphere 6.5 U2共享

【跟谁学】韩宇极简英语课-技术人员不得不

用Zabbix通过JMX方式监控weblogic

winhex数据恢复教程（非常巨大，内容丰富）

Symantec Backup Exec 2015 2016/2012 BE20

NetScaler VPX部署之：NetScaler Gateway调

zabbix3.4.1安装部署+微信推送信息+大屏显

[经验分享] SignalR 2.0入门

扫码加入运维网微信交流群