SignalR 2.0入门

2022-04-25 05:57:01

本教程展示如何使用那么 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 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>:&nbsp;&nbsp;' + 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>:&nbsp;&nbsp;' + 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 源代码和资源︰

码农公寓

概述