.net core 에서 signalR 을 어떻게 사용하는지에 대한 실습 자료 입니다.

2. 웹의 동작 방식
https://developer.mozilla.org/enUS/docs/Learn/Getting_started_with_the_web/How_the_Web_works

3. 웹 기술의 변화
정적인 텍스트 페이지 : 단순한 정보의 공유가 목적 “정보의 흐름이 단방향”
정보의 대상이 변화함에 따라서
정적에서 동적으로 변화
텍스트 => 이미지 => 미디어

4. UX 변화와 동적 페이지
jQuery 라이브러리의 $.ajax 를 이용하여 비동기 작업이 완료되기 이전과
이후로 나누어 브라우저에 작업을 처리할 수 있습니다.
$.ajax({
…
, success: function() {
}
, beforeSend: function() {
/* 이미지 보이기 */
}
, complete: function() {
/* 이미지 감추기 */
}
, error: function() {
}
…

5. What is SignalR?
• 실시간웹 기능을 구현하기 위한 Open-source Library
실시간이 요구되는 서비스에는 무엇이 있을까요?
- 서버로 부터 잦은 빈도수의 업데이트
SNS , 게이밍 , 경매 , 투표 , 지도 , GPS App , 대시보드
- 협업 서비스
팀미팅 소프트웨어 , 화이트보드 앱
- 알림 서비스
SNS , email , 채팅 , 게임 등
https://docs.microsoft.com/ko-kr/aspnet/core/signalr/introduction?view=aspnetcore-2.1

6. • 연결설정을 자동으로 관리
• 연결된 모든 클라이언트들에게 지속적인 메시지 전달 (예:채팅)
• 그룹 또는 특정 클라이언트 에게 메시지 전달
• 트래픽 증가에 따른 스케일 관리
Signal 주요 기능
https://docs.microsoft.com/en-us/aspnet/core/signalr/introduction?view=aspnetcore-2.1

7. 서버사이드의 Hub 가 Hub Proxy 를 통해
클라이언트 코드를 호출할 수 있습니다.
클라이언트 사이드 코드가 Hub Proxy 를 통해서
서버사이드의 Hub 를 호출할 수 있습니다.
https://docs.microsoft.com/ko-kr/aspnet/signalr/overview/getting-started/introduction-to-signalr

8. 오래된 클라이언트로 인하여 어플리케이션 코드를 분리 작성함 없이 웹소켓의 장점을 적용할 수 있습니다.
웹소켓의 버전 업데이트와 상관없이 계속적으로 통신이 될 수 있는 인터페이스를 제공합니다.
https://docs.microsoft.com/ko-kr/aspnet/signalr/overview/getting-started/introduction-to-signalr#signalr-and-websocket
Old Client
WebSocket V1
Old Client
WebSocket V2
Interface

9. 웹소켓 Server Sent Event Long pooling
SignalR 은 서버와 클라이언트의 성능에 따른 범위 안에서
가장 최선의 전송방식을 자동으로 선택합니다.
.NetCore - SignalR Transport Method
https://docs.microsoft.com/en-us/aspnet/core/signalr/introduction?view=aspnetcore-2.1#transports

10. WebSocket
웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술
입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지
않고도 이벤트 중심 응답을 받는것이 가능합니다.
SocketIO – NodeJS 를 위한 크로스플랫폼 API
(https://developer.mozilla.org/ko/docs/WebSockets/Writing_WebSocket_client_applications)

11. ServerSent Event
전통적으로 웹페이지는 새로운 데이터를 받기 위해 서버로 요청을 보내야만 합니다;
서버로 데이터를 요청하는 방식입니다. 하지만 Server-Sent Events 방식으로
웹페이지의 요청 없이도 언제든지 서버가 새로운 데이터를 보내는 것이 가능합니다.
이렇게 보내진 메시지는 웹페이지 안에서 Events + 데이터로 다룰 수 있습니다.
https://developer.mozilla.org/ko/docs/Web/API/Server-sent_events

12. Long pooling
Long-Polling 방식은 서버에 요청
을 보내고 서버 이벤트가 발생할
때까지 연결을 유지합니다.
이 상황에서 이벤트가 발생하면
응답을 받아서 처리하고
그 즉시 또 다른 이벤트를 받기 위해
연결을 맺는 방식입니다.
https://d2.naver.com/helloworld/10
52

13. .Net core SignalR 설치
필요한 패키지들을 설치합니다.
- Microsoft.AspNet.SignalR.JS
- Microsoft.AspNetCore.SignalR.Client.Core
- Microsoft.AspNetCore.SignalR.Core
클라이언트 허브를 설치하기 위해 아래의 과정을 추가로 거쳐야 합니다.
경우에 따라서 npm 을 업데이트 해야 할 수 있습니다.
npm install
npm init -y
npm install @aspnet/Signalr
node_modules@aspnetsignalrdistbrowser 경로에 Signalr.js 파일이 생기며
이를 프로젝트 경로에 복사합니다.

14. Server Hub 만들기
using Microsoft.AspNetCore.SignalR;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace SignalR
{
public class MyPushHub : Hub
{
}
}
위와 같이 Hub 추상클래스를 상속받아 구현하는 클래스를 추가합니다.

15. 서버 Hub 서비스 등록
public void ConfigureServices(IServiceCollection services)
{
services.Configure<CookiePolicyOptions>(options =>
{
options.CheckConsentNeeded = context => true;
options.MinimumSameSitePolicy = SameSiteMode.None;
});
services.AddSignalR();
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
services.AddSingleton(typeof(MyPushHub), typeof(MyPushHub));

16. Push Controller 만들기

17. StartUp - Hub 서비스 등록

18. Javascript Hub 만들기

19. Send message to all clients
public async Task SendMessage(string message)
{
await Clients.All.SendAsync("ReceiveMessage", message);
}
- MyPushHub.cs
const connection = new signalR.HubConnectionBuilder()
.withUrl("/push")
.configureLogging(signalR.LogLevel.Information)
.build();
connection.start()
.catch(err => console.error(err.toString()));
connection.on("ReceiveMessage", (message) => {
const li = document.createElement("li");
li.textContent = message;
document.getElementById("messagesList").appendChild(li);
console.log(message);
});

21. Send direct message
public Task SendDirectMessage(string user, string message)
{
var userInfoSender = _userInfoInMemory.GetUserInfo(Context.User.Identity.Name);
var userInfoReciever = _userInfoInMemory.GetUserInfo(user);
return Clients.Client(userInfoReciever.ConnectionId)
.SendAsync("ReceiveMessage", $"DM : {message}", userInfoSender);
}
- MyPushHub.cs
document.getElementById("sendDirect").addEventListener("click", function (event) {
var userName = document.getElementById("userName").value;
var message = document.getElementById("messageInput").value;
connection.invoke("SendDirectMessage", userName, message).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});

23. Send message to group
public Task SendMessageToGroup(string groupName, string message)
{
return Clients.Group(groupName).SendAsync("ReceiveMessage", message);
}
- MyPushHub.cs
document.getElementById("sendButton").addEventListener("click", function (event) {
var groupName = document.getElementById("groupName").value;
var groupMessage = document.getElementById("groupMessage").value;
connection.invoke("SendMessageToGroup", groupName, groupMessage).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});