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"> </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"> </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, "&").replace(/</g, "<").replace(/>/g, ">");
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. 확인
'C# > ASP.net Core MVC' 카테고리의 다른 글
C# - 람다식을 통해 3차원 배열 특정 값 삭제 (0) | 2022.02.17 |
---|---|
C# Asp.net core 회원가입 기능 구현 (0) | 2020.01.11 |
2. C# DbSeed (0) | 2020.01.11 |
C# Asp.net Core 마이그레이션 (0) | 2020.01.08 |
ASP.NET Core MVC란? (0) | 2019.12.06 |