Microsoft MVP성태의 닷넷 이야기
닷넷: 2188. C# - ASP.NET Core SignalR로 구현하는 채팅 서비스 예제 [링크 복사], [링크+제목 복사],
조회: 13459
글쓴 사람
정성태 (techsharer at outlook.com)
홈페이지
첨부 파일

(시리즈 글이 4개 있습니다.)
닷넷: 2188. C# - ASP.NET Core SignalR로 구현하는 채팅 서비스 예제
; https://www.sysnet.pe.kr/2/0/13504

닷넷: 2189. C# - WebSocket 클라이언트를 닷넷으로 구현하는 예제 (System.Net.WebSockets)
; https://www.sysnet.pe.kr/2/0/13505

닷넷: 2197. C# - ClientWebSocket의 Ping, Pong 처리
; https://www.sysnet.pe.kr/2/0/13518

닷넷: 2198. C# - Reflection을 이용한 ClientWebSocket의 Ping 호출
; https://www.sysnet.pe.kr/2/0/13519




C# - ASP.NET Core SignalR로 구현하는 채팅 서비스 예제

SignalR은 WebSocket을 근간으로 하는 기술입니다. 추상화를 잘해 둔 탓에 그 사용법이 매우 쉬운 데요, 아래의 동영상과 공식 문서에,

6 분산형 실시간 메시징 서비스 개발하기 with 강창훈
; https://www.youtube.com/watch?v=ETQHZFGOGhw

Tutorial: Get started with ASP.NET Core SignalR
; https://learn.microsoft.com/en-us/aspnet/core/tutorials/signalr

채팅 서비스를 하는 예제 코드를 아주 상세하게 설명하고 있습니다. 저도 실습하면서 그대로 한번 정리해 보겠습니다.

우선 서버 측부터 구현을 할 텐데요, 이를 위해 "ASP.NET Coer Web App (Razor Pages)" 프로젝트를 만들고, SignalR Hub를 지원하기 위해 Program.cs의 WebApplication Build 과정에 다음의 코드를 추가합니다.

namespace WebApplication1;

public class Program
{
    public static void Main(string[] args)
    {
        var builder = WebApplication.CreateBuilder(args);

        // Add services to the container.
        builder.Services.AddRazorPages();
        builder.Services.AddSignalR();

        var app = builder.Build();

        // Configure the HTTP request pipeline.
        if (!app.Environment.IsDevelopment())
        {
            app.UseExceptionHandler("/Error");
        }
        app.UseStaticFiles();

        app.UseRouting();

        app.UseAuthorization();

        app.MapRazorPages();
        app.MapHub<ChatHub>("/chatHub");

        app.Run();
    }
}

이렇게 SignalR Hub 지원을 추가했으면 실질적인 채팅 서비스를 담당하는 클래스를 구동할 수 있습니다.

using Microsoft.AspNetCore.SignalR;

namespace WebApplication1;

public class ChatHub : Hub
{
    public async Task SendAllMessage(string user, string message)
    {
        await Clients.All.SendAsync("SendAllMessage", user, message);
    }

    public async Task JoinGroup(string group, string user)
    {
        await Groups.AddToGroupAsync(Context.ConnectionId, group);

        await Clients.Caller.SendAsync("JoinGroup", $"{group}에 접속");

        await Clients.OthersInGroup(group).SendAsync("JoinGroup", $"{user} has joined the group {group}.");
    }

    public async Task GroupSendMessage(string group, string user, string message)
    {
        await Clients.Group(group).SendAsync("GroupSendMessage", user, message);
    }
}


서버는 이게 끝입니다. 이후 클라이언트는 어떤 언어로 만들더라도 SignalR Hub 서비스를 사용할 수 있습니다.




그래도 ^^ 테스트는 해야죠. 여기서는 간단하게 ASP.NET Core 웹 앱의 razor 페이지에 JavaScript 클라이언트를 추가해 보겠습니다.

이를 위해, SignalR용 자바스크립트 패키지 참조를 추가하는데요, 솔루션 탐색기에서 프로젝트 노드를 우클릭 "Add" / "Client-Side Library" 메뉴를 선택 후 다음과 같이 "@microsoft/signalr@latest"을 추가합니다.

websocket_signalr_1.png

Provider: unpkg
Library: @microsoft/signalr@latest
Choose specific fiels:
    - signalr.js
    - signalr.min.js

Target Location: wwwroot/lib/microsoft/signalr/

그다음 index.cshtml에 이렇게 스크립트 및 HTML을 작성합니다.

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";

    string userId = DateTime.Now.GetHashCode().ToString()[1..4];
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core?WT.mc_id=DT-MVP-4038148">building Web apps with ASP.NET Core</a>.</p>

    <div class="container">
        <div class="row">&nbsp;</div>

        <div class="row">
            <div class="col-2"> User</div>
            <div class="col-4"><input type="text" id="txtInput" value="user_@userId" /></div>
        </div>

        <div class="row">
            <div class="col-2">Message</div>
            <div class="col-4"><input type="text" id="txtMessage" /></div>
        </div>

        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-6">
                <input type="button" id="btnSend" value="Send Message" />
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <hr />
        </div>
    </div>

    <div class="row">
        <div class="col-6">
            <ul id="lstMessage" />
        </div>
    </div>
</div>

<script src="~/lib/microsoft/signalr/dist/browser/signalr.js"></script>

<script>
    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
    const groupId = "Group1";

    document.getElementById("btnSend").disabled = true;

    connection.on("SendAllMessage", function (user, message) {
        var li = document.createElement("li");
        li.textContent = `[All] ${user} says ${message}`;
        document.getElementById("lstMessage").appendChild(li);
    });

    connection.on("JoinGroup", function (message) {
        var li = document.createElement("li");
        li.textContent = message;
        document.getElementById("lstMessage").appendChild(li);
    });

    connection.on("GroupSendMessage", function (user, message) {
        var li = document.createElement("li");
        li.textContent = `[${groupId}] ${user} says ${message}`;
        document.getElementById("lstMessage").appendChild(li);
    });

    connection.start().then(function () {
        document.getElementById("btnSend").disabled = false;
        
        var user = document.getElementById("txtInput").value;

        connection.invoke("JoinGroup", groupId, user).catch(function (err) {
            return console.error(err.toString());
        });

    }).catch(function (err) {
        return console.error(err.toString());
    });

    document.getElementById("btnSend").addEventListener("click", function (event) {
        var user = document.getElementById("txtInput").value;
        var message = document.getElementById("txtMessage").value;
        connection.invoke("SendAllMessage", user, message).catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    });
</script>

이제 브라우저를 2개 실행시키고 저 페이지를 방문하면, 서로 채팅이 되는 것을 확인할 수 있습니다. 여기서 키가 되는 것은 connection.on의 첫 번째 인자에 메시지를 식별할 ID에 해당하는 문자열을 SignalR 서버 측의 Hub 클래스에서 정의한 메서드 이름과 같게 주면 된다는 점입니다. 별거 없이 꽤나 간단한 코드라서 더 설명할 것이 없군요. ^^




너무 간단해서 이대로 끝내기가 아쉬우니, 살펴보는 김에 닷넷 클라이언트도 구현해 볼까요? 전체적인 구현은 JavaScript와 별반 다르지 않기 때문에 보시면 그냥 알 수 있습니다.

using Microsoft.AspNetCore.SignalR.Client;

namespace WebSocketClient;

internal class Program
{
    // Install-Package Microsoft.AspNetCore.SignalR.Clientd
    static async Task Main(string[] args)
    {
        string userId = "testusr";
        string groupId = "Group1";

        HubConnection connection = new HubConnectionBuilder()
           .WithUrl("http://localhost:5179/chatHub")
           .Build();

        connection.On("SendAllMessage", (string user, string message) =&gt;
        {
            Console.WriteLine($"[All] {user} says {message}");
        });

        connection.On("JoinGroup", (string message) =&gt;
        {
            Console.WriteLine(message);
        });

        connection.On("GroupSendMessage", (string user, string message) =&gt;
        {
            Console.WriteLine($"[{groupId}] {user} says {message}");
        });

        Console.WriteLine("Press any key to connect web socket server...");
        Console.ReadLine();

        await connection.StartAsync();

        await connection.InvokeAsync("JoinGroup", groupId, userId);

        await connection.InvokeAsync("SendAllMessage", userId, "Hello, All!");

        await connection.InvokeAsync("GroupSendMessage", groupId, userId, "Hello, Group!");

        Console.WriteLine("Press any key to exit...");
        Console.ReadLine();

        await connection.StopAsync();
    }
}

SignalR 클라이언트에 대한 마이크로소프트의 공식 지원은 위에서처럼 JavaScript, 닷넷과 함께 Java도 포함하고 있습니다. 또한, 당연히 기술 자체가 오프소스라서,

SignalR/SignalR
; https://github.com/SignalR/SignalR

다른 언어로도 포팅이 가능합니다. 가령 파이썬에서도 signalr-client 패키지를 이용해 작성할 수 있습니다.

(첨부 파일은 이 글의 예제 코드를 포함합니다.)




[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]







[최초 등록일: ]
[최종 수정일: 12/28/2023]

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
by SeongTae Jeong, mailto:techsharer at outlook.com

비밀번호

댓글 작성자
 




... 76  77  78  79  80  81  82  [83]  84  85  86  87  88  89  90  ...
NoWriterDateCnt.TitleFile(s)
11898정성태5/16/201922940VC++: 130. C++ string의 c_str과 data 함수의 차이점 [3]
11897정성태5/16/201929589오류 유형: 536. Visual Studio - "Developer Pack"을 설치했는데도 "대상 프레임워크" 목록에 나오지 않는 경우 [2]
11896정성태5/15/201925379개발 환경 구성: 440. C#, C++ - double의 Infinity, NaN 표현 방식파일 다운로드1
11895정성태5/12/201922794.NET Framework: 832. ML.NET Model Builder - 회귀(Regression), 다중 분류(Multi-class classification) 예제파일 다운로드1
11894정성태5/10/201924804VS.NET IDE: 135. Visual Studio - ML.NET Model Builder 소개 [5]
11893정성태5/10/201920719오류 유형: 535. C# 6.0 이상의 문법을 컴파일 시 오류가 발생한다면?
11892정성태5/10/201920652웹: 38. HTTP Cookie의 expires 시간 형식(RFC7231)
11891정성태5/9/201923824.NET Framework: 831. (번역글) .NET Internals Cookbook Part 12 - Memory structure, attributes, handles
11890정성태5/8/201919634개발 환경 구성: 439. "Visual Studio Enterprise is required to execute the test." 메시지와 관련된 코드 기록
11889정성태5/8/201919536개발 환경 구성: 438. mstest, QTAgent의 로그 파일 설정 방법
11888정성태5/8/201937595.NET Framework: 830. C# - 비동기 호출을 취소하는 CancellationToken의 간단한 예제 코드 [1]파일 다운로드1
11887정성태5/8/201923466.NET Framework: 829. C# - yield 문을 사용할 수 있는 메서드의 조건
11886정성태5/7/201920323오류 유형: 534. mstest.exe 실행 시 "Visual Studio Enterprise is required to execute the test." 오류 [2]
11885정성태5/7/201917873오류 유형: 533. mstest.exe 실행 시 "File extension specified '.loadtest' is not a valid test extension." 오류 발생
11884정성태5/5/201922864.NET Framework: 828. C# DLL에서 Win32 C/C++처럼 dllexport 함수를 제공하는 방법 - 두 번째 이야기
11883정성태5/3/201927811.NET Framework: 827. C# - 인터넷 시간 서버로부터 받은 시간을 윈도우에 적용하는 방법파일 다운로드1
11882정성태5/2/201924396.NET Framework: 826. (번역글) .NET Internals Cookbook Part 11 - Various C# riddles파일 다운로드1
11881정성태4/28/201924561오류 유형: 532. .NET Core 프로젝트로 마이그레이션 시 "CS0579 Duplicate 'System.Reflection.AssemblyCompanyAttribute' attribute" 오류 발생
11880정성태4/25/201920259오류 유형: 531. 이벤트 로그 오류 - Task Scheduling Error: m->NextScheduledSPRetry 1547, m->NextScheduledEvent 1547
11879정성태4/24/201929413.NET Framework: 825. (번역글) .NET Internals Cookbook Part 10 - Threads, Tasks, asynchronous code and others파일 다운로드2
11878정성태4/22/201924457.NET Framework: 824. (번역글) .NET Internals Cookbook Part 9 - Finalizers, queues, card tables and other GC stuff파일 다운로드1
11877정성태4/22/201924599.NET Framework: 823. (번역글) .NET Internals Cookbook Part 8 - C# gotchas파일 다운로드1
11876정성태4/21/201922666.NET Framework: 822. (번역글) .NET Internals Cookbook Part 7 - Word tearing, locking and others파일 다운로드1
11875정성태4/21/201924667오류 유형: 530. Visual Studo에서 .NET Core 프로젝트를 열 때 "One or more errors occurred." 오류 발생
11874정성태4/20/201924687.NET Framework: 821. (번역글) .NET Internals Cookbook Part 6 - Object internals파일 다운로드1
11873정성태4/19/201923363.NET Framework: 820. (번역글) .NET Internals Cookbook Part 5 - Methods, parameters, modifiers파일 다운로드1
... 76  77  78  79  80  81  82  [83]  84  85  86  87  88  89  90  ...