.png)
IT 개발자로서 실시간 통신 기능을 웹 애플리케이션에 통합하는 것은 사용자 경험을 대폭 향상시킬 수 있는 중요한 방법 중 하나입니다.
오늘은 Microsoft의 SignalR을 이용하여 실시간 웹 애플리케이션을 구축하는 방법을 소개하려 합니다.
SignalR은 웹소켓을 사용하여 실시간 통신을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다.
SignalR 소개
SignalR은 .NET 개발자들이 실시간 웹 기능을 손쉽게 구현할 수 있도록 지원하는 라이브러리입니다. 클라이언트와 서버 간의 양방향 통신을 가능하게 해 주며, 채팅 애플리케이션, 실시간 게임, 실시간 데이터 업데이트 등 다양한 실시간 애플리케이션을 개발할 때 유용하게 사용됩니다.
주요 기능
- 자동 연결 관리: SignalR은 연결, 재연결 및 연결 해제 과정을 자동으로 처리합니다.
- 규모 확장성: SignalR은 Redis, Azure SignalR Service 등을 통해 서버를 확장할 수 있는 기능을 지원합니다.
- 다양한 플랫폼 지원: JavaScript, .NET, Java 등 다양한 클라이언트에서 사용 가능합니다.
실시간 채팅 애플리케이션 구축하기
개발 환경 설정
- .NET Core SDK 설치: SignalR은 .NET Core에 포함되어 있으므로, .NET Core SDK가 설치되어 있어야 합니다.
- Visual Studio 또는 VS Code 설치: 개발 환경으로 Visual Studio 또는 VS Code를 사용할 수 있습니다.
프로젝트 생성
- Visual Studio에서 새 프로젝트 생성:
- 'ASP.NET Core Web Application' 선택
- 프로젝트 이름과 위치 설정
- 'ASP.NET Core Empty' 템플릿 선택
- SignalR 라이브러리 추가:
- NuGet 패키지 관리자를 통해 Microsoft.AspNetCore.SignalR을 설치합니다.
SignalR 허브 생성
SignalR 허브는 클라이언트와 서버 간의 통신을 중개하는 역할을 합니다.
using Microsoft.AspNetCore.SignalR;
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}클라이언트 설정
클라이언트에서는 HTML과 JavaScript를 사용하여 실시간으로 메시지를 보내고 받을 수 있도록 설정합니다.
<!DOCTYPE html>
<html>
<head>
<title>Real-Time Chat</title>
<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@latest"></script>
</head>
<body>
<div>
<input type="text" id="userInput" placeholder="Your name"/>
<input type="text" id="messageInput" placeholder="Write a message..."/>
<button onclick="sendMessage()">Send</button>
</div>
<ul id="messagesList"></ul>
<script>
const connection = new signalR.HubConnectionBuilder()
.withUrl("/chatHub")
.build();
connection.on("ReceiveMessage", function (user, message) {
const msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
const encodedMsg = user + " says " + msg;
const li = document.createElement("li");
li.textContent = encodedMsg;
document.getElementById("messagesList").appendChild(li);
});
connection.start().catch(function (err) {
return console.error(err.toString());
});
function sendMessage() {
const user = document.getElementById("userInput").value;
const message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
}
</script>
</body>
</html>서버와 클라이언트 연결
마지막으로, Startup.cs 파일에 SignalR 허브를 등록하여 서버와 클라이언트가 통신할 수 있도록 설정합니다.
public void ConfigureServices(IServiceCollection services)
{
services.AddSignalR();
}
public void Configure(IApplicationBuilder app)
{
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapHub<ChatHub>("/chatHub");
});
}이제 실시간 채팅 애플리케이션의 기본적인 구조를 구축하였습니다.
사용자는 웹 페이지에서 메시지를 입력하고, 이 메시지가 모든 사용자에게 실시간으로 전달되는 것을 확인할 수 있습니다. SignalR을 통해 실시간 통신의 복잡함 없이 원활하고 빠른 통신을 구현할 수 있습니다.
다음 포스트에서 더 다양한 SignalR 활용 방법을 알아보겠습니다.
댓글
댓글 쓰기