Microsoft MVP성태의 닷넷 이야기
닷넷: 2188. C# - ASP.NET Core SignalR로 구현하는 채팅 서비스 예제 [링크 복사], [링크+제목 복사],
조회: 2857
글쓴 사람
정성태 (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

비밀번호

댓글 작성자
 




1  2  3  [4]  5  6  7  8  9  10  11  12  13  14  15  ...
NoWriterDateCnt.TitleFile(s)
13556정성태2/17/20242144Windows: 257. Windows - Symbolic (hard/soft) Link 및 Junction 차이점
13555정성태2/15/20242405닷넷: 2216. C# - SemaphoreSlim 사용 시 주의점
13554정성태2/15/20242097VS.NET IDE: 189. Visual Studio - 닷넷 소스코드 디컴파일 찾기가 안 될 때
13553정성태2/14/20242151닷넷: 2215. windbg - thin/fat lock 없이 동작하는 Monitor.Wait + Pulse
13552정성태2/13/20242058닷넷: 2214. windbg - Monitor.Enter의 thin lock과 fat lock
13551정성태2/12/20242380닷넷: 2213. ASP.NET/Core 웹 응용 프로그램 - 2차 스레드의 예외로 인한 비정상 종료
13550정성태2/11/20242578Windows: 256. C# - Server socket이 닫히면 Accept 시켰던 자식 소켓이 닫힐까요?
13549정성태2/3/20242975개발 환경 구성: 706. C# - 컨테이너에서 실행하기 위한 (소켓) 콘솔 프로젝트 구성
13548정성태2/1/20242736개발 환경 구성: 705. "Docker Desktop for Windows" - ASP.NET Core 응용 프로그램의 소켓 주소 바인딩(IPv4/IPv6 loopback, Any)
13547정성태1/31/20242472개발 환경 구성: 704. Visual Studio - .NET 8 프로젝트부터 dockerfile에 추가된 "USER app" 설정
13546정성태1/30/20242298Windows: 255. (디버거의 영향 등으로) 대상 프로세스가 멈추면 Socket KeepAlive로 연결이 끊길까요?
13545정성태1/30/20242193닷넷: 2212. ASP.NET Core - 우선순위에 따른 HTTP/HTTPS 호스트:포트 바인딩 방법
13544정성태1/30/20242220오류 유형: 894. Microsoft.Data.SqlClient - Could not load file or assembly 'System.Security.Permissions, ...'
13543정성태1/30/20242266Windows: 254. Windows - 기본 사용 중인 5357 포트 비활성화는 방법
13542정성태1/30/20242260오류 유형: 893. Visual Studio - Web Application을 실행하지 못하는 IISExpress - 두 번째 이야기
13541정성태1/29/20242395VS.NET IDE: 188. launchSettings.json의 useSSL 옵션
13540정성태1/29/20242512Linux: 69. 리눅스 - "Docker Desktop for Windows" Container 환경에서 IPv6 Loopback Address 바인딩 오류
13539정성태1/26/20242485개발 환경 구성: 703. Visual Studio - launchSettings.json을 이용한 HTTP/HTTPS 포트 바인딩
13538정성태1/25/20242709닷넷: 2211. C# - NonGC(FOH) 영역에 .NET 개체를 생성파일 다운로드1
13537정성태1/24/20242769닷넷: 2210. C# - Native 메모리에 .NET 개체를 생성파일 다운로드1
13536정성태1/23/20242774닷넷: 2209. .NET 8 - NonGC Heap / FOH (Frozen Object Heap) [1]
13535정성태1/22/20242713닷넷: 2208. C# - GCHandle 구조체의 메모리 분석
13534정성태1/21/20242470닷넷: 2207. C# - SQL Server DB를 bacpac으로 Export/Import파일 다운로드1
13533정성태1/18/20242621닷넷: 2206. C# - TCP KeepAlive의 서버 측 구현파일 다운로드1
13532정성태1/17/20242580닷넷: 2205. C# - SuperSimpleTcp 사용 시 주의할 점파일 다운로드1
13531정성태1/16/20242610닷넷: 2204. C# - TCP KeepAlive에 새로 추가된 Retry 옵션파일 다운로드1
1  2  3  [4]  5  6  7  8  9  10  11  12  13  14  15  ...