[ASP.NET Core 3.1] SignalR을 이용한 실시간 채팅

SignalR?

 

• 응용프로그램에 실스간 웹 기능을 추가 하는 프로세스를 간소화하는 ASP.NET 개발자를 위한 라이브러리
• 실시간 웹 기능은 서버가 클라이언트의 요청을 기다리는 것이 아닌 콘텐츠에 즉시 푸시하는 기능

공식 소개 문서 : docs.microsoft.com/ko-kr/aspnet/signalr/overview/getting-started/introduction-to-signalr

 

 

 

---

실습

공식 자습서 : docs.microsoft.com/ko-kr/aspnet/core/tutorials/signalr?view=aspnetcore-3.1&tabs=visual-studio

 

 

1. 프로젝트 만들기

 

 ASP.NET Core 웹 어플리케이션 ->  ASP.NET Core 3.1 -> 웹 어플리케이션

 

 

 

2. SignalR 라이브러리 추가

 

솔루션 우클릭 -> 추가 -> 클라이언트 쪽 라이브러리 클릭

 

unpkg -> @microsoft/signalr@latest 입력 -> 라이브러리 선택 후 설치

 

 

 

 

 

 

 

3.  SignalR 허브 만들기

 

 

Hubs 폴더 생성 -> ChatHub Class 생성 -> 코드 작성

using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

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

 

 

 

4.  SignalR 구성

Startup.cs 파일에 서비스 추가

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using SimpleChat.Hubs;
namespace SimpleChat
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddSignalR();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
                endpoints.MapHub<ChatHub>("/chathub");
            });
        }
    }
}

 

 

 

 

5.  SignalR 클라이언트 코드 추가

 

Pages -> index.cshtml에 해당 코드 작성

 

@page
    <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="userInput" /></div>
        </div>
        <div class="row">
            <div class="col-2">Message</div>
            <div class="col-4"><input type="text" id="messageInput" /></div>
        </div>
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-6">
                <input type="button" id="sendButton" 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="messagesList"></ul>
        </div>
    </div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

 

 

 

6. chat.js 작성

 

wwwroot/js 경로에 chat.js 파일 생성

 

"use strict";

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

//Disable send button until connection is established
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    var encodedMsg = user + " says " + msg;
    var li = document.createElement("li");
    li.textContent = encodedMsg;
    document.getElementById("messagesList").appendChild(li);
});

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

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

 

 

 

 

7. 확인