Учебник. чат в режиме реального времени с SignalR 2Tutorial: Real-time chat with SignalR 2

В этом руководстве показано, как использовать SignalR для создания приложения разговора в режиме реального времени.This tutorial shows you how to use SignalR to create a real-time chat application. Вы добавляете SignalR в пустое веб-приложение ASP.NET и создаете HTML-страницу для отправки и вывода сообщений.You add SignalR to an empty ASP.NET web application and create an HTML page to send and display messages.

Изучив это руководство, вы:In this tutorial, you:

  • Настройка проектаSet up the project
  • Запуск примераRun the sample
  • Анализ кодаExamine the code

Warning

Эта документация не относится к последней версии SignalR.This documentation isn't for the latest version of SignalR. Ознакомьтесь с ASP.NET Core SignalR.Take a look at ASP.NET Core SignalR.

предварительные требованияPrerequisites

Настройка проектаSet up the Project

В этом разделе показано, как использовать Visual Studio 2017 и SignalR 2 для создания пустого веб-приложения ASP.NET, добавления SignalR и создания приложения для разговора.This section shows how to use Visual Studio 2017 and SignalR 2 to create an empty ASP.NET web application, add SignalR, and create the chat application.

  1. В Visual Studio создайте веб-приложение ASP.NET.In Visual Studio, create an ASP.NET Web Application.

    Создание веб-сайта

  2. В окне New ASP.NET Project-сигналрчат оставьте пустым выбранным и нажмите кнопку ОК.In the New ASP.NET Project - SignalRChat window, leave Empty selected and select OK.

  3. В Обозреватель решенийщелкните правой кнопкой мыши проект и выберите Добавить > новый элемент.In Solution Explorer, right-click the project and select Add > New Item.

  4. В окне Добавить новый элемент — сигналрчатвыберите установлено > Visual C# > Web > SignalR , а затем выберите класс концентратора SignalR (v2) .In Add New Item - SignalRChat, select Installed > Visual C# > Web > SignalR and then select SignalR Hub Class (v2).

  5. Назовите класс часуб и добавьте его в проект.Name the class ChatHub and add it to the project.

    На этом шаге создается файл класса ChatHub.CS и добавляется набор файлов скриптов и ссылок на сборки, которые поддерживают SignalR в проекте.This step creates the ChatHub.cs class file and adds a set of script files and assembly references that support SignalR to the project.

  6. Замените код в новом файле класса ChatHub.CS следующим кодом:Replace the code in the new ChatHub.cs class file with this code:

    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);
            }
        }
    }
    
  7. В Обозреватель решенийщелкните правой кнопкой мыши проект и выберите Добавить > новый элемент.In Solution Explorer, right-click the project and select Add > New Item.

  8. В меню Добавить новый элемент — сигналрчат выберите установлено > Visual C# > Web , а затем выберите класс запуска OWIN.In Add New Item - SignalRChat select Installed > Visual C# > Web and then select OWIN Startup Class.

  9. Присвойте классу имя запуска и добавьте его в проект.Name the class Startup and add it to the project.

  10. Замените код по умолчанию в классе Startup следующим кодом:Replace the default code in Startup class with this code:

    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();
            }
        }
    }
    
  11. В Обозреватель решенийщелкните правой кнопкой мыши проект и выберите Добавить > HTML-страницу.In Solution Explorer, right-click the project and select Add > HTML Page.

  12. Назовите новый индекс страницы и нажмите кнопку ОК.Name the new page index and select OK.

  13. В Обозреватель решенийщелкните правой кнопкой мыши СОЗДАНную HTML-страницу и выберите задать в качестве начальной страницы.In Solution Explorer, right-click the HTML page you created and select Set as Start Page.

  14. Замените код по умолчанию на странице HTML следующим кодом:Replace the default code in the HTML page with this code:

    <!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-3.1.1.min.js" ></script>
        <!--Reference the SignalR library. -->
        <script src="Scripts/jquery.signalR-2.2.1.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>
    
  15. В Обозреватель решенийразверните узел сценарии.In Solution Explorer, expand Scripts.

    Библиотеки скриптов для jQuery и SignalR отображаются в проекте.Script libraries for jQuery and SignalR are visible in the project.

    Important

    Диспетчер пакетов может установить более позднюю версию сценариев SignalR.The package manager may have installed a later version of the SignalR scripts.

  16. Убедитесь, что ссылки на скрипты в блоке кода соответствуют версиям файлов скриптов в проекте.Check that the script references in the code block correspond to the versions of the script files in the project.

    Создать скрипт для ссылок из исходного блока кода:Script references from the original code block:

    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-3.1.1.min.js" ></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
    
  17. Если они не совпадают, обновите HTML- файл.If they don't match, update the .html file.

  18. В строке меню выберите файл > сохранить все.From the menu bar, select File > Save All.

Запуск примераRun the Sample

  1. На панели инструментов включите отладку скриптов , а затем нажмите кнопку Воспроизведение, чтобы запустить пример в режиме отладки.In the toolbar, turn on Script Debugging and then select the play button to run the sample in Debug mode.

    Введите имя пользователя

  2. Когда откроется браузер, введите имя для удостоверения разговора.When the browser opens, enter a name for your chat identity.

  3. Скопируйте URL-адрес из браузера, откройте два других браузера и вставьте URL-адреса в адреса строки.Copy the URL from the browser, open two other browsers, and paste the URLs into the address bars.

  4. В каждом браузере введите уникальное имя.In each browser, enter a unique name.

  5. Теперь добавьте комментарий и выберите Отправить.Now, add a comment and select Send. Повторите эти действия в других браузерах.Repeat that in the other browsers. Комментарии отображаются в режиме реального времени.The comments appear in real-time.

    Note

    Это простое приложение разговора не поддерживает контекст обсуждения на сервере.This simple chat application does not maintain the discussion context on the server. Центр передает комментарии всем текущим пользователям.The hub broadcasts comments to all current users. Пользователи, которые присоединяются к обсуждению позже, увидят сообщения, добавленные с момента присоединение.Users who join the chat later will see messages added from the time they join.

    Узнайте, как работает приложение разговора в трех разных браузерах.See how the chat application runs in three different browsers. При отправке сообщений Tom, Анандом и Ирина все браузеры обновляются в режиме реального времени:When Tom, Anand, and Susan send messages, all browsers update in real time:

    Все три браузера отображают один и тот же журнал разговора

  6. В Обозреватель решенийпросмотрите узел документы скрипта для работающего приложения.In Solution Explorer, inspect the Script Documents node for the running application. Существует файл скрипта с именем Hubs, формируемый библиотекой SignalR во время выполнения.There's a script file named hubs that the SignalR library generates at runtime. Этот файл управляет обменом данными между скриптом jQuery и кодом на стороне сервера.This file manages the communication between jQuery script and server-side code.

    автоматически сформированный скрипт концентраторов в узле "документы скриптов"

Изучение кодаExamine the Code

Приложение Сигналрчат демонстрирует две основные задачи разработки SignalR.The SignalRChat application demonstrates two basic SignalR development tasks. В нем показано, как создать центр.It shows you how to create a hub. Сервер использует этот центр в качестве основного объекта координации.The server uses that hub as the main coordination object. Концентратор использует библиотеку jQuery SignalR для отправки и получения сообщений.The hub uses the SignalR jQuery library to send and receive messages.

Концентраторы SignalR в ChatHub.csSignalR Hubs in the ChatHub.cs

В приведенном выше примере кода класс ChatHub является производным от класса Microsoft.AspNet.SignalR.Hub.In the code sample above, the ChatHub class derives from the Microsoft.AspNet.SignalR.Hub class. Наследование от класса Hub является удобным способом создания приложения SignalR.Deriving from the Hub class is a useful way to build a SignalR application. Вы можете создать открытые методы в классе Hub, а затем использовать эти методы, вызвав их из скриптов на веб-странице.You can create public methods on your hub class and then use those methods by calling them from scripts in a web page.

В коде разговора клиенты вызывают метод ChatHub.Send для отправки нового сообщения.In the chat code, clients call the ChatHub.Send method to send a new message. Затем концентратор отправляет сообщение всем клиентам, вызывая Clients.All.broadcastMessage.The hub then sends the message to all clients by calling Clients.All.broadcastMessage.

Метод Send демонстрирует несколько основных понятий:The Send method demonstrates several hub concepts:

  • Объявите открытые методы в концентраторе, чтобы клиенты могли их вызывать.Declare public methods on a hub so that clients can call them.

  • Используйте динамическое свойство Microsoft.AspNet.SignalR.Hub.Clients для взаимодействия со всеми клиентами, подключенными к этому концентратору.Use the Microsoft.AspNet.SignalR.Hub.Clients dynamic property to communicate with all clients connected to this hub.

  • Вызовите функцию клиента (например, функцию broadcastMessage) для обновления клиентов.Call a function on the client (like the broadcastMessage function) to update clients.

    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 в index. HTMLSignalR and jQuery in the index.html

На странице index. HTML в образце кода показано, как использовать библиотеку jQuery SignalR для взаимодействия с концентратором SignalR.The index.html page in the code sample shows how to use the SignalR jQuery library to communicate with a SignalR hub. Код содержит множество важных задач.The code carries out many important tasks. Он объявляет прокси-сервер для ссылки на центр, объявляет функцию, которую сервер может вызывать для отправки содержимого клиентам, и начинает подключение для отправки сообщений в концентратор.It declares a proxy to reference the hub, declares a function that the server can call to push content to clients, and it starts a connection to send messages to the hub.

var chat = $.connection.chatHub;

Note

В JavaScript ссылка на серверный класс и его члены должны быть camelCase.In JavaScript the reference to the server class and its members has to be camelCase. Пример кода ссылается C# на класс часуб в JavaScript как chatHub.The code sample references the C# ChatHub class in JavaScript as chatHub.

В этом блоке кода вы создадите функцию обратного вызова в скрипте.In this code block, you create a callback function in the script.

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

Класс концентратора на сервере вызывает эту функцию для отправки обновлений содержимого на каждый клиент.The hub class on the server calls this function to push content updates to each client. Две строки, которые кодирует содержимое в формате HTML перед отображением, являются необязательными и показывают хороший способ предотвратить внедрение скрипта.The two lines that HTML-encode the content before displaying it are optional and show a good way to prevent script injection.

Этот код открывает подключение к концентратору.This code opens a connection with the hub.

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

Note

Такой подход гарантирует, что код установит соединение перед выполнением обработчика событий.This approach ensures that the code establishes a connection before the event handler executes.

Код запускает соединение, а затем передает ему функцию для управления событием щелчка на кнопке Send на странице HTML.The code starts the connection and then passes it a function to handle the click event on the Send button in the HTML page.

Получение кодаGet the code

Скачать завершенный проектDownload Completed Project

Дополнительные ресурсыAdditional resources

Дополнительные сведения о SignalR см. в следующих ресурсах:For more about SignalR, see the following resources:

Дальнейшие действияNext steps

В этом руководстве вы выполните следующие действия.In this tutorial you:

  • Настройка проектаSet up the project
  • Запустили примерRan the sample
  • Анализ кодаExamined the code

Перейдите к следующей статье, чтобы узнать, как использовать SignalR и MVC 5.Advance to the next article to learn how to use SignalR and MVC 5.