자습서: SignalR 2 및 MVC 5와 실시간 채팅Tutorial: Real-time chat with SignalR 2 and MVC 5

이 자습서에서는 ASP.NET SignalR 2를 사용 하 여 실시간 채팅 응용 프로그램을 만드는 방법을 보여 줍니다.This tutorial shows how to use ASP.NET SignalR 2 to create a real-time chat application. MVC 5 응용 프로그램에 SignalR를 추가 하 고 메시지를 보내고 표시 하는 채팅 보기를 만듭니다.You add SignalR to an MVC 5 application and create a chat view 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 MVC 5 응용 프로그램을 만들고 SignalR 라이브러리를 추가 하 고 채팅 응용 프로그램을 만드는 방법을 보여 줍니다.This section shows how to use Visual Studio 2017 and SignalR 2 to create an empty ASP.NET MVC 5 application, add the SignalR library, and create the chat application.

  1. Visual Studio에서 .NET Framework 4.5를 C# 대상으로 하는 ASP.NET 응용 프로그램을 만들고 이름을 SignalRChat로 지정 하 고 확인을 클릭 합니다.In Visual Studio, create a C# ASP.NET application that targets .NET Framework 4.5, name it SignalRChat, and click OK.

    웹 만들기

  2. New ASP.NET 웹 응용 프로그램-SignalRMvcChat에서 MVC 를 선택 하 고 인증 변경을 선택 합니다.In New ASP.NET Web Application - SignalRMvcChat, select MVC and then select Change Authentication.

  3. 변경 인증에서 인증 안 함 을 선택 하 고 확인을 클릭 합니다.In Change Authentication, select No Authentication and click OK.

    인증 안 함 선택

  4. New ASP.NET 웹 응용 프로그램-SignalRMvcChat에서 확인을 선택 합니다.In New ASP.NET Web Application - SignalRMvcChat, select OK.

  5. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭 하 고 추가 > 새 항목을 선택 합니다.In Solution Explorer, right-click the project and select Add > New Item.

  6. 새 항목 추가-SignalRChat에서 설치 > Visual C# > Web > SignalR 을 선택한 다음 SignalR Hub 클래스 (v2) 를 선택 합니다.In Add New Item - SignalRChat, select Installed > Visual C# > Web > SignalR and then select SignalR Hub Class (v2).

  7. 클래스 이름을 ChatHub 로 추가 하 고 프로젝트에 추가 합니다.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.

  8. 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 addNewMessageToPage method to update clients.
                Clients.All.addNewMessageToPage(name, message);
            }
        }
    }
    
  9. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭 하 고 > 클래스 추가 를 선택 합니다.In Solution Explorer, right-click the project and select Add > Class.

  10. 새 클래스의 이름을 시작 하 고 프로젝트에 추가 합니다.Name the new class Startup and add it to the project.

  11. Startup.cs 클래스 파일의 코드를 다음 코드로 바꿉니다.Replace the code in the Startup.cs class file with this code:

    using Owin;
    using Microsoft.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();
            }
        }
    }
    
  12. 솔루션 탐색기에서 컨트롤러 > HomeController.cs를 선택 합니다.In Solution Explorer, select Controllers > HomeController.cs.

  13. HomeController.cs에이 메서드를 추가 합니다.Add this method to the HomeController.cs.

    public ActionResult Chat()
    {
        return View();
    }
    

    이 메서드는 이후 단계에서 만든 채팅 보기를 반환 합니다.This method returns the Chat view that you create in a later step.

  14. 솔루션 탐색기에서 보기 > 을 마우스 오른쪽 단추로 클릭 하 고 > 보기 추가 를 선택 합니다.In Solution Explorer, right-click Views > Home, and select Add > View.

  15. 보기 추가에서 새 보기 채팅 의 이름을로 표시 하 고 추가를 선택 합니다.In Add View, name the new view Chat and select Add.

  16. 채팅 의 내용을 다음 코드로 바꿉니다.Replace the contents of Chat.cshtml with this code:

    @{
        ViewBag.Title = "Chat";
    }
    <h2>Chat</h2>
    <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>
    @section scripts {
        <!--Script references. -->
        <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
        <!--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>
        <!--SignalR script to update the chat page and send messages.--> 
        <script>
            $(function () {
                // Reference the auto-generated proxy for the hub.  
                var chat = $.connection.chatHub;
                // Create a function that the hub can call back to display messages.
                chat.client.addNewMessageToPage = function (name, message) {
                    // Add the message to the page. 
                    $('#discussion').append('<li><strong>' + htmlEncode(name) 
                        + '</strong>: ' + htmlEncode(message) + '</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();
                    });
                });
            });
            // This optional function html-encodes messages for display in the page.
            function htmlEncode(value) {
                var encodedValue = $('<div />').text(value).html();
                return encodedValue;
            }
        </script>
    }
    
  17. 솔루션 탐색기에서 스크립트를 확장 합니다.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.

  18. 코드 블록의 스크립트 참조가 프로젝트의 스크립트 파일 버전에 해당 하는지 확인 합니다.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. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. -->
    <script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
    
  19. 일치 하지 않는 경우에는 cshtml 파일을 업데이트 합니다.If they don't match, update the .cshtml file.

  20. 메뉴 모음에서 파일 > 모두 저장을 선택 합니다.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. 브라우저가 열리면 채팅 id의 이름을 입력 합니다.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, Anand 및 김소미로 메시지를 보내면 모든 브라우저가 실시간으로 업데이트 됩니다.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. 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 chat 응용 프로그램은 두 가지 기본 SignalR 개발 작업을 보여 줍니다.The SignalR chat 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. 허브는 SignalR jQuery 라이브러리를 사용 하 여 메시지를 보내고 받습니다.The hub uses the SignalR jQuery library to send and receive messages.

ChatHub.cs의 SignalR HubsSignalR Hubs in the ChatHub.cs

코드 샘플에서 ChatHub 클래스는 Microsoft.AspNet.SignalR.Hub 클래스에서 파생 됩니다.In the code sample, 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. 허브 클래스에서 공용 메서드를 만든 다음 웹 페이지의 스크립트에서 해당 메서드를 호출 하 여 액세스할 수 있습니다.You can create public methods on your hub class and then access 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.addNewMessageToPage를 호출 하 여 모든 클라이언트에 메시지를 보냅니다.The hub in turn sends the message to all clients by calling Clients.All.addNewMessageToPage.

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.

  • 클라이언트에서 함수 (예: addNewMessageToPage 함수)를 호출 하 여 클라이언트를 업데이트 합니다.Call a function on the client (like the addNewMessageToPage function) to update clients.

    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            Clients.All.addNewMessageToPage(name, message);
        }
    }
    

SignalR 및 jQuery 채팅. cshtmlSignalR and jQuery Chat.cshtml

코드 샘플의 SignalR jQuery 뷰 파일은 SignalR hub와 통신 하는 데 jQuery 라이브러리를 사용 하는 방법을 보여 줍니다.The Chat.cshtml view file 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 creates a reference to the autogenerated proxy for 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 is in camelCase. 코드 샘플에서는 JavaScript의 C# ChatHub 클래스를 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.addNewMessageToPage = function (name, message) {
    // Add the message to the page. 
    $('#discussion').append('<li><strong>' + htmlEncode(name) 
        + '</strong>: ' + htmlEncode(message) + '</li>');
};

서버의 허브 클래스는이 함수를 호출 하 여 각 클라이언트에 콘텐츠 업데이트를 푸시합니다.The hub class on the server calls this function to push content updates to each client. htmlEncode 함수에 대 한 선택적 호출에서는 메시지 내용을 페이지에 표시 하기 전에 HTML로 인코딩하는 방법을 보여 줍니다.The optional call to the htmlEncode function shows a way to HTML encode the message content before displaying it in the page. 스크립트 삽입을 방지 하는 방법입니다.It's a 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 you establish a connection before the event handler executes.

이 코드는 연결을 시작한 다음 채팅 페이지의 보내기 단추에서 클릭 이벤트를 처리 하는 함수를 전달 합니다.The code starts the connection and then passes it a function to handle the click event on the Send button in the Chat 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

ASP.NET SignalR 2를 사용 하 여 빈도가 높은 메시징 기능을 제공 하는 웹 응용 프로그램을 만드는 방법을 알아보려면 다음 문서로 이동 합니다.Advance to the next article to learn how to create a web application that uses ASP.NET SignalR 2 to provide high-frequency messaging functionality.