CAFE

ASP.NET WEBFORM

ASP.NET SignalR 알아보기

작성자심재운|작성시간13.03.25|조회수977 목록 댓글 14



원문 : http://www.codeguru.com/csharp/.net/sending-notifications-using-asp.net-signalr.htm


웹어플리케이션에서 실시간 통신을 하기 위해서는 웹소켓 그리고 서버에서 보내는 이벤트들과 같은 html 5를 사용할 수 있습니다. 반면에 이러한 기술들은 요즘 웹어플리케이션에서 사용될 수 있습니다. 하지만 html 5 가 모든 브라우저에서 사용할 수 없습니다. 덧붙어서 이는 복잡한 시나리오로 다소의 어렵게 구현해야 합니다. asp.net SignalR 은 라이브러리이며, 이는 웹어플리케이션에서 쉽게 실시간 통신이 가능하도록 할 수 있습니다. 이번 내용은 SignalR 를 기반으로 asp.net 웹폼 어플리케이션을 배우도록 하겠습니다.



ASP.NET SignalR 은 실시간 통신을 구현하기 위한 하나의 라이브러리 입니다. 데이터가 서버에서 생성 또는 일부 이벤트가 서버에서 발생되는 즉시, 같은 응용 프로그램에서 클라이언트는 최신 데이터로 업데이트를 합니다. 

기존방식의 구현은 ajax 기술을 토대로 주기적으로 서버에 호출하여 가져와서 보여줍니다. 하지만, 이런 접근 방법은 문제가 있습니다. 다른 방법은 실시간 통신을 위해, HTML5 Web Sockets or Server Sent Events (SSE) 을  사용하는 방법입니다. 그러나 이러한 기술은 html 5 를 지원하는 브라우저에서나 가능합니다. 대상 브라우저가 지원하는 경우 SignalR는 HTML5의 Websockets를 사용, 그렇지 않으면 다른 기술로 구현해야겠지요. 최상의 방법은 상세히 내부 구현을 알 필요없이 개발자분이 구현하는게 좋겠지요. 덧붙여서 SignalR 은 연결 관리, 그룹, 권한부여을 쉽게 생성해 줍니다. 이는 통신 기술의 내부에 대해 너무 많이 걱정없이 웹 응용 프로그램에서 SignalR에 의해 높은 수준의 API로 작업 할 수 있습니다.



SignalR 은 다양한 용도로 아래와 같이 사용이 가능합니다.


1. 두 명이상의 사용자가 실시간으로 채팅이 가능한 채팅프로그램을 구현할 수 있다.

2. 특정 클라이언트 또는 모두에서 알람을 알려줄 수 있다.

3. 실시간 게임 어플리케이션

4. 소션 네트워크 웹사이트

5. 관리자 또는 맴버들이 또 다른 관리자 및 맴버들과 통신 할 수 있는 의견 게시판들을 구현가능하다.




아래 화면은 asp.net SignalR 을 실행 할 경우 화면 내용입니다.


Develop a web form application



이를 구현하기 위해, 아래의 사이트에서 설치 하길 바랍니다.


http://www.asp.net/vnext/overview/latest/aspnet-and-web-tools-20122-release-notes-rtw#_Installation



설치 후 , vs 에 템플릿을 제공해 줍니다.


Add New Item



SignalR Hub Class 를 선택하여 아래와 같이 구현합니다.

여기서 Microsoft.AspNet.SignalR 의 namespace 를 사용합니다. 이러한 메소드는 클라이언트 측 스크립트에서 호출 할 수 있습니다. SignalR hub는 응용 프로그램에 대한 높은 수준의 RPC 프레임 워크를 제공합니다. 또한 스크립트 폴더 아래 특정 스크립트 파일을 찾을 수 있습니다.


  1. namespace SignalRDemo
  2. {
  3. public class MyHub1 : Hub
  4. { public void Hello()
  5. {
  6. Clients.All.hello();
  7. }
  8. }
  9. }




Additional scripts

아래 코드를 hub class 에 추가합니다.

  1. public void SendNotifications(string message)
  2. {
  3. Clients.All.receiveNotification(message);
  4. }


 Global.asax 에 아래와 같은 코드를 입력합니다.

  1. protected void Application_Start(object sender, EventArgs e)
  2. {
  3. RouteTable.Routes.MapHubs();
  4. }


이제 웹페이지를 하나 만들어서 자바스크립트를 구현합니다. 아래 코드는 입력한 값을 전송하는 방법입니다.
전송하기 위해 proxy.server.sendNotifications 메소드를 사용합니다.
이는 관리자 페이지 하나를 만들어 특별히 통보하는용도로 구현된 것입니다. 전송하면 이를 통보받은 페이지를 만들어보죠.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Admin Form Sending Notifications</title>
  5. <script src="/Scripts/jquery-1.8.2.min.js" ></script>
  6. <script src="/Scripts/jquery.signalR-1.0.0.js"></script>
  7. <script src="/signalr/hubs"></script>
  8.   <script type="text/xxjavascript">
  9. $(function () {
  10. var proxy = $.connection.notificationHub;
  12. $("#button1").click(function () {
  13. proxy.server.sendNotifications($("#text1").val());
  14. });
  16. $.connection.hub.start();
  17. });
  18. </script>
  19.  
  20. </head>
  21. <body>
  22. <input id="text1" type="text" /><input id="button1" type="button" value="Send" />
  23. </body>
  24. </html>

아래는 관리자 분이 전송한 데이터를 실시간 통신으로 받는 페이지 입니다. 
이를 받기 위해 proxy.client.receiveNotification 함수를 사용합니다.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Client Form Receiving Notifications</title>
  5. <script src="/Scripts/jquery-1.8.2.min.js" ></script>
  6. <script src="/Scripts/jquery.signalR-1.0.0.js"></script>
  7. <script src="/signalr/hubs"></script>
  8. <script type="text/xxjavascript">
  9. $(function () {
  10. var proxy = $.connection.notificationHub;
  12. proxy.client.receiveNotification = function (message) {
  13. $("#container").html(message);
  14. $("#container").slideDown(2000);
  15. setTimeout('$("#container").slideUp(2000);', 5000);
  16. };
  18. $.connection.hub.start();
  19. });
  20. </script>
  21. </head>
  22. <body>
  23. <div class="notificationBalloon" id="container">
  24. </div>
  25. </body>
  26. </html>



관리자 페이지를 열고 글자를 기재 후 작성버튼을 선택하면, 다수의 사용자 페이지들에 해당 글이 전송되어 리스트에 보여줍니다.

Develop a web form application


감사합니다.


다음검색
현재 게시글 추가 기능 열기

댓글

댓글 리스트
  • 답댓글 작성자심재운 작성자 본인 여부 작성자 | 작성시간 13.09.12 자주 오세욤 ㅎㅎ
  • 작성자Rafale | 작성시간 13.09.12 실시간 채팅 때문에 node.js를 보긴 봤는데, ASP.NET MVC로 구현하면 더 깔끔할듯 합니다.
    좋은 정보 감사드립니다.
  • 답댓글 작성자심재운 작성자 본인 여부 작성자 | 작성시간 13.09.12 조언 감사합니당 :)
  • 작성자Charles | 작성시간 13.09.26 좋은 정보 감사합니다~~~~~~~~~~~!!!
  • 답댓글 작성자심재운 작성자 본인 여부 작성자 | 작성시간 13.09.26 네 ㅎ
댓글 전체보기
맨위로

카페 검색

카페 검색어 입력폼