자습서: SignalR 2를 사용 하 여 실시간 채팅Tutorial: Real-time chat with SignalR 2

이 자습서에서는 SignalR를 사용 하 여 실시간 채팅 응용 프로그램을 만드는 방법을 보여 줍니다.This tutorial shows you how to use SignalR to create a real-time chat application. 빈 ASP.NET 웹 응용 프로그램에 SignalR를 추가 하 고 메시지를 보내고 표시 하는 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 SignalRChat 창에서 선택 된 상태로 두고 확인 을 선택 합니다 .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. 새 항목 추가-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).

  5. 클래스 이름을 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.

  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. 새 항목 추가-SignalRChat Visual C# > > 설치 를 선택한 다음 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. 브라우저가 열리면 채팅 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

SignalRChat 응용 프로그램은 두 가지 기본 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. 허브는 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 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. 허브 클래스에서 공용 메서드를 만든 다음 웹 페이지의 스크립트에서 호출 하 여 해당 메서드를 사용할 수 있습니다.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의 인덱스. htmlSignalR and jQuery in the index.html

코드 샘플의 SignalR 페이지는 SignalR 허브와 통신 하는 데 jQuery 라이브러리를 사용 하는 방법을 보여 줍니다.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. 코드 샘플은 chatHub로 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.

이 코드는 연결을 시작한 다음 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.