ݺߣ

ݺߣShare a Scribd company logo

.net core 에서 SignalR 사용해보기

•Download as PPTX, PDF•
•
J
Ji Lee

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

1 of 24
Download to read offline
.net core 에서 SignalR 사용해보기
웹의 동작 방식 https://developer.mozilla.org/enUS/docs/Learn/Getting_started_with_the_web/How_the_Web_works
웹 기술의 변화 정적인 텍스트 페이지 : 단순한 정보의 공유가 목적 “정보의 흐름이 단방향” 정보의 대상이 변화함에 따라서 정적에서 동적으로 변화 텍스트 => 이미지 => 미디어
UX 변화와 동적 페이지 jQuery 라이브러리의 $.ajax 를 이용하여 비동기 작업이 완료되기 이전과 이후로 나누어 브라우저에 작업을 처리할 수 있습니다. $.ajax({ … , success: function() { } , beforeSend: function() { /* 이미지 보이기 */ } , complete: function() { /* 이미지 감추기 */ } , error: function() { } …
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
• 연결설정을 자동으로 관리 • 연결된 모든 클라이언트들에게 지속적인 메시지 전달 (예:채팅) • 그룹 또는 특정 클라이언트 에게 메시지 전달 • 트래픽 증가에 따른 스케일 관리 Signal 주요 기능 https://docs.microsoft.com/en-us/aspnet/core/signalr/introduction?view=aspnetcore-2.1
서버사이드의 Hub 가 Hub Proxy 를 통해 클라이언트 코드를 호출할 수 있습니다. 클라이언트 사이드 코드가 Hub Proxy 를 통해서 서버사이드의 Hub 를 호출할 수 있습니다. https://docs.microsoft.com/ko-kr/aspnet/signalr/overview/getting-started/introduction-to-signalr
오래된 클라이언트로 인하여 어플리케이션 코드를 분리 작성함 없이 웹소켓의 장점을 적용할 수 있습니다. 웹소켓의 버전 업데이트와 상관없이 계속적으로 통신이 될 수 있는 인터페이스를 제공합니다. 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
웹소켓 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
WebSocket 웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술 입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는것이 가능합니다. SocketIO – NodeJS 를 위한 크로스플랫폼 API (https://developer.mozilla.org/ko/docs/WebSockets/Writing_WebSocket_client_applications)
ServerSent Event 전통적으로 웹페이지는 새로운 데이터를 받기 위해 서버로 요청을 보내야만 합니다; 서버로 데이터를 요청하는 방식입니다. 하지만 Server-Sent Events 방식으로 웹페이지의 요청 없이도 언제든지 서버가 새로운 데이터를 보내는 것이 가능합니다. 이렇게 보내진 메시지는 웹페이지 안에서 Events + 데이터로 다룰 수 있습니다. https://developer.mozilla.org/ko/docs/Web/API/Server-sent_events
Long pooling Long-Polling 방식은 서버에 요청 을 보내고 서버 이벤트가 발생할 때까지 연결을 유지합니다. 이 상황에서 이벤트가 발생하면 응답을 받아서 처리하고 그 즉시 또 다른 이벤트를 받기 위해 연결을 맺는 방식입니다. https://d2.naver.com/helloworld/10 52
.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 파일이 생기며 이를 프로젝트 경로에 복사합니다.
Server Hub 만들기 using Microsoft.AspNetCore.SignalR; using System.Collections.Generic; using System.Threading.Tasks; namespace SignalR { public class MyPushHub : Hub { } } 위와 같이 Hub 추상클래스를 상속받아 구현하는 클래스를 추가합니다.
서버 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));
Push Controller 만들기
StartUp - Hub 서비스 등록
Javascript Hub 만들기
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); });
.net core 에서 SignalR 사용해보기
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(); });
.net core 에서 SignalR 사용해보기
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(); });
.net core 에서 SignalR 사용해보기

More Related Content

.net core 에서 SignalR 사용해보기

  • 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));
  • 17. StartUp - 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(); });