자습서: SignalR 2를 사용한 실시간 채팅

아티클
07/13/2023

이 자습서에서는 SignalR을 사용하여 실시간 채팅 애플리케이션을 만드는 방법을 보여 줍니다. 빈 ASP.NET 웹 애플리케이션에 SignalR을 추가하고 메시지를 보내고 표시하는 HTML 페이지를 만듭니다.

이 자습서에서는 다음을 수행합니다.

프로젝트 설정
샘플 실행
코드 검사

경고

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

사전 요구 사항

ASP.NET 및 웹 개발 워크로드가 있는 Visual Studio 2017

Project 설정

이 섹션에서는 Visual Studio 2017 및 SignalR 2를 사용하여 빈 ASP.NET 웹 애플리케이션을 만들고, SignalR을 추가하고, 채팅 애플리케이션을 만드는 방법을 보여 줍니다.

Visual Studio에서 ASP.NET 웹 애플리케이션을 만듭니다.
새 ASP.NET 프로젝트 - SignalRChat 창에서 빈 항목을 선택한 상태로 두고 확인을 선택합니다.
솔루션 탐색기 프로젝트를 마우스 오른쪽 단추로 클릭하고새 항목추가>를 선택합니다.
새 항목 추가 - SignalRChat에서 설치된>Visual C#>Web>SignalR을 선택한 다음 SignalR Hub 클래스(v2)를 선택합니다.
클래스 이름을 ChatHub 로 지정하고 프로젝트에 추가합니다.

이 단계에서는 ChatHub.cs 클래스 파일을 만들고 SignalR을 지원하는 스크립트 파일 및 어셈블리 참조 집합을 프로젝트에 추가합니다.

새 ChatHub.cs 클래스 파일의 코드를 다음 코드로 바꿉니다.

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

솔루션 탐색기 프로젝트를 마우스 오른쪽 단추로 클릭하고새 항목추가>를 선택합니다.
새 항목 추가 - SignalRChat에서 설치된>Visual C#>Web을 선택한 다음, OWIN 시작 클래스를 선택합니다.
클래스 이름을 Startup 으로 지정하고 프로젝트에 추가합니다.

Startup 클래스의 기본 코드를 다음 코드로 바꿉다.

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

솔루션 탐색기 프로젝트를 마우스 오른쪽 단추로 클릭하고HTML 페이지추가>를 선택합니다.
새 페이지 인덱 스 이름을 지정하고 확인을 선택합니다.
솔루션 탐색기 만든 HTML 페이지를 마우스 오른쪽 단추로 클릭하고 시작 페이지로 설정을 선택합니다.

HTML 페이지의 기본 코드를 다음 코드로 바꿉다.

<!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>

솔루션 탐색기스크립트를 확장합니다.

jQuery 및 SignalR에 대한 스크립트 라이브러리는 프로젝트에 표시됩니다.

중요

패키지 관리자가 이후 버전의 SignalR 스크립트를 설치했을 수 있습니다.

코드 블록의 스크립트 참조가 프로젝트의 스크립트 파일 버전과 일치하는지 확인합니다.

원래 코드 블록의 스크립트 참조:

<!--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>

일치하지 않으면 .html 파일을 업데이트합니다.
메뉴 모음에서 파일>모두 저장을 선택합니다.

샘플 실행

도구 모음에서 스크립트 디버깅을 켜고 재생 단추를 선택하여 디버그 모드에서 샘플을 실행합니다.
브라우저가 열리면 채팅 ID의 이름을 입력합니다.
브라우저에서 URL을 복사하고 다른 두 브라우저를 열고 URL을 주소 표시줄에 붙여넣습니다.
각 브라우저에서 고유한 이름을 입력합니다.
이제 메모를 추가하고 보내기를 선택합니다. 다른 브라우저에서 반복합니다. 주석이 실시간으로 표시됩니다.

참고

이 간단한 채팅 애플리케이션은 서버에서 토론 컨텍스트를 유지 관리하지 않습니다. 허브는 모든 현재 사용자에게 주석을 브로드캐스트합니다. 나중에 채팅에 참가하는 사용자는 참가할 때부터 추가된 메시지를 볼 수 있습니다.

채팅 애플리케이션이 세 가지 브라우저에서 실행되는 방법을 확인합니다. Tom, Anand 및 Susan이 메시지를 보내면 모든 브라우저가 실시간으로 업데이트됩니다.
솔루션 탐색기 실행 중인 애플리케이션에 대한 스크립트 문서 노드를 검사합니다. SignalR 라이브러리가 런타임에 생성하는 허브 라는 스크립트 파일이 있습니다. 이 파일은 jQuery 스크립트와 서버 쪽 코드 간의 통신을 관리합니다.

코드 검사

SignalRChat 애플리케이션은 두 가지 기본 SignalR 개발 작업을 보여 줍니다. 허브를 만드는 방법을 보여 줍니다. 서버는 해당 허브를 기본 조정 개체로 사용합니다. 허브는 SignalR jQuery 라이브러리를 사용하여 메시지를 보내고 받습니다.

ChatHub.cs의 SignalR Hubs

위의 코드 샘플에서 클래스는 ChatHub 클래스에서 Microsoft.AspNet.SignalR.Hub 파생됩니다. 클래스에서 Hub 파생하는 것은 SignalR 애플리케이션을 빌드하는 유용한 방법입니다. 허브 클래스에서 공용 메서드를 만든 다음 웹 페이지의 스크립트에서 호출하여 해당 메서드를 사용할 수 있습니다.

채팅 코드에서 클라이언트는 메서드를 ChatHub.Send 호출하여 새 메시지를 보냅니다. 그런 다음 허브는 를 호출 Clients.All.broadcastMessage하여 모든 클라이언트에 메시지를 보냅니다.

메서드는 Send 다음과 같은 여러 허브 개념을 보여 줍니다.

클라이언트가 호출할 수 있도록 허브에서 공용 메서드를 선언합니다.
Microsoft.AspNet.SignalR.Hub.Clients 동적 속성을 사용하여 이 허브에 연결된 모든 클라이언트와 통신합니다.

클라이언트에서 함수(예: 함수)를 broadcastMessage 호출하여 클라이언트를 업데이트합니다.

public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        // Call the broadcastMessage method to update clients.
        Clients.All.broadcastMessage(name, message);
    }
}

index.html SignalR 및 jQuery

코드 샘플의 index.html 페이지에서는 SignalR jQuery 라이브러리를 사용하여 SignalR 허브와 통신하는 방법을 보여 줍니다. 코드는 많은 중요한 작업을 수행합니다. 허브를 참조하는 프록시를 선언하고, 서버가 클라이언트에 콘텐츠를 푸시하기 위해 호출할 수 있는 함수를 선언하고, 허브에 메시지를 보내기 위한 연결을 시작합니다.

var chat = $.connection.chatHub;

참고

JavaScript에서 서버 클래스 및 해당 멤버에 대한 참조는 camelCase여야 합니다. 코드 샘플은 JavaScript의 C# ChatHub 클래스를 로 chatHub참조합니다.

이 코드 블록에서는 스크립트에서 콜백 함수를 만듭니다.

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

서버의 허브 클래스는 이 함수를 호출하여 각 클라이언트에 콘텐츠 업데이트를 푸시합니다. 콘텐츠를 표시하기 전에 HTML로 인코딩하는 두 줄은 선택 사항이며 스크립트 삽입을 방지하는 좋은 방법을 보여줍니다.

이 코드는 허브와의 연결을 엽니다.

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

참고

이 방법을 사용하면 이벤트 처리기가 실행되기 전에 코드가 연결을 설정합니다.

코드는 연결을 시작한 다음 HTML 페이지의 보내기 단추에서 클릭 이벤트를 처리하는 함수를 전달합니다.

코드 가져오기

완료된 프로젝트 다운로드

추가 리소스

SignalR에 대한 자세한 내용은 다음 리소스를 참조하세요.

다음 단계

이 자습서에서 수행하는 작업은 다음과 같습니다.

프로젝트 설정
샘플 실행
코드 검사

다음 문서로 이동하여 SignalR 및 MVC 5를 사용하는 방법을 알아봅니다.

SignalR 2 및 MVC 5

자습서: SignalR 2를 사용한 실시간 채팅

사전 요구 사항

Project 설정

샘플 실행

코드 검사

ChatHub.cs의 SignalR Hubs

index.html SignalR 및 jQuery

코드 가져오기

추가 리소스

다음 단계

피드백

피드백

추가 리소스