실습: SignalR을 사용하는 실시간 웹 애플리케이션

웹 캠프 팀

경고

이 설명서는 최신 버전의 SignalR용이 아닙니다. ASP.NET Core SignalR을 살펴보세요.

웹 캠프 교육 키트 다운로드, 2015년 10월 릴리스

실시간 웹 애플리케이션은 서버 쪽 콘텐츠를 연결된 클라이언트에 실시간으로 푸시하는 기능을 제공합니다. ASP.NET 개발자의 경우 ASP.NET SignalR 은 애플리케이션에 실시간 웹 기능을 추가하는 라이브러리입니다. 여러 전송을 활용하여 클라이언트 및 서버에서 사용 가능한 최상의 전송을 고려하여 사용 가능한 최상의 전송을 자동으로 선택합니다. 브라우저와 서버 간의 양방향 통신을 가능하게 하는 HTML5 API인 WebSocket을 활용합니다.

또한 SignalR은 ASP.NET 애플리케이션에서 클라이언트 RPC(서버 쪽 .NET 코드에서 클라이언트 브라우저에서 JavaScript 함수 호출)에 서버를 수행하는 간단한 고급 API를 제공하고 연결/연결 끊기 이벤트, 그룹화 연결 및 권한 부여와 같은 연결 관리에 유용한 후크를 추가합니다.

SignalR 은 클라이언트와 서버 간에 실시간 작업을 수행하는 데 필요한 일부 전송에 대한 추상화입니다. SignalR 연결은 HTTP로 시작되고 사용 가능한 경우 WebSocket 연결로 승격됩니다. WebSocket은 서버 메모리를 가장 효율적으로 사용하고, 대기 시간이 가장 짧으며, 가장 기본 기능(예: 클라이언트와 서버 간의 전체 이중 통신)을 가지지만 가장 엄격한 요구 사항이 있기 때문에 SignalR에 이상적인 전송입니다. WebSocket을 사용하려면 서버에서 Windows Server 2012 또는 Windows 8을 사용해야 합니다. .NET Framework 4.5와 함께. 이러한 요구 사항이 충족되지 않으면 SignalR 은 다른 전송을 사용하여 연결을 만들려고 시도합니다(예: Ajax 긴 폴링).

SignalR API에는 클라이언트와 서버 간의 통신을 위한 두 가지 모델인 영구 연결허브가 포함되어 있습니다. 연결은 단일 수신자, 그룹화 또는 브로드캐스트 메시지를 보내기 위한 간단한 엔드포인트를 나타냅니다. 허브는 클라이언트와 서버가 서로 메서드를 직접 호출할 수 있도록 하는 연결 API를 기반으로 구축된 보다 높은 수준의 파이프라인입니다.

SignalR 아키텍처

모든 샘플 코드 및 코드 조각은 에서 사용할 수 있는 웹 캠프 교육 키트, 2015년 10월 릴리스에 https://github.com/Microsoft-Web/WebCampTrainingKit/releases/tag/v2015.10.13b포함되어 있습니다. 해당 페이지의 설치 관리자 링크는 더 이상 작동하지 않습니다. 대신 자산 섹션 아래의 링크 중 하나를 사용합니다.

개요

목표

이 실습 랩에서는 다음 방법을 알아봅니다.

  • SignalR을 사용하여 서버에서 클라이언트로 알림을 보냅니다.
  • SQL Server 사용하여 SignalR 애플리케이션을 Scale Out.

사전 요구 사항

이 실습 랩을 완료하려면 다음이 필요합니다.

설치 프로그램

이 실습 랩에서 연습을 실행하려면 먼저 환경을 설정해야 합니다.

  1. Windows Explorer 창을 열고 랩의 원본 폴더로 이동합니다.
  2. Setup.cmd를 마우스 오른쪽 단추로 클릭하고 관리자 권한으로 실행을 선택하여 환경을 구성하고 이 랩에 대한 Visual Studio 코드 조각을 설치하는 설치 프로세스를 시작합니다.
  3. 사용자 계정 컨트롤 대화 상자가 표시되면 계속할 작업을 확인합니다.

참고

설치 프로그램을 실행하기 전에 이 랩에 대한 모든 종속성을 확인했는지 확인합니다.

코드 조각 사용

랩 문서 전체에서 코드 블록을 삽입하라는 지시가 표시됩니다. 편의를 위해 이 코드의 대부분은 수동으로 추가할 필요가 없도록 Visual Studio 2013 내에서 액세스할 수 있는 Visual Studio Code 코드 조각으로 제공됩니다.

참고

각 연습에는 각 연습을 다른 연습과 독립적으로 따를 수 있는 연습의 Begin 폴더에 있는 시작 솔루션이 함께 제공됩니다. 연습 중에 추가된 코드 조각은 이러한 시작 솔루션에서 누락되었으며 연습을 완료할 때까지 작동하지 않을 수 있습니다. 연습의 소스 코드 내에서 해당 연습의 단계를 완료한 결과 코드가 포함된 Visual Studio 솔루션이 포함된 End 폴더도 찾을 수 있습니다. 이 실습 랩을 통해 작업할 때 추가 도움이 필요한 경우 이러한 솔루션을 지침으로 사용할 수 있습니다.


연습

이 실습 랩에는 다음 연습이 포함되어 있습니다.

  1. SignalR을 사용하여 Real-Time 데이터 작업
  2. SQL Server 사용하여 스케일 아웃

이 랩을 완료하는 예상 시간: 60분

참고

Visual Studio를 처음 시작할 때 미리 정의된 설정 컬렉션 중 하나를 선택해야 합니다. 미리 정의된 각 컬렉션은 특정 개발 스타일과 일치하도록 설계되었으며 창 레이아웃, 편집기 동작, IntelliSense 코드 조각 및 대화 상자 옵션을 결정합니다. 이 랩의 절차에서는 일반 개발 설정 컬렉션을 사용할 때 Visual Studio에서 지정된 작업을 수행하는 데 필요한 작업을 설명합니다. 개발 환경에 대해 다른 설정 컬렉션을 선택하는 경우 고려해야 할 단계에 차이가 있을 수 있습니다.

연습 1: SignalR을 사용하여 Real-Time 데이터 작업

채팅이 예로 사용되는 경우가 많지만 실시간 웹 기능을 사용하여 훨씬 더 많은 작업을 수행할 수 있습니다. 사용자가 웹 페이지를 새로 고쳐 새 데이터를 보거나 페이지가 Ajax 긴 폴링을 구현하여 새 데이터를 검색할 때마다 SignalR을 사용할 수 있습니다.

SignalR은 서버 푸시 또는 브로드캐스트 기능을 지원합니다. 자동으로 연결 관리를 처리합니다. 클라이언트-서버 통신을 위한 클래식 HTTP 연결에서는 각 요청에 대해 연결이 다시 설정되지만 SignalR은 클라이언트와 서버 간의 영구 연결을 제공합니다. SignalR에서 서버 코드는 현재 알고 있는 요청-응답 모델이 아닌 RPC(원격 프로시저 호출)를 사용하여 브라우저에서 클라이언트 코드를 호출합니다.

이 연습에서는 전체 페이지를 새로 고칠 필요 없이 업데이트된 메트릭으로 통계 dashboard 표시하도록 SignalR을 사용하도록 Geek 퀴즈 애플리케이션을 구성합니다.

작업 1 – 괴짜 퀴즈 통계 페이지 탐색

이 작업에서는 애플리케이션을 살펴보고 통계 페이지가 표시되는 방법과 정보가 업데이트되는 방식을 개선하는 방법을 확인합니다.

  1. Visual Studio Express 2013 for Web을 열고 Source\Ex1-WorkingWithRealTimeData\Begin 폴더에 있는 GeekQuiz.sln 솔루션을 엽니다.

  2. F5 키를 눌러 솔루션을 실행합니다. 로그인 페이지가 브라우저에 표시됩니다.

    솔루션 실행

    솔루션을 실행합니다.

  3. 페이지의 오른쪽 위 모서리에서 등록 을 클릭하여 애플리케이션에 새 사용자를 만듭니다.

    링크 등록 링크

    링크 등록

  4. 등록 페이지에서 사용자 이름암호를 입력한 다음 등록을 클릭합니다.

    사용자 등록

    사용자 등록

  5. 애플리케이션은 새 계정을 등록하고 사용자가 인증되고 첫 번째 퀴즈 질문을 보여 주는 홈페이지로 다시 리디렉션됩니다.

  6. 새 창에서 통계 페이지를 열고 페이지와 통계 페이지를 나란히 배치 합니다 .

    나란히 창 나란히

    병렬 창

  7. 페이지에서 옵션 중 하나를 클릭하여 질문에 대답합니다.

    질문에 답변

    질문 답변

  8. 단추 중 하나를 클릭하면 답변이 나타납니다.

    정답이 정답인 질문

    올바르게 대답한 질문

  9. 통계 페이지에 제공된 정보가 오래되었습니다. 업데이트된 결과를 보려면 페이지를 새로 고칩니다.

    통계 페이지

    통계 페이지

  10. Visual Studio로 돌아가기 디버깅을 중지합니다.

작업 2 - 온라인 차트를 표시하기 위해 Geek 퀴즈에 SignalR 추가

이 작업에서는 솔루션에 SignalR을 추가하고 새 답변이 서버에 전송될 때 클라이언트에 업데이트를 자동으로 보냅니다.

  1. Visual Studio의 도구 메뉴에서 NuGet 패키지 관리자를 선택한 다음 패키지 관리자 콘솔을 클릭합니다.

  2. 패키지 관리자 콘솔 창에서 다음 명령을 실행합니다.

    Install-Package Microsoft.AspNet.SignalR
    

    SignalR 패키지 설치

    SignalR 패키지 설치

    참고

    새로운 MVC 5 애플리케이션에서 SignalR NuGet 패키지 버전 2.0.2를 설치하는 경우 SignalR을 설치하기 전에 OWIN 패키지를 버전 2.0.1 이상으로 수동으로 업데이트해야 합니다. 이렇게 하려면 패키지 관리자 콘솔에서 다음 스크립트를 실행할 수 있습니다.

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

    이후 SignalR 릴리스에서는 OWIN 종속성이 자동으로 업데이트됩니다.

  3. 솔루션 탐색기Scripts 폴더를 확장하고 SignalR js 파일이 솔루션에 추가되었음을 확인합니다.

    SignalR JavaScript가

    SignalR JavaScript 참조

  4. 솔루션 탐색기GeekQuiz 프로젝트를 마우스 오른쪽 단추로 클릭하고새 폴더추가 | 를 선택하고 이름을 Hubs로 지정합니다.

  5. Hubs 폴더를 마우스 오른쪽 단추로 클릭하고 추가 | 를 선택합니다. 새 항목입니다.

    새 항목 추가

    새 항목 추가

  6. 새 항목 추가 대화 상자에서 Visual C# | 을 선택합니다. 웹 | 왼쪽 창의 SignalR 노드에서 가운데 창에서 SignalR Hub 클래스(v2)를 선택하고, 파일 이름을 StatisticsHub.cs로 지정하고 추가를 클릭합니다.

    새 항목 추가 대화 상자

    새 항목 추가 대화 상자

  7. StatisticsHub 클래스의 코드를 다음 코드로 바꿉니다.

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

    namespace GeekQuiz.Hubs
    {
        using Microsoft.AspNet.SignalR;
    
        public class StatisticsHub : Hub
        {
        }
    }
    
  8. Startup.cs를 열고 Configuration 메서드의 끝에 다음 줄을 추가합니다.

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

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

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

    using Microsoft.AspNet.SignalR;
    using GeekQuiz.Hubs;
    
  10. 연결된 클라이언트에 업데이트를 알리려면 먼저 현재 연결에 대한 Context 개체를 검색합니다. Hub 개체에는 단일 클라이언트로 메시지를 보내거나 연결된 모든 클라이언트에 브로드캐스트하는 메서드가 포함되어 있습니다. StatisticsService 클래스에 다음 메서드를 추가하여 통계 데이터를 브로드캐스트합니다.

    (코드 조각 - 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);
        }
    }
    

    참고

    위의 코드에서는 임의의 메서드 이름을 사용하여 클라이언트에서 함수를 호출합니다(예: updateStatistics). 지정하는 메서드 이름은 동적 개체로 해석됩니다. 즉, IntelliSense 또는 컴파일 시간 유효성 검사가 없습니다. 식은 런타임에 평가됩니다. 메서드 호출이 실행되면 SignalR은 메서드 이름과 매개 변수 값을 클라이언트에 보냅니다. 클라이언트에 이름과 일치하는 메서드가 있는 경우 해당 메서드가 호출되고 매개 변수 값이 전달됩니다. 클라이언트에서 일치하는 메서드를 찾을 수 없으면 오류가 발생하지 않습니다. 자세한 내용은 ASP.NET SignalR Hubs API 가이드를 참조하세요.

  11. Controllers 폴더 내에서 TriviaController.cs 페이지를 열고 다음 using 지시문을 추가합니다.

    using GeekQuiz.Services;
    
  12. Post 작업 메서드에 강조 표시된 다음 코드를 추가합니다.

    (코드 조각 - 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. Views | 내에서 Statistics.cshtml 페이지를 엽니다. 폴더. 스크립트 섹션 찾아 섹션의 시작 부분에 다음 스크립트 참조를 추가합니다.

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

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

    참고

    Visual Studio 프로젝트에 SignalR 및 기타 스크립트 라이브러리를 추가하는 경우 패키지 관리자는 이 항목에 표시된 버전보다 최신 버전의 SignalR 스크립트 파일을 설치할 수 있습니다. 코드의 스크립트 참조가 프로젝트에 설치된 스크립트 라이브러리의 버전과 일치하는지 확인합니다.

  14. 다음 강조 표시된 코드를 추가하여 클라이언트를 SignalR Hub에 연결하고 허브에서 새 메시지를 받을 때 통계 데이터를 업데이트합니다.

    (코드 조각 - 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>
    }
    

    이 코드에서는 허브 프록시를 만들고 서버에서 보낸 메시지를 수신 대기하도록 이벤트 처리기를 등록합니다. 이 경우 updateStatistics 메서드를 통해 전송된 메시지를 수신 대기합니다.

작업 3 – 솔루션 실행

이 작업에서는 솔루션을 실행하여 새 질문에 답한 후 SignalR을 사용하여 통계 보기가 자동으로 업데이트되는지 확인합니다.

  1. F5 키를 눌러 솔루션을 실행합니다.

    참고

    애플리케이션에 아직 로그인하지 않은 경우 작업 1에서 만든 사용자로 로그인합니다.

  2. 새 창에서 통계 페이지를 열고 작업 1에서와 같이 페이지와 통계 페이지를 나란히 배치 합니다 .

  3. 페이지에서 옵션 중 하나를 클릭하여 질문에 답변합니다.

    다른 질문에 답변

    다른 질문 답변

  4. 단추 중 하나를 클릭하면 답변이 나타납니다. 전체 페이지를 새로 고칠 필요 없이 업데이트된 정보로 질문에 대답한 후 페이지의 통계 정보가 자동으로 업데이트됩니다.

    답변 후 새로 고친 통계 페이지 답변 후

    답변 후 새로 고친 통계 페이지

연습 2: SQL Server 사용하여 스케일 아웃

웹 애플리케이션을 스케일링할 때 일반적으로 확장스케일 아웃 옵션 중에서 선택할 수 있습니다. 스케일 업 은 더 많은 리소스(CPU, RAM 등)가 있는 더 큰 서버를 사용하는 반면 스케일 아웃 은 부하를 처리하기 위해 더 많은 서버를 추가하는 것을 의미합니다. 후자의 문제는 클라이언트가 다른 서버로 라우팅할 수 있다는 것입니다. 한 서버에 연결된 클라이언트는 다른 서버에서 보낸 메시지를 받지 않습니다.

백플레인이라는 구성 요소를 사용하여 서버 간에 메시지를 전달하여 이러한 문제를 해결할 수 있습니다. 백플레인을 사용하도록 설정하면 각 애플리케이션 instance 백플레인에 메시지를 보내고 백플레인은 메시지를 다른 애플리케이션 인스턴스로 전달합니다.

현재 SignalR에는 다음과 같은 세 가지 유형의 백플레인이 있습니다.

  • Windows Azure Service Bus. Service Bus는 구성 요소가 느슨하게 결합된 메시지를 보낼 수 있는 메시징 인프라입니다.
  • SQL Server. SQL Server 백플레인은 SQL 테이블에 메시지를 씁니다. 백플레인은 효율적인 메시징을 위해 Service Broker를 사용합니다. 그러나 Service Broker를 사용하도록 설정하지 않은 경우에도 작동합니다.
  • Redis. Redis는 메모리 내 키-값 저장소입니다. Redis는 메시지를 보내기 위한 게시/구독("pub/sub") 패턴을 지원합니다.

모든 메시지는 메시지 버스를 통해 전송됩니다. 메시지 버스는 게시/구독 추상화 기능을 제공하는 IMessageBus 인터페이스를 구현합니다. 백플레인은 기본 IMessageBus를 해당 백플레인용으로 설계된 버스로 바꾸어 작동합니다.

각 서버 instance 버스를 통해 백플레인에 연결됩니다. 메시지가 전송되면 백플레인으로 이동하고 백플레인은 모든 서버로 보냅니다. 서버가 백플레인에서 메시지를 받으면 로컬 캐시에 메시지를 저장합니다. 그런 다음 서버는 로컬 캐시에서 클라이언트에 메시지를 배달합니다.

SignalR 백플레인의 작동 방식에 대한 자세한 내용은 이 문서를 참조하세요.

참고

백플레인이 병목 상태가 될 수 있는 몇 가지 시나리오가 있습니다. 다음은 몇 가지 일반적인 SignalR 시나리오입니다.

  • 서버 브로드캐스트 (예: 주식 시세): 백플레인은 이 시나리오에서 잘 작동합니다. 서버가 메시지를 보내는 속도를 제어하기 때문입니다.
  • 클라이언트 간 (예: 채팅): 이 시나리오에서는 메시지 수가 클라이언트 수와 함께 스케일링되면 백플레인에 병목 현상이 발생할 수 있습니다. 즉, 더 많은 클라이언트가 조인할 때 메시지 속도가 비례적으로 증가하는 경우 입니다.
  • 고주파 실시간 (예: 실시간 게임): 이 시나리오에는 백플레인을 사용하지 않는 것이 좋습니다.

이 연습에서는 SQL Server 사용하여 Geek 퀴즈 애플리케이션 간에 메시지를 배포합니다. 단일 테스트 머신에서 이러한 작업을 실행하여 구성을 설정하는 방법을 알아보지만 전체 효과를 얻으려면 SignalR 애플리케이션을 둘 이상의 서버에 배포해야 합니다. 또한 서버 중 하나 또는 별도의 전용 서버에 SQL Server 설치해야 합니다.

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

작업 1 - 시나리오 이해

이 작업에서는 로컬 컴퓨터에서 여러 IIS 인스턴스를 시뮬레이션하는 2개의 Geek 퀴즈 인스턴스를 실행합니다. 이 시나리오에서는 한 애플리케이션에 대한 퀴즈 질문에 답할 때 두 번째 instance 통계 페이지에 업데이트 알림이 표시되지 않습니다. 이 시뮬레이션은 애플리케이션이 여러 인스턴스에 배포되고 부하 분산 장치를 사용하여 통신하는 환경과 유사합니다.

  1. Source/Ex2-ScalingOutWithSQLServer/Begin 폴더에 있는 Begin.sln 솔루션을 엽니다. 로드되면 서버 Explorer 솔루션에 구조가 동일하지만 이름이 다른 두 개의 프로젝트가 있음을 알 수 있습니다. 그러면 로컬 컴퓨터에서 동일한 애플리케이션의 두 인스턴스를 실행하는 시뮬레이션이 수행됩니다.

    Geek 퀴즈의 인스턴스 2개 시뮬레이션

    Geek 퀴즈 인스턴스 2개 시뮬레이션 솔루션 시작

  2. 솔루션 노드를 마우스 오른쪽 단추로 클릭하고 속성을 선택하여 솔루션의 속성 페이지를 엽니다. 시작 프로젝트에서여러 시작 프로젝트를 선택하고 두 프로젝트의 작업 값을 시작으로 변경합니다.

    여러 프로젝트를

    여러 프로젝트 시작

  3. F5 키를 눌러 솔루션을 실행합니다. 애플리케이션은 서로 다른 포트에서 Geek Quiz 의 두 인스턴스를 시작하여 동일한 애플리케이션의 여러 인스턴스를 시뮬레이션합니다. 브라우저 중 하나를 왼쪽에 고정하고 다른 하나는 화면 오른쪽에 고정합니다. 자격 증명으로 로그인하거나 새 사용자를 등록합니다. 로그인한 후 왼쪽에 퀴즈 페이지를 유지하고 오른쪽 브라우저의 통계 페이지로 이동합니다.

    괴짜 퀴즈 나란히

    괴짜 퀴즈 나란히

    다른 포트의 괴짜 퀴즈

    다른 포트의 괴짜 퀴즈

  4. 왼쪽 브라우저에서 질문에 대한 답변을 시작하면 오른쪽 브라우저의 통계 페이지가 업데이트되지 않는 것을 알 수 있습니다. SignalR은 로컬 캐시를 사용하여 클라이언트에 메시지를 배포하고 이 시나리오는 여러 인스턴스를 시뮬레이션하기 때문에 캐시가 공유되지 않기 때문입니다. SignalR이 동일한 단계를 테스트하지만 단일 앱을 사용하여 작동하는지 확인할 수 있습니다. 다음 작업에서는 인스턴스 간에 메시지를 복제하도록 백플레인을 구성합니다.

  5. Visual Studio로 돌아가기 디버깅을 중지합니다.

작업 2 - SQL Server 백플레인 만들기

이 작업에서는 Geek 퀴즈 애플리케이션의 백플레인 역할을 하는 데이터베이스를 만듭니다. SQL Server 개체 탐색기 사용하여 서버를 찾아보고 데이터베이스를 초기화합니다. 또한 Service Broker를 사용하도록 설정합니다.

  1. Visual Studio에서 메뉴 보기를 열고 SQL Server 개체 탐색기 선택합니다.

  2. SQL Server 노드를 마우스 오른쪽 단추로 클릭하고 SQL Server추가... 옵션을 선택하여 LocalDB instance 연결합니다.

    SQL Server 인스턴스 추가

    SQL Server 개체 탐색기 SQL Server instance 추가

  3. 서버 이름을(localdb)\v11.0으로 설정하고 Windows 인증을 인증 모드로 유지합니다. 연결을 클릭하여 계속합니다.

    LocalDB에

    LocalDB에 연결

  4. 이제 LocalDB instance 연결되었으므로 SignalR에 대한 SQL Server 백플레인을 나타내는 데이터베이스를 만들어야 합니다. 이렇게 하려면 데이터베이스 노드를 마우스 오른쪽 단추로 클릭하고 새 데이터베이스 추가를 선택합니다.

    새 데이터베이스 추가

    새 데이터베이스 추가

  5. 데이터베이스 이름을 SignalR 로 설정하고 확인을 클릭하여 만듭니다.

    SignalR 데이터베이스 만들기

    SignalR 데이터베이스 만들기

    참고

    데이터베이스의 이름을 선택할 수 있습니다.

  6. 백플레인에서 업데이트를 보다 효율적으로 받으려면 데이터베이스에 Service Broker를 사용하도록 설정하는 것이 좋습니다. Service Broker는 SQL Server 메시징 및 큐에 대한 기본 지원을 제공합니다. 백플레인은 Service Broker 없이도 작동합니다. 데이터베이스를 마우스 오른쪽 단추로 클릭하고 새 쿼리를 선택하여 새 쿼리를 엽니다.

    새 쿼리 열기

    새 쿼리 열기

  7. Service Broker를 사용할지 여부를 검사 sys.databases 카탈로그 뷰에서 is_broker_enabled 열을 쿼리합니다. 최근에 연 쿼리 창에서 다음 스크립트를 실행합니다.

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

    Service Broker 상태를 쿼리

    Service Broker 상태 쿼리

  8. 데이터베이스의 is_broker_enabled 열 값이 "0"인 경우 다음 명령을 사용하여 사용하도록 설정합니다. YOUR-DATABASE를 데이터베이스를 만들 때 설정한 이름으로 바꿉<니다(예: SignalR).>

    ALTER DATABASE <YOUR-DATABASE> SET ENABLE_BROKER
    

    Service Broker 사용

    Service Broker 사용

    참고

    이 쿼리가 교착 상태에 나타나는 경우 DB에 연결된 애플리케이션이 없는지 확인합니다.

작업 3 - SignalR 애플리케이션 구성

이 작업에서는 SQL Server 백플레인에 연결하도록 Geek 퀴즈를 구성합니다. 먼저 SignalR.SqlServer NuGet 패키지를 추가하고 연결 문자열을 백플레인 데이터베이스로 설정합니다.

  1. 도구>NuGet 패키지 관리자에서 패키지 관리자콘솔을 엽니다. 기본 프로젝트 드롭다운 목록에서 GeekQuiz프로젝트가 선택되어 있는지 확인합니다. 다음 명령을 입력하여 Microsoft.AspNet.SignalR.SqlServer NuGet 패키지를 설치합니다.

    Install-Package Microsoft.AspNet.SignalR.SqlServer
    
  2. 이전 단계를 반복하지만 이번에는 GeekQuiz2 프로젝트에 대해 반복합니다.

  3. SQL Server 백플레인을 구성하려면 GeekQuiz 프로젝트의 Startup.cs 파일을 열고 Configure 메서드에 다음 코드를 추가합니다. YOUR-DATABASE를 SQL Server 백플레인을 만들 때 사용한 데이터베이스 이름으로 바꿉 <있습니다.> GeekQuiz2 프로젝트에 대해 이 단계를 반복합니다.

    (코드 조각 - 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 키를 눌러 동시에 실행합니다.

  5. 다시 말하지만 Visual Studio 는 서로 다른 포트에서 Geek 퀴즈 의 두 인스턴스를 시작합니다. 브라우저 중 하나를 왼쪽에 고정하고 다른 하나는 화면 오른쪽에 고정하고 자격 증명으로 로그인합니다. 왼쪽의 퀴즈 페이지를 유지하고 오른쪽 브라우저의 통계 페이지로 이동합니다.

  6. 왼쪽 브라우저에서 질문에 대한 답변을 시작합니다. 이번에는 백플레인 덕분에 통계 페이지가 업데이트됩니다. 애플리케이션 간을 전환하고(통계 가 왼쪽에 있고 Trivia 가 오른쪽에 있습니다) 테스트를 반복하여 두 인스턴스에서 작동하는지 확인합니다. 백플레인은 연결된 각 서버에 대한 메시지의 공유 캐시 역할을 하며, 각 서버는 연결된 클라이언트에 배포할 메시지를 자체 로컬 캐시에 저장합니다.

  7. Visual Studio로 돌아가기 디버깅을 중지합니다.

  8. SQL Server 백플레인 구성 요소는 지정된 데이터베이스에 필요한 테이블을 자동으로 생성합니다. SQL Server 개체 탐색기 패널에서 백플레인에 대해 만든 데이터베이스(예: SignalR)를 열고 해당 테이블을 확장합니다. 다음 표가 표시됩니다.

    백플레인 생성 테이블

    백플레인 생성 테이블

  9. SignalR.Messages_0 테이블을 마우스 오른쪽 단추 로 클릭하고 데이터 보기를 선택합니다.

    SignalR 백플레인 메시지 테이블 보기

    SignalR 백플레인 메시지 테이블 보기

  10. 퀴즈 질문에 대답할 때 허브 로 전송된 다양한 메시지를 볼 수 있습니다. 백플레인은 이러한 메시지를 연결된 모든 instance 배포합니다.

    백플레인 메시지 테이블

    백플레인 메시지 테이블


요약

이 실습 랩에서는 Hubs를 사용하여 애플리케이션에 SignalR을 추가하고 서버에서 연결된 클라이언트로 알림을 보내는 방법을 알아보았습니다. 또한 애플리케이션이 여러 IIS 인스턴스에 배포될 때 백플레인 구성 요소를 사용하여 애플리케이션을 스케일 아웃하는 방법을 알아보았습니다.