실습: SignalR를 사용 하는 실시간 웹 응용 프로그램Hands On Lab: Real-Time Web Applications with SignalR

웹 캠프 팀by Web Camps Team

Warning

이 설명서는 최신 버전의 SignalR에는 적합 하지 않습니다.This documentation isn't for the latest version of SignalR. ASP.NET Core SignalR를 살펴보세요.Take a look at ASP.NET Core SignalR.

웹 캠프 교육 키트, 2015 년 10 월 릴리스 다운로드Download Web Camps Training Kit, October 2015 Release

실시간 웹 응용 프로그램은 실시간으로 연결 된 클라이언트에 서버 쪽 콘텐츠를 푸시하는 기능을 제공 합니다.Real-time Web applications feature the ability to push server-side content to the connected clients as it happens, in real-time. ASP.NET 개발자의 경우 ASP.NET SignalR 는 응용 프로그램에 실시간 웹 기능을 추가 하는 라이브러리입니다.For ASP.NET developers, ASP.NET SignalR is a library to add real-time web functionality to their applications. 클라이언트와 서버에서 사용할 수 있는 가장 적합 한 전송에 대해 자동으로 가장 적합 한 전송을 선택 하는 여러 전송을 활용 합니다.It takes advantage of several transports, automatically selecting the best available transport given the client and server's best available transport. 이는 브라우저와 서버 간의 양방향 통신을 가능 하 게 하는 HTML5 API 인 WebSocket을 활용 합니다.It takes advantage of WebSocket, an HTML5 API that enables bi-directional communication between the browser and server.

또한 SignalR 는 ASP.NET 응용 프로그램에서 서버와 클라이언트 간 RPC를 수행 하 고, 클라이언트 브라우저에서 서버 쪽 .net 코드에서 JavaScript 함수를 호출 하 고, 연결/연결 끊기 이벤트, 그룹 연결, 권한 부여 등의 연결 관리에 대 한 유용한 후크를 추가 하는 간단한 고급 API를 제공 합니다.SignalR also provides a simple, high-level API for doing server to client RPC (call JavaScript functions in your clients' browsers from server-side .NET code) in your ASP.NET application, as well as adding useful hooks for connection management, such as connect/disconnect events, grouping connections, and authorization.

SignalR 는 클라이언트와 서버 간의 실시간 작업을 수행 하는 데 필요한 일부 전송에 대 한 추상화입니다.SignalR is an abstraction over some of the transports that are required to do real-time work between client and server. SignalR 연결은 HTTP로 시작 되 고 사용 가능한 경우 WebSocket 연결로 승격 됩니다.A SignalR connection starts as HTTP, and is then promoted to a WebSocket connection if available. Websocket 은 서버 메모리를 가장 효율적으로 사용 하 고, 대기 시간을 최소화 하며, 가장 엄격한 요구 사항이 있습니다 (예: 클라이언트와 서버 간의 전이중 통신). 또한 websocket 은 서버에서 windows server 2012 또는 windows 8을 사용 하 여 서버를 .NET Framework 4.5과 함께 사용 해야 하기 때문에 SignalR에 이상적인 전송입니다.WebSocket is the ideal transport for SignalR, since it makes the most efficient use of server memory, has the lowest latency, and has the most underlying features (such as full duplex communication between client and server), but it also has the most stringent requirements: WebSocket requires the server to be using Windows Server 2012 or Windows 8, along with .NET Framework 4.5. 이러한 요구 사항이 충족 되지 않는 경우 SignalR 는 다른 전송을 사용 하 여 연결을 설정 하려고 합니다 (예: Ajax 긴 폴링).If these requirements are not met, SignalR will attempt to use other transports to make its connections (like Ajax long polling).

SignalR API에는 클라이언트와 서버 간 통신을 위한 두 가지 모델 ( 영구 연결허브)이 포함 되어 있습니다.The SignalR API contains two models for communicating between clients and servers: Persistent Connections and Hubs. 연결은 단일 받는 사람, 그룹화 또는 브로드캐스트 메시지를 보내기 위한 간단한 끝점을 나타냅니다.A Connection represents a simple endpoint for sending single-recipient, grouped, or broadcast messages. 허브 는 클라이언트와 서버에서 직접 메서드를 호출할 수 있도록 하는 연결 API를 기반으로 하는 더 높은 수준의 파이프라인입니다.A Hub is a more high-level pipeline built upon the Connection API that allows your client and server to call methods on each other directly.

SignalR 아키텍처

모든 샘플 코드와 코드 조각은 https://github.com/Microsoft-Web/WebCampTrainingKit/releases/tag/v2015.10.13b에서 사용할 수 있는 웹 캠프 교육 키트, 10 월 2015 릴리스에 포함 되어 있습니다.All sample code and snippets are included in the Web Camps Training Kit, October 2015 Release, available at https://github.com/Microsoft-Web/WebCampTrainingKit/releases/tag/v2015.10.13b. 해당 페이지의 설치 관리자 링크는 더 이상 작동 하지 않습니다. 대신 자산 섹션 아래에 있는 링크 중 하나를 사용 합니다.Please note that the Installer link on that page no longer works; use one of the links under the Assets section instead.

개요Overview

목표Objectives

이 실습 랩에서는 다음 방법에 대해 알아봅니다.In this hands-on lab, you will learn how to:

  • SignalR를 사용 하 여 서버에서 클라이언트로 알림을 보냅니다.Send notifications from server to client using SignalR.
  • SQL Server를 사용 하 여 SignalR 응용 프로그램을 Scale Out 합니다.Scale Out your SignalR application using SQL Server.

사전 요구 사항Prerequisites

이 실습 실습을 완료 하려면 다음이 필요 합니다.The following is required to complete this hands-on lab:

설치 프로그램Setup

이 실습 랩에서 연습을 실행 하려면 먼저 환경을 설정 해야 합니다.In order to run the exercises in this hands-on lab, you will need to set up your environment first.

  1. Windows 탐색기 창을 열고 랩의 원본 폴더로 이동 합니다.Open a Windows Explorer window and browse to the lab's Source folder.
  2. Setup.exe 를 마우스 오른쪽 단추로 클릭 하 고 관리자 권한으로 실행 을 선택 하 여 환경을 구성 하는 설치 프로세스를 시작 하 고이 랩에 대 한 Visual Studio 코드 조각을 설치 합니다.Right-click Setup.cmd and select Run as administrator to launch the setup process that will configure your environment and install the Visual Studio code snippets for this lab.
  3. 사용자 계정 컨트롤 대화 상자가 표시 되 면 계속 하려면 작업을 확인 합니다.If the User Account Control dialog box is shown, confirm the action to proceed.

Note

설치 프로그램을 실행 하기 전에이 랩에 대 한 모든 종속성을 확인 했는지 확인 합니다.Make sure you have checked all the dependencies for this lab before running the setup.

코드 조각 사용Using the Code Snippets

랩 문서 전체에서 코드 블록을 삽입 하 라는 지침이 표시 됩니다.Throughout the lab document, you will be instructed to insert code blocks. 사용자 편의를 위해이 코드의 대부분은 Visual Studio 2013 내에서 액세스할 수 있는 Visual Studio Code 코드 조각으로 제공 되며,이를 수동으로 추가 하지 않아도 됩니다.For your convenience, most of this code is provided as Visual Studio Code Snippets, which you can access from within Visual Studio 2013 to avoid having to add it manually.

Note

각 연습에는 각 연습을 서로 독립적으로 수행할 수 있는 연습 시작 폴더에 있는 시작 솔루션이 있습니다.Each exercise is accompanied by a starting solution located in the Begin folder of the exercise that allows you to follow each exercise independently of the others. 연습 중에 추가 된 코드 조각은 이러한 시작 솔루션에서 누락 되었으며, 연습을 완료할 때까지 작동 하지 않을 수 있습니다.Please be aware that the code snippets that are added during an exercise are missing from these starting solutions and may not work until you have completed the exercise. 연습에 대 한 소스 코드 내에서 해당 연습의 단계를 완료 하 여 생성 된 코드를 포함 하는 Visual Studio 솔루션을 포함 하는 폴더를 찾을 수도 있습니다.Inside the source code for an exercise, you will also find an End folder containing a Visual Studio solution with the code that results from completing the steps in the corresponding exercise. 이 실습 랩을 통해 작업할 때 추가 도움이 필요한 경우 이러한 솔루션을 지침으로 사용할 수 있습니다.You can use these solutions as guidance if you need additional help as you work through this hands-on lab.


실습Exercises

이 실습 랩에는 다음 연습이 포함 되어 있습니다.This hands-on lab includes the following exercises:

  1. SignalR를 사용 하 여 실시간 데이터 작업Working with Real-Time Data Using SignalR
  2. SQL Server를 사용 하 여 확장Scaling Out Using SQL Server

이 랩을 완료 하는 데 소요 되는 예상 시간: 60 분Estimated time to complete this lab: 60 minutes

Note

Visual Studio를 처음 시작 하는 경우 미리 정의 된 설정 컬렉션 중 하나를 선택 해야 합니다.When you first start Visual Studio, you must select one of the predefined settings collections. 미리 정의 된 각 컬렉션은 특정 개발 스타일에 맞게 디자인 되 고 창 레이아웃, 편집기 동작, IntelliSense 코드 조각 및 대화 상자 옵션을 결정 합니다.Each predefined collection is designed to match a particular development style and determines window layouts, editor behavior, IntelliSense code snippets, and dialog box options. 이 실습의 절차에서는 일반 개발 설정 컬렉션을 사용 하는 경우 Visual Studio에서 지정 된 작업을 수행 하는 데 필요한 작업을 설명 합니다.The procedures in this lab describe the actions necessary to accomplish a given task in Visual Studio when using the General Development Settings collection. 개발 환경에 대해 다른 설정 컬렉션을 선택 하는 경우 고려해 야 하는 단계에 차이가 있을 수 있습니다.If you choose a different settings collection for your development environment, there may be differences in the steps that you should take into account.

연습 1: SignalR를 사용 하 여 실시간 데이터 작업Exercise 1: Working with Real-Time Data Using SignalR

채팅은 종종 예로 사용 되지만 실시간 웹 기능을 사용 하면 훨씬 더 많은 작업을 수행할 수 있습니다.While chat is often used as an example, you can do a whole lot more with real-time Web functionality. 사용자가 새 데이터를 볼 수 있도록 웹 페이지를 새로 고치거 나 페이지가 Ajax 긴 폴링을 구현 하 여 새 데이터를 검색 하는 경우에는 SignalR을 사용할 수 있습니다.Any time a user refreshes a web page to see new data or the page implements Ajax long polling to retrieve new data, you can use SignalR.

SignalR는 서버 푸시 또는 브로드캐스팅 기능을 지원 합니다. 연결 관리를 자동으로 처리 합니다.SignalR supports server push or broadcasting functionality; it handles connection management automatically. 클라이언트-서버 통신을 위한 클래식 HTTP 연결에서 각 요청에 대 한 연결이 다시 설정 되지만 SignalR는 클라이언트와 서버 간에 영구 연결을 제공 합니다.In classic HTTP connections for client-server communication, connection is re-established for each request, but SignalR provides persistent connection between the client and server. SignalR에서 서버 코드는 현재 알고 있는 요청-응답 모델이 아니라 RPC (원격 프로시저 호출)를 사용 하 여 브라우저에서 클라이언트 코드를 호출 합니다.In SignalR the server code calls out to a client code in the browser using Remote Procedure Calls (RPC), rather than the request-response model we know today.

이 연습에서는 Geek of 퀴즈 응용 프로그램이 SignalR를 사용 하 여 전체 페이지를 새로 고치지 않고도 업데이트 된 메트릭을 사용 하 여 통계 대시보드를 표시 하도록 구성 합니다.In this exercise, you will configure the Geek Quiz application to use SignalR to display the Statistics dashboard with the updated metrics without the need to refresh the entire page.

작업 1 – Geek of 퀴즈 통계 페이지 탐색Task 1 – Exploring the Geek Quiz Statistics Page

이 작업에서는 응용 프로그램을 살펴보고 통계 페이지가 표시 되는 방식과 정보가 업데이트 되는 방식을 개선 하는 방법을 확인 합니다.In this task, you will go through the application and verify how the statistics page is shown and how you can improve the way the information is updated.

  1. 웹에 대해 Visual Studio Express 2013 을 열고 Source\Ex1-WorkingWithRealTimeData\Begin 폴더에 있는 GeekQuiz 솔루션을 엽니다.Open Visual Studio Express 2013 for Web and open the GeekQuiz.sln solution located in the Source\Ex1-WorkingWithRealTimeData\Begin folder.

  2. F5 키를 눌러 솔루션을 실행합니다.Press F5 to run the solution. 로그인 페이지가 브라우저에 표시 됩니다.The Log in page should appear in the browser.

    솔루션 실행Running the solution

    솔루션 실행Running the solution

  3. 페이지의 오른쪽 위 모퉁이에 있는 등록 을 클릭 하 여 응용 프로그램에서 새 사용자를 만듭니다.Click Register in the upper-right corner of the page to create a new user in the application.

    링크 등록Register link

    링크 등록Register link

  4. 등록 페이지에서 사용자 이름암호를 입력 한 다음 등록을 클릭 합니다.In the Register page, enter a User name and Password, and then click Register.

    사용자 등록Registering a user

    사용자 등록Registering a user

  5. 응용 프로그램이 새 계정을 등록 하 고 사용자가 인증 되 고 첫 번째 퀴즈 질문을 표시 하는 홈 페이지로 다시 리디렉션됩니다.The application registers the new account and the user is authenticated and redirected back to the home page showing the first quiz question.

  6. 새 창에서 통계 페이지를 열고 페이지와 통계 페이지를 나란히 배치 합니다.Open the Statistics page in a new window and put the Home page and Statistics page side-by-side.

    Side-by-side 창Side-by-side windows

    Side-by-side 창Side-by-side windows

  7. 페이지에서 옵션 중 하나를 클릭 하 여 질문에 대답 합니다.In the Home page, answer the question by clicking one of the options.

    질문에 답변Answering a question

    질문에 답변Answering a question

  8. 단추 중 하나를 클릭 하면 대답이 표시 됩니다.After clicking one of the buttons, the answer should appear.

    질문에 대 한 답변이 올바릅니다.Question answered correct

    질문에 대 한 대답이 올바르게Question answered correctly

  9. 통계 페이지에 제공 된 정보는 오래 된 정보입니다.Notice that the information provided in the Statistics page is outdated. 업데이트 된 결과를 보려면 페이지를 새로 고칩니다.Refresh the page in order to see the updated results.

    통계 페이지Statistics page

    통계 페이지Statistics page

  10. Visual Studio로 돌아가서 디버깅을 중지 합니다.Go back to Visual Studio and stop debugging.

작업 2 – Geek of 퀴즈에 SignalR를 추가 하 여 온라인 차트 표시Task 2 – Adding SignalR to Geek Quiz to Show Online Charts

이 작업에서는 SignalR를 솔루션에 추가 하 고 새 대답이 서버에 전송 될 때 자동으로 클라이언트에 업데이트를 보냅니다.In this task, you will add SignalR to the solution and send updates to the clients automatically when a new answer is sent to the server.

  1. Visual Studio의 도구 메뉴에서 NuGet 패키지 관리자를 선택한 다음 패키지 관리자 콘솔을 클릭 합니다.From the Tools menu in Visual Studio, select NuGet Package Manager, and then click Package Manager Console.

  2. 패키지 관리자 콘솔 창에서 다음 명령을 실행 합니다.In the Package Manager Console window, execute the following command:

    Install-Package Microsoft.AspNet.SignalR
    

    SignalR 패키지 설치SignalR package installation

    SignalR 패키지 설치SignalR package installation

    Note

    새 MVC 5 응용 프로그램에서 SignalR NuGet 패키지 버전 2.0.2을 설치 하는 경우 SignalR를 설치 하기 전에 OWIN 패키지를 버전 2.0.1 이상으로 수동으로 업데이트 해야 합니다.When installing SignalR NuGet packages version 2.0.2 from a brand new MVC 5 application, you will need to manually update OWIN packages to version 2.0.1 (or higher) before installing SignalR. 이렇게 하려면 패키지 관리자 콘솔에서 다음 스크립트를 실행할 수 있습니다.To do this, you can execute the following script in the Package Manager Console:

    get-package | where-object { $_.Id -like "Microsoft.Owin*"} | Update-Package
    

    SignalR의 이후 릴리스에서는 OWIN 종속성이 자동으로 업데이트 됩니다.In a future release of SignalR, OWIN dependencies will be automatically updated.

  3. 솔루션 탐색기에서 Scripts 폴더를 확장 하 고 SignalR js 파일이 솔루션에 추가 되었음을 확인 합니다.In Solution Explorer, expand the Scripts folder and notice that the SignalR js files were added to the solution.

    SignalR JavaScript 참조SignalR JavaScript references

    SignalR JavaScript 참조SignalR JavaScript references

  4. 솔루션 탐색기에서 GeekQuiz 프로젝트를 마우스 오른쪽 단추로 클릭 하 | 새 폴더 추가 를 선택 하 고 이름을 Hubs로 .In Solution Explorer, right-click the GeekQuiz project, select Add | New Folder, and name it Hubs.

  5. 허브 폴더를 마우스 오른쪽 단추로 클릭 하 고 추가 |를 선택 합니다. 새 항목입니다.Right-click the Hubs folder and select Add | New Item.

    새 항목 추가Add new item

    새 항목 추가Add new item

  6. 새 항목 추가 대화 상자에서 C# 시각적 개체 | 웹 | 왼쪽 창의 SignalR 노드 가운데 창에서 SignalR Hub 클래스 (v2) 를 선택 하 고 파일 이름을 StatisticsHub.cs 로 선택한 후에 추가를 클릭 합니다.In the Add New Item dialog box, select the Visual C# | Web | SignalR node in the left pane, select SignalR Hub Class (v2) from the center pane, name the file StatisticsHub.cs and click Add.

    새 항목 추가 대화 상자Add new item dialog box

    새 항목 추가 대화 상자Add new item dialog box

  7. StatisticsHub 클래스의 코드를 다음 코드로 바꿉니다.Replace the code in the StatisticsHub class with the following code.

    (코드 조각- RealTimeSignalR-Ex1-StatisticsHubClass)(Code Snippet - RealTimeSignalR - Ex1 - StatisticsHubClass)

    namespace GeekQuiz.Hubs
    {
        using Microsoft.AspNet.SignalR;
    
        public class StatisticsHub : Hub
        {
        }
    }
    
  8. Startup.cs 를 열고 구성 방법의 끝에 다음 줄을 추가 합니다.Open Startup.cs and add the following line at the end of the Configuration method.

    (코드 조각- RealTimeSignalR-Ex1-MapSignalR)(Code Snippet - RealTimeSignalR - Ex1 - MapSignalR)

    public void Configuration(IAppBuilder app)
    {
        this.ConfigureAuth(app);
        app.MapSignalR();
    }
    
  9. Services 폴더 내에서 StatisticsService.cs 페이지를 열고 다음 using 지시문을 추가 합니다.Open the StatisticsService.cs page inside the Services folder and add the following using directives.

    (코드 조각- RealTimeSignalR-Ex1-UsingDirectives)(Code Snippet - RealTimeSignalR - Ex1 - UsingDirectives)

    using Microsoft.AspNet.SignalR;
    using GeekQuiz.Hubs;
    
  10. 연결 된 클라이언트에 업데이트를 알리려면 먼저 현재 연결에 대 한 컨텍스트 개체를 검색 합니다.To notify connected clients of updates, you first retrieve a Context object for the current connection. 허브 개체는 단일 클라이언트에 메시지를 보내거나 연결 된 모든 클라이언트에 브로드캐스트하는 메서드를 포함 합니다.The Hub object contains methods to send messages to a single client or broadcast to all connected clients. StatisticsService 클래스에 다음 메서드를 추가 하 여 통계 데이터를 브로드캐스트합니다.Add the following method to the StatisticsService class to broadcast the statistics data.

    (코드 조각- RealTimeSignalR-Ex1-NotifyUpdatesMethod)(Code Snippet - RealTimeSignalR - Ex1 - NotifyUpdatesMethod)

    public async Task NotifyUpdates()
    {
        var hubContext = GlobalHost.ConnectionManager.GetHubContext<StatisticsHub>();
        if (hubContext != null)
        {
             var stats = await this.GenerateStatistics();
             hubContext.Clients.All.updateStatistics(stats);
        }
    }
    

    Note

    위의 코드에서는 임의의 메서드 이름을 사용 하 여 클라이언트 (예: updateStatistics)에서 함수를 호출 합니다.In the code above, you are using an arbitrary method name to call a function on the client (i.e.: updateStatistics). 지정 하는 메서드 이름은 동적 개체로 해석 됩니다. 즉, IntelliSense 또는 컴파일 타임 유효성 검사를 수행 하지 않습니다.The method name that you specify is interpreted as a dynamic object, which means there is no IntelliSense or compile-time validation for it. 식은 런타임에 계산 됩니다.The expression is evaluated at run time. 메서드 호출이 실행 되 면 SignalR는 메서드 이름 및 매개 변수 값을 클라이언트에 보냅니다.When the method call executes, SignalR sends the method name and the parameter values to the client. 클라이언트에 이름과 일치 하는 메서드가 있으면 해당 메서드가 호출 되 고 매개 변수 값이이 메서드에 전달 됩니다.If the client has a method that matches the name, that method is called and the parameter values are passed to it. 클라이언트에서 일치 하는 메서드를 찾을 수 없는 경우 오류가 발생 하지 않습니다.If no matching method is found on the client, no error is raised. 자세한 내용은 ASP.NET SignalR HUBS API 가이드를 참조 하세요.For more information, refer to ASP.NET SignalR Hubs API Guide.

  11. Controllers 폴더 내에서 TriviaController.cs 페이지를 열고 다음 using 지시문을 추가 합니다.Open the TriviaController.cs page inside the Controllers folder and add the following using directives.

    using GeekQuiz.Services;
    
  12. 사후 작업 메서드에 다음 강조 표시 된 코드를 추가 합니다.Add the following highlighted code to the Post action method.

    (코드 조각- RealTimeSignalR-Ex1-NotifyUpdatesCall)(Code Snippet - RealTimeSignalR - Ex1 - NotifyUpdatesCall)

    public async Task<IHttpActionResult> Post(TriviaAnswer answer)
    {
        if (!ModelState.IsValid)
        {
             return this.BadRequest(this.ModelState);
        }
    
        answer.UserId = User.Identity.Name;
    
        var isCorrect = await this.StoreAsync(answer);
    
        var statisticsService = new StatisticsService(this.db);
        await statisticsService.NotifyUpdates();
    
        return this.Ok<bool>(isCorrect);
    }
    
  13. 뷰 내에서 통계. cshtml 페이지를 엽니다. | 홈 폴더입니다.Open the Statistics.cshtml page inside the Views | Home folder. 스크립트 섹션을 찾고 섹션의 시작 부분에 다음 스크립트 참조를 추가 합니다.Locate the Scripts section and add the following script references at the beginning of the section.

    (코드 조각- RealTimeSignalR-Ex1-SignalRScriptReferences)(Code Snippet - RealTimeSignalR - Ex1 - SignalRScriptReferences)

    @section Scripts {
        @Scripts.Render("~/Scripts/jquery.signalR-2.0.2.min.js");
        @Scripts.Render("~/signalr/hubs");
        ...
    }
    

    Note

    SignalR 및 기타 스크립트 라이브러리를 Visual Studio 프로젝트에 추가 하면 패키지 관리자가이 항목에 표시 된 버전 보다 최신 버전인 SignalR 스크립트 파일을 설치할 수 있습니다.When you add SignalR and other script libraries to your Visual Studio project, the Package Manager might install a version of the SignalR script file that is more recent than the version shown in this topic. 코드의 스크립트 참조가 프로젝트에 설치 된 스크립트 라이브러리 버전과 일치 하는지 확인 합니다.Make sure that the script reference in your code matches the version of the script library installed in your project.

  14. 다음 강조 표시 된 코드를 추가 하 여 클라이언트를 SignalR hub에 연결 하 고 허브에서 새 메시지가 수신 되 면 통계 데이터를 업데이트 합니다.Add the following highlighted code to connect the client to the SignalR hub and update the statistics data when a new message is received from the hub.

    (코드 조각- RealTimeSignalR-Ex1-SignalRClientCode)(Code Snippet - RealTimeSignalR - Ex1 - SignalRClientCode)

    @section Scripts {
        ...
        <script>
            ...
    
            var connection = $.hubConnection();
            var hub = connection.createHubProxy("StatisticsHub");
            hub.on("updateStatistics", function (statistics) {
                    statisticsData = statistics;
                    $("#correctAnswersCounter").text(statistics.CorrectAnswers);
                    $("#incorrectAnswersCounter").text(statistics.IncorrectAnswers);
    
                    showCharts(statisticsData);
              });
    
            connection.start();
        </script>
    }
    

    이 코드에서는 허브 프록시를 만들고 서버에서 보낸 메시지를 수신 하기 위해 이벤트 처리기를 등록 합니다.In this code, you are creating a Hub Proxy and registering an event handler to listen for messages sent by the server. 이 경우 updateStatistics 메서드를 통해 전송 되는 메시지를 수신 대기 합니다.In this case, you listen for messages sent through the updateStatistics method.

작업 3 – 솔루션 실행Task 3 – Running the Solution

이 태스크에서는 솔루션을 실행 하 여 새 질문에 답변 한 후 SignalR를 사용 하 여 통계 보기가 자동으로 업데이트 되는지 확인 합니다.In this task, you will run the solution to verify that the statistics view is updated automatically using SignalR after answering a new question.

  1. F5 키를 눌러 솔루션을 실행합니다.Press F5 to run the solution.

    Note

    응용 프로그램에 아직 로그인 하지 않은 경우 작업 1에서 만든 사용자로 로그인 합니다.If not already logged in to the application, log in with the user you created in Task 1.

  2. 새 창에서 통계 페이지를 열고 작업 1에서와 같이 페이지와 통계 페이지를 나란히 배치 합니다.Open the Statistics page in a new window and put the Home page and Statistics page side-by-side as you did in Task 1.

  3. 페이지에서 옵션 중 하나를 클릭 하 여 질문에 대답 합니다.In the Home page, answer the question by clicking one of the options.

    다른 질문에 답변Answering another question

    다른 질문에 답변Answering another question

  4. 단추 중 하나를 클릭 하면 대답이 표시 됩니다.After clicking one of the buttons, the answer should appear. 페이지의 통계 정보는 전체 페이지를 새로 고칠 필요 없이 업데이트 된 정보를 사용 하 여 질문에 대답 한 후 자동으로 업데이트 됩니다.Notice that the Statistics information on the page is updated automatically after answering the question with the updated information without the need to refresh the entire page.

    응답 후 새로 고쳐진 통계 페이지Statistics page refreshed after answer

    응답 후 새로 고쳐진 통계 페이지Statistics page refreshed after answer

연습 2: SQL Server을 사용 하 여 확장Exercise 2: Scaling Out Using SQL Server

웹 응용 프로그램의 크기를 조정 하는 경우 일반적으로 수직 확장수평 확장 옵션 중에서 선택할 수 있습니다.When scaling a web application, you can generally choose between scaling up and scaling out options. 수직 확장 은 더 많은 리소스 (CPU, RAM 등)가 있는 대규모 서버를 사용 하는 것을 의미 합니다 .이는 부하를 처리할 서버를 더 추가 하 는 것입니다 .Scale up means using a larger server, with more resources (CPU, RAM, etc.) while scale out means adding more servers to handle the load. 후자와 관련 하 여 발생 하는 문제는 클라이언트를 다른 서버로 라우팅할 수 있다는 것입니다.The problem with the latter is that the clients can get routed to different servers. 한 서버에 연결 된 클라이언트는 다른 서버에서 보낸 메시지를 받지 않습니다.A client that is connected to one server will not receive messages sent from another server.

서버 간에 메시지를 전달 하기 위해 후면판이라는 구성 요소를 사용 하 여 이러한 문제를 해결할 수 있습니다.You can solve these issues by using a component called backplane, to forward messages between servers. 후면판을 사용 하는 경우 각 응용 프로그램 인스턴스는 후면판으로 메시지를 보내고, 후면판은이를 다른 응용 프로그램 인스턴스로 전달 합니다.With a backplane enabled, each application instance sends messages to the backplane, and the backplane forwards them to the other application instances.

SignalR에 대 한 백플레인을에는 현재 다음과 같은 세 가지 유형이 있습니다.There are currently three types of backplanes for SignalR:

  • Windows Azure Service Bus.Windows Azure Service Bus. Service Bus는 구성 요소가 느슨하게 결합 된 메시지를 보낼 수 있도록 하는 메시징 인프라입니다.Service Bus is a messaging infrastructure that allows components to send loosely coupled messages.
  • SQL Server.SQL Server. SQL Server 후면판은 메시지를 SQL 테이블에 기록 합니다.The SQL Server backplane writes messages to SQL tables. 후면판은 효율적인 메시징의 Service Broker를 사용 합니다.The backplane uses Service Broker for efficient messaging. 그러나 Service Broker를 사용 하도록 설정 하지 않은 경우에도 작동 합니다.However, it also works if Service Broker is not enabled.
  • Redis.Redis. Redis는 메모리 내 키-값 저장소입니다.Redis is an in-memory key-value store. Redis는 메시지를 보내기 위한 게시/구독 ("pub/sub") 패턴을 지원 합니다.Redis supports a publish/subscribe ("pub/sub") pattern for sending messages.

모든 메시지는 메시지 버스를 통해 전송 됩니다.Every message is sent through a message bus. 메시지 버스는 게시/구독 추상화를 제공 하는 IMessageBus 인터페이스를 구현 합니다.A message bus implements the IMessageBus interface, which provides a publish/subscribe abstraction. 백플레인을는 기본 IMessageBus 를 해당 후면판 용으로 설계 된 버스로 바꿔 작동 합니다.The backplanes work by replacing the default IMessageBus with a bus designed for that backplane.

각 서버 인스턴스는 버스를 통해 후면판에 연결 됩니다.Each server instance connects to the backplane through the bus. 메시지가 전송 되 면 후면판으로 이동 하 여 후면판에서 모든 서버에 전송 합니다.When a message is sent, it goes to the backplane, and the backplane sends it to every server. 서버는 후면판에서 메시지를 받으면 해당 메시지를 로컬 캐시에 저장 합니다.When a server receives a message from the backplane, it stores the message in its local cache. 그런 다음 서버는 로컬 캐시에서 클라이언트로 메시지를 배달 합니다.The server then delivers messages to clients from its local cache.

SignalR 후면판의 작동 방식에 대 한 자세한 내용은이 문서를 참조 하세요.For more information about how the SignalR backplane works, read this article.

Note

후면판이 병목 상태가 될 수 있는 몇 가지 시나리오가 있습니다.There are some scenarios where a backplane can become a bottleneck. 몇 가지 일반적인 SignalR 시나리오는 다음과 같습니다.Here are some typical SignalR scenarios:

  • 서버 브로드캐스트 (예: 주식 종목): 백플레인을 서버에서 메시지를 보내는 속도를 제어 하므로이 시나리오에 대해 잘 작동 합니다.Server broadcast (e.g., stock ticker): Backplanes work well for this scenario, because the server controls the rate at which messages are sent.
  • 클라이언트-클라이언트 (예: 채팅):이 시나리오에서는 메시지 수가 클라이언트 수로 확장 되 면 후면판에서 병목 현상이 발생할 수 있습니다. 즉, 더 많은 클라이언트에 연결 될 때 메시지의 비율이 비례적으로 증가 하는 경우입니다.Client-to-client (e.g., chat): In this scenario, the backplane might be a bottleneck if the number of messages scales with the number of clients; that is, if the rate of messages grows proportionally as more clients join.
  • 높은 빈도 실시간 (예: 실시간 게임):이 시나리오에는 후면판을 권장 하지 않습니다.High-frequency realtime (e.g., real-time games): A backplane is not recommended for this scenario.

이 연습에서는 SQL Server 를 사용 하 여 geek of 퀴즈 응용 프로그램에서 메시지를 배포 합니다.In this exercise, you will use SQL Server to distribute messages across the Geek Quiz application. 이러한 작업을 단일 테스트 컴퓨터에서 실행 하 여 구성을 설정 하는 방법을 배울 수 있습니다. 그러나 전체 효과를 얻으려면 SignalR 응용 프로그램을 둘 이상의 서버에 배포 해야 합니다.You will run these tasks on a single test machine to learn how to set up the configuration, but in order to get the full effect, you will need to deploy the SignalR application to two or more servers. 또한 서버 중 하나 또는 별도의 전용 서버에 SQL Server를 설치 해야 합니다.You must also install SQL Server on one of the servers, or on a separate dedicated server.

SQL Server 다이어그램을 사용 하 여 Scale Out

작업 1-시나리오 이해Task 1 - Understanding the Scenario

이 작업에서는 로컬 컴퓨터에서 여러 IIS 인스턴스를 시뮬레이션 하는 Geek of 퀴즈 의 두 인스턴스를 실행 합니다.In this task, you will run 2 instances of Geek Quiz simulating multiple IIS instances on your local machine. 이 시나리오에서 한 응용 프로그램에 대 한 기타 정보 질문에 응답 하는 경우 두 번째 인스턴스의 통계 페이지에서 업데이트에 대 한 알림이 표시 되지 않습니다.In this scenario, when answering trivia questions on one application, update won't be notified on the statistics page of the second instance. 이 시뮬레이션은 응용 프로그램이 여러 인스턴스에 배포 되 고 부하 분산 장치를 사용 하 여 통신 하는 환경과 비슷합니다.This simulation resembles an environment where your application is deployed on multiple instances and using a load balancer to communicate with them.

  1. Source/Ex2-ScalingOutWithSQLServer/begin 폴더에 있는 begin .sln 솔루션을 엽니다.Open the Begin.sln solution located in the Source/Ex2-ScalingOutWithSQLServer/Begin folder. 로드 된 후에는 솔루션에 동일한 구조를 가진 두 개의 프로젝트가 있지만 이름이 다른 두 프로젝트가 서버 탐색기 에 대 한 알림이 표시 됩니다.Once loaded, you will notice on the Server Explorer that the solution has two projects with identical structures but different names. 이렇게 하면 로컬 컴퓨터에서 동일한 응용 프로그램의 두 인스턴스를 실행 하는 것이 시뮬레이션 됩니다.This will simulate running two instances of the same application on your local machine.

    Geek of 퀴즈의 2 개 인스턴스를 시뮬레이션 하는 솔루션 시작Begin Solution Simulating 2 Instances of Geek Quiz

    Geek of 퀴즈의 2 개 인스턴스를 시뮬레이션 하는 솔루션 시작Begin Solution Simulating 2 Instances of Geek Quiz

  2. 솔루션 노드를 마우스 오른쪽 단추로 클릭 하 고 속성을 선택 하 여 솔루션의 속성 페이지를 엽니다.Open the properties page of the solution by right-clicking the solution node and selecting Properties. 시작 프로젝트에서 여러 개의 시작 프로젝트 를 선택 하 고 두 프로젝트의 동작 값을 시작으로 변경 합니다.Under Startup Project, select Multiple startup projects and change the Action value for both projects to Start.

    여러 프로젝트 시작Starting Multiple Projects

    여러 프로젝트 시작Starting Multiple Projects

  3. F5 키를 눌러 솔루션을 실행합니다.Press F5 to run the solution. 응용 프로그램은 동일한 응용 프로그램의 여러 인스턴스를 시뮬레이션 하는 서로 다른 포트에서 Geek of 퀴즈 의 두 인스턴스를 시작 합니다.The application will launch two instances of Geek Quiz in different ports, simulating multiple instances of the same application. 왼쪽에 있는 브라우저 중 하나를 화면 오른쪽에 고정 합니다.Pin one of the browsers on left and the other on the right of your screen. 자격 증명을 사용 하 여 로그인 하거나 새 사용자를 등록 합니다.Log in with your credentials or register a new user. 로그인 되 면 왼쪽에 있는 기타 정보 페이지를 유지 하 고 오른쪽 브라우저의 통계 페이지로 이동 합니다.Once logged in, keep the Trivia page on the left and go to the Statistics page in the browser on the right.

    Geek of 퀴즈를 나란히

    Geek of 퀴즈를 나란히Geek Quiz Side by Side

    다른 포트의 geek of 퀴즈

    다른 포트의 geek of 퀴즈Geek Quiz in Different Ports

  4. 왼쪽 브라우저에서 질문에 대 한 대답을 시작 하면 오른쪽 브라우저의 통계 페이지가 업데이트 되지 않는 것을 알 수 있습니다.Start answering questions in the left browser and you will notice that the Statistics page in the right browser is not being updated. SignalR 는 로컬 캐시를 사용 하 여 클라이언트 전체에 메시지를 분산 하 고이 시나리오는 여러 인스턴스를 시뮬레이션 하기 때문에 캐시는 서로 공유 되지 않기 때문입니다.This is because SignalR uses a local cache to distribute messages across their clients and this scenario is simulating multiple instances, therefore the cache is not shared between them. 동일한 단계를 테스트 하 고 단일 앱을 사용 하 여 SignalR 작동 하는지 확인할 수 있습니다.You can verify that SignalR is working by testing the same steps but using a single app. 다음 작업에서는 인스턴스 간에 메시지를 복제 하도록 후면판을 구성 합니다.In the following tasks you will configure a backplane to replicate the messages across instances.

  5. Visual Studio로 돌아가서 디버깅을 중지 합니다.Go back to Visual Studio and stop debugging.

작업 2-SQL Server 백플레인 만들기Task 2 – Creating the SQL Server Backplane

이 작업에서는 Geek of 퀴즈 응용 프로그램의 후면판 역할을 할 데이터베이스를 만듭니다.In this task, you will create a database that will serve as a backplane for the Geek Quiz application. SQL Server 개체 탐색기 를 사용 하 여 서버를 검색 하 고 데이터베이스를 초기화 합니다.You will use SQL Server Object Explorer to browse your server and initialize the database. 또한 Service Broker를 사용 하도록 설정 합니다.Additionally, you will enable the Service Broker.

  1. Visual Studio에서 메뉴 보기 를 열고 SQL Server 개체 탐색기를 선택 합니다.In Visual Studio, open menu View and select SQL Server Object Explorer.

  2. SQL Server 노드를 마우스 오른쪽 단추로 클릭 하 고 SQL Server 추가 ... 옵션을 선택 하 여 LocalDB 인스턴스에 연결 합니다.Connect to your LocalDB instance by right-clicking the SQL Server node and selecting Add SQL Server... option.

    SQL Server 인스턴스 추가Adding a SQL Server Instance

    SQL Server 개체 탐색기에 SQL Server 인스턴스 추가Adding a SQL Server instance to SQL Server Object Explorer

  3. 서버 이름(localdb) \v11.0 으로 설정 하 고 Windows 인증 을 인증 모드로 유지 합니다.Set the server name to (localdb)\v11.0 and leave Windows Authentication as your authentication mode. 연결을 클릭하여 계속합니다.Click Connect to continue.

    LocalDB에 연결Connecting to LocalDB

    LocalDB에 연결Connecting to LocalDB

  4. 이제 LocalDB 인스턴스에 연결 되었으므로 SignalR에 대 한 SQL Server 후면판을 나타내는 데이터베이스를 만들어야 합니다.Now that you are connected to your LocalDB instance, you will need to create a database that will represent the SQL Server backplane for SignalR. 이렇게 하려면 데이터베이스 노드를 마우스 오른쪽 단추로 클릭 하 고 새 데이터베이스 추가를 선택 합니다.To do this, right-click the Databases node and select Add New Database.

    새 데이터베이스 추가Adding a new database

    새 데이터베이스 추가Adding a new database

  5. 데이터베이스 이름을 SignalR 로 설정 하 고 확인 을 클릭 하 여 만듭니다.Set the database name to SignalR and click OK to create it.

    SignalR 데이터베이스 만들기Creating the SignalR database

    SignalR 데이터베이스 만들기Creating the SignalR database

    Note

    데이터베이스의 이름을 선택할 수 있습니다.You can choose any name for the database.

  6. 후면판에서 업데이트를 보다 효율적으로 수신 하려면 데이터베이스에 대해 Service Broker를 사용 하도록 설정 하는 것이 좋습니다.To receive updates more efficiently from the backplane, it is recommended to enable Service Broker for the database. Service Broker은 SQL Server의 메시징 및 큐에 대 한 기본 지원을 제공 합니다.Service Broker provides native support for messaging and queuing in SQL Server. 후면판은 Service Broker 없이도 작동 합니다.The backplane also works without Service Broker. 데이터베이스를 마우스 오른쪽 단추로 클릭 하 고 새 쿼리를 선택 하 여 새 쿼리를 엽니다.Open a new query by right-clicking the database and select New Query.

    새 쿼리 열기Opening a New Query

    새 쿼리 열기Opening a New Query

  7. Service Broker 사용 하도록 설정 되어 있는지 여부를 확인 하려면를 사용 하 여 _Broker_사용 열을 쿼리 합니다.To check whether Service Broker is enabled, query the is_broker_enabled column in the sys.databases catalog view. 최근에 열었던 쿼리 창에서 다음 스크립트를 실행 합니다.Execute the following script in the recently opened query window.

    SELECT [name], [service_broker_guid], [is_broker_enabled] FROM [master].[sys].[databases]
    

    Service Broker 상태 쿼리Querying the Service Broker Status

    Service Broker 상태 쿼리Querying the Service Broker Status

  8. 의 값 이_broker_사용 하도록 설정 된 경우 데이터베이스에서 사용 하도록 설정 된 열이 0""다음 명령을 사용 하 여 사용 하도록 설정 합니다.If the value of the is_broker_enabled column in your database is "0", use the following command to enable it. <데이터베이스> 을 만들 때 설정한 이름으로 바꿉니다 (예: SignalR).Replace <YOUR-DATABASE> with the name you set when creating the database (e.g.: SignalR).

    ALTER DATABASE <YOUR-DATABASE> SET ENABLE_BROKER
    

    Service Broker 사용Enabling Service Broker

    Service Broker 사용Enabling Service Broker

    Note

    이 쿼리가 교착 상태로 표시 되는 경우 DB에 연결 된 응용 프로그램이 없는지 확인 합니다.If this query appears to deadlock, make sure there are no applications connected to the DB.

작업 3-SignalR 응용 프로그램 구성Task 3 – Configuring the SignalR Application

이 작업에서는 SQL Server 후면판에 연결 하도록 Geek of 퀴즈 를 구성 합니다.In this task, you will configure Geek Quiz to connect to the SQL Server backplane. 먼저 SignalR NuGet 패키지를 추가 하 고 연결 문자열을 후면판 데이터베이스로 설정 합니다.You will first add the SignalR.SqlServer NuGet package and set the connection string to your backplane database.

  1. 도구 > NuGet 패키지 관리자에서 패키지 관리자 콘솔 을 엽니다.Open the Package Manager Console from Tools > NuGet Package Manager. 기본 프로젝트 드롭다운 목록에서 GeekQuiz 프로젝트가 선택 되어 있는지 확인 합니다.Make sure that GeekQuiz project is selected in the Default project drop-down list. 다음 명령을 입력 하 여 SignalR NuGet 패키지를 설치 합니다.Type the following command to install the Microsoft.AspNet.SignalR.SqlServer NuGet package.

    Install-Package Microsoft.AspNet.SignalR.SqlServer
    
  2. 이전 단계를 반복 하지만 이번에는 project GeekQuiz2에 대해이 시간을 반복 합니다.Repeat the previous step but this time for project GeekQuiz2.

  3. SQL Server 백플레인를 구성 하려면 GeekQuiz 프로젝트의 Startup.cs 파일을 열고 configure 메서드에 다음 코드를 추가 합니다.To configure the SQL Server backplane, open the Startup.cs file of the GeekQuiz project and add the following code to the Configure method. <-데이터베이스> 을 SQL Server 백플레인를 만들 때 사용한 데이터베이스 이름으로 바꿉니다.Replace <YOUR-DATABASE> with your database name you used when creating the SQL Server backplane. GeekQuiz2 프로젝트에 대해이 단계를 반복 합니다.Repeat this step for the GeekQuiz2 project.

    (코드 조각- RealTimeSignalR-Ex2-StartupConfiguration)(Code Snippet - RealTimeSignalR - Ex2 - StartupConfiguration)

    public class Startup 
    {   
        public void Configuration(IAppBuilder app) 
        {           
            var sqlConnectionString = @"Server=(localdb)\v11.0;Database=<YOUR-DATABASE>;Integrated Security=True;";
            GlobalHost.DependencyResolver.UseSqlServer(sqlConnectionString); 
            this.ConfigureAuth(app);
            app.MapSignalR();
        }
    }
    
  4. 이제 두 프로젝트가 모두 SQL Server 후면판을 사용 하도록 구성 되었으므로 F5 키를 눌러 동시에 실행 합니다.Now that both projects are configured to use the SQL Server backplane, press F5 to run them simultaneously.

  5. 다시 Visual Studio 는 서로 다른 포트에서 두 개의 geek of 퀴즈 인스턴스를 시작 합니다.Again, Visual Studio will launch two instances of Geek Quiz in different ports. 왼쪽에 있는 브라우저 중 하나를 화면 오른쪽에 고정 하 고 자격 증명을 사용 하 여 로그인 합니다.Pin one of the browsers on the left and the other on the right of your screen and log in with your credentials. 왼쪽에 있는 기타 정보 페이지를 유지 하 고 오른쪽 브라우저에서 통계 pagein 이동 합니다.Keep the Trivia page on the left and go to Statistics pagein the right browser.

  6. 왼쪽 브라우저에서 질문에 답변 하기 시작 합니다.Start answering questions in the left browser. 이번에는 후면판 덕분에 통계 페이지가 업데이트 됩니다.This time, the Statistics page is updated thanks to the backplane. 응용 프로그램 사이를 전환 하 고 (이제통계 는 왼쪽에 있고, 기타 정보 는 오른쪽에 있습니다.) 테스트를 반복 하 여 두 인스턴스에 대해 모두 작동 하는지 확인 합니다.Switch between applications (Statistics is now on the left, and Trivia is on the right) and repeat the test to validate that it is working for both instances. 후면판은 연결 된 각 서버에 대 한 메시지의 공유 캐시로 사용 되며, 각 서버는 연결 된 클라이언트에 배포할 메시지를 자체 로컬 캐시에 저장 합니다.The backplane serves as a shared cache of messages for each connected server, and each server will store the messages in their own local cache to distribute to connected clients.

  7. Visual Studio로 돌아가서 디버깅을 중지 합니다.Go back to Visual Studio and stop debugging.

  8. SQL Server 백플레인 구성 요소는 지정 된 데이터베이스에 필요한 테이블을 자동으로 생성 합니다.The SQL Server backplane component automatically generates the necessary tables on the specified database. SQL Server 개체 탐색기 패널에서 후면판에 대해 만든 데이터베이스 (예: SignalR)를 열고 해당 테이블을 확장 합니다.In the SQL Server Object Explorer panel, open the database you created for the backplane (e.g.: SignalR) and expand its tables. 다음 테이블이 표시 됩니다.You should see the following tables:

    후면판 생성 테이블

    후면판 생성 테이블Backplane Generated Tables

  9. SignalR_0 테이블을 마우스 오른쪽 단추로 클릭 하 고 데이터 보기를 선택 합니다.Right-click the SignalR.Messages_0 table and select View Data.

    SignalR 후면판 메시지 보기 테이블

    SignalR 후면판 메시지 보기 테이블View SignalR Backplane Messages Table

  10. 기타 정보 질문에 대답할 때 허브 로 전송 되는 다른 메시지를 볼 수 있습니다.You can see the different messages sent to the Hub when answering the trivia questions. 후면판은 이러한 메시지를 연결 된 인스턴스에 배포 합니다.The backplane distributes these messages to any connected instance.

    후면판 메시지 테이블

    후면판 메시지 테이블Backplane Messages Table


요약Summary

이 실습 랩에서는 응용 프로그램에 SignalR 를 추가 하 고 허브를 사용 하 여 서버에서 연결 된 클라이언트로 알림을 보내는 방법에 대해 알아보았습니다.In this hands-on lab, you have learned how to add SignalR to your application and send notifications from the server to your connected clients using Hubs. 또한 응용 프로그램을 여러 IIS 인스턴스에 배포할 때 후면판 구성 요소를 사용 하 여 응용 프로그램을 확장 하는 방법을 배웠습니다.Additionally, you learned how to scale out your application by using a backplane component when your application is deployed in multiple IIS instances.