[.NET] SingalR로 양방향 소켓 서버 만들기

.NET으로 실시간 양방향 상호작용이 가능한 signalR 라이브러리를 사용하여 간단한 RTC 채팅기능을 구현해보려고 한다.

새 프로젝트 만들기

dotnet new webapp -o SignalRChat
code -r SignalRChat

The dotnet new command creates a new Razor Pages project in the SignalRChat folder.

SignalR client library 추가

The SignalR server library is included in the ASP.NET Core shared framework. The JavaScript client library isn't automatically included in the project. For this tutorial, use Library Manager (LibMan) to get the client library from unpkg. unpkg is a fast, global content delivery network for everything on npm.

 

LibMan 설치

 

dotnet tool install -g Microsoft.Web.LibraryManager.Cli

 

SignalR 라이브러리 설치

 

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --files dist/browser/signalr.js

 

하려고 했는데 command not found: libman 에러 뜸

 

확인해보니 libman 설치 된 다음 환경변수 설정하라는 말이 있었음

 

 

환경변수 설정 후 다시 libman try

 

 

이번에는 runtime이 없다고 한다…

알려준 링크 따라가서 닷넷 런타임 다운로드

 

**런타임 자체가 없다고 한게 아니라 libman은 x64만 지원하는 듯 함. 그래서 x64버전 런타임이 없다고 에러가 뜬거고 → x64 런타임 다운 → x64버전 SDK는 없네? 당연한거였는데 어마어마하게 해매었다… 애초에 libman이 js로 되어있는 npm 패키지들을 가지고 오려고 사용하는 npm이나 yarn 같은 툴이라 그런건지 intel 쪽인 x 버전만 지원하는 듯 하다. (솔직히 무슨 상관인지 잘 모르겠고 그냥 지원하는 버전이 없는 듯)

 

그 다음 libman으로 install 하니 잘 작동되었다.

 

The parameters specify the following options:

• Use the unpkg provider.
• Copy files to the wwwroot/js/signalr destination.
• Copy only the specified files.

SignalR Hub 만들기

허브는 클라이언트와 서버 커뮤니케이션을 도와주는 하이 레벨 파이프라인 클래스이다.

 

 

루트에 Hubs 폴더 만들고 안에 ChatHub 클래스 생성.

 

using Microsoft.AspNetCore.SignalR;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

 

이 ChatHub 클래스는 SingalR Hub 클래스에서 상속 됨. Hub 클래스는 커넥션, 그룹, 메세징 등을 관리함.

Send Message 메서드는 클라이언트에서 모두에게 메세지를 보낼때 사용 됨.

SignalR 구성

SignalR서버는 signalR끼리 리퀘스트를 주고받아야 한다.

 

using SignalRChat.Hubs;

~~~~~~~~~~~~~~~~~~~

builder.Services.AddSignalR();

~~~~~~~~~~~~~~~~~~~~

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

 

Program.cs 파일에 위 세줄을 추가해서 SignalR을 닷넷 코어 종속성과 라우팅에 추가한다.

Client에 SignalR 추가

"use strict";

let connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

//커넥션 연결 되기 전까지 버튼 disable
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", (user, message)=>{
    let li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    
    li.textContent = `${user} says ${message}`;
});

connection.start().then(()=>{
    document.getElementById("sendButton").disabled = false;
}).catch((err)=>{
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", (event)=>{
    let user = document.getElementById("userInput").value;
    let message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch((err)=>{
        return console.error(err.toString());
    });
    event.preventDefault();
});

 

dotnet 못 찾을 때 경로 세팅 명령어

 

sudo ln -s /usr/local/share/dotnet/x64/dotnet /usr/local/bin/

 

근데 이러고도 계속 dotnet을 못 찾았다.

왜 이러나 싶어서 여러 버전도 다운 받아보고 계속 dotnet —info로 체크를 했는데

 

 

No SDKs were found라며 sdk를 못 찾는 듯 했다. 그리고 버전도 초기 세팅당시 6으로 설치해놨던게 어느새 7이 되어있다…

분명 초기 세팅했을때는 다 떴는데..? 하면서 여러번 시도를 하다 dotnet을 아예 싹다 밀고 다시 설치했다.

다시 처음부터 해보면서 알게 된 건데

libman은 x64에서만 지원을 하는 것 같다. (위 libman 에러 해결 쪽에 써놓음)

 

실행해보자

dotnet watch run --project SignalRChat.csproj

 

 

이상 SignalR로 만들어본 양방향 소켓 통신이었음

 

.NET은 처음이라 헤메인 부분이 굉장히 많았다.

거의 하루종일 에러잡는데 쓴듯..ㅋㅋㅋ