MixedCode

  1. Home
  2. HTML5 Websocket
  3. ASP.NET SignalR 소개 및 개발환경 구축하기

ASP.NET SignalR 소개 및 개발환경 구축하기

by EDDY.KANG(믹스드코드) on In HTML5 Websocket

안녕하세요. 에디입니다.

오늘은 웹 채팅의 서버측 기술로 사용할 ASP.NET SignalR에 대해 알아보고 개발환경을 구축해보도록 하겠습니다.


1.ASP.NET SignalR 소개

ASP.NET SignalR은 Microsoft .NET 기반 환경에서의 실시간 웹 통신을 가능하게 해주는 GitHub 오픈소스 라이브러리입니다.
ASP.NET SignalR은  Microsoft .NET 개발 플랫폼에서의 Web 개발 프레임워크인 ASP.NET에 신규로 추가된 RealTime Web 통신을 위한 웹 Push 기술을 핵심으로 제공하는 오픈소스 라이브러리라 말씀드릴수 있습니다.

참고)
https://github.com/SignalR/SignalR
http://signalr.net/
http://www.asp.net/signalr

SignalR의 핵심기술로는  클라이언트와 서버와의 연결상태를 지속하는 기술과 데이터를 전송하는 기술에 있습니다.
SignalR은 http방식으로 클라이언트가 서버에 연결요청을 보내면 TCP 프로토콜을 이용 연결을 영구적으로 유지한 상태에서 서버에서 클라이언트로 응답메시지를 발신하거나 클라이언트로 부터의 요청을 수신합니다.

웹페이지가 변경되지 않는한 연결상태는 지속되며 연결기반에서  데이터를 전송하기위해 아래 4가지 전송방식을 통해 클라이언트에서 서버로 서버에서 클라이언트로 데이터가 전송됩니다.

SignalR은 데이터 전송방식으로 최신 브라우저에서 모두 지원하는 HTML5 WebSocket 전송방식을 기본적으로 지원하며 WebSocket방식을 지원하지 않은 Old Version 브라우저 사용자들을 위한 대비책으로
Old Version 브라우저별로 선택적으로 지원하는 다양한 전송방식들 또한 완벽히 지원합니다.

웹브라우저와 웹서버간의 통신에 사용되는 데이터 전송방식은 아래와 같으며 ASP.NET SignalR은 서버상에서 아래 전송방식들을 모두 지원합니다.

ㅁPush 전송기술들
-HTML5 WebSocket : HTML5에서 지원하는 전송기술이며 HTML5을 지원하는 대부분의 클라이언트의 최신버전 브라우저(IE10,Chrome,Firefox최신버전은 완벽히 지원되며 Opera,Safari등은 선택적으로 지원됨)들은 지원하며 장점으로는 클라이언트에서 서버로 서버에서 클라이언트로 양방향 전송(twoway)이 가능하며 전송속도 또한  다른 전송기술보다 가장 빠릅니다.

단점으로는 HTML5를 지원하는 최신브라우저에서만 지원하며 서버또한 최신브라우저에서 사용되는 HTML5 WebSokect 기술을 지원하기 위한 서버측 환경이 제공되어야합니다.
대표적인 서버측 환경으로는 Node.js 또는  Windows Server O/S의 경우 Windows 2012(IIS8 Webserver) Over & .Net Framework4.5 이상이 설치되어 있는 환경이어야합니다.
물론 개발시에는 Windows7이상 Visual Studio 2012 개발툴 이상 환경이면 개발은 모두 가능합니다.

-ServerSentEvents : 클라이언트와 서버간 1회선으로 연결되며 재연결의 필요성이 없지만 서버에서 클라이언트로의 단방향 전송만 지원하며 IE는 지원하지 않습니다.(다른 브라우저는 대부분 지원)


ㅁComet 기반 전송기술
-Forever Frame : IE에서만 지원하며 iframe이 반복적으로 불필요한 데이터와 함께 로드되는 방식으로 서버에서 클라이언트 메시지를 전송합니다.

-Ajax long Polling: Long Polling방식은 연결이 지속되지 않으며 지속적으로 클라이언트의 연결가능상태를 확인하여(Polling) 단일 연결 작업 처리후 연결이 끊기고 다시 폴링을 통해 클라이언트에 연결하는 기술입니다.
Ajax를 지원하는 모든 브라우저에서 지원합니다.

채팅 서비스를 이용하는 다양한 클라이언트 브라우저들이 HTML5 WebSocket 전송방식을 지원하지 않더라도 ASP.NET SignalR은 해당 브라우저에서 지원하는 상기 다른 전송방식을 자동으로 파악하여
클라이언트와의 연결과 전송이 정상적으로 처리되게 합니다.

서버에서의 SignalR전송기술 우선적용 순서는 WebSockets -> ServerSentEvents -> ForeEver Frame -> Long Polling 순으로  클라이언트 브라우저 들의 지원가능 전송기술을 서버에서 자동 파악 클라이언트와의 데이터 전송을 위한  서버 측 전송방식을 결정하여 동일한 전송방식을 통해 통신을 처리합니다.

SignalR은 웹브라우저와 웹서버간의 Connection관리를 자동으로 처리해주며 연결된 Connection은 브라우저를 닫거나 브라우저 탭을 닫거나 페이지를 이동 하지않은 이상 해당 Connection은 끊어지지않고  지속됩니다.
SignalR은 Server Push기능을 제공하여 서버에서 브라우저 페이지의 클라이언트 코드(자바스크립트함수)를 원격프로시저호출(RPC)을 이용하여  호출합니다.


TIP) .NET Platform 과  .NET Platform 의 서비스 이중화 전략 & ASP.NET에 대해서는 작년에 일반인분들을 대상으로 진행했던 나도개발자 시리즈1 [유무선 통합 반응형 웹사이트 개발 및 서비스 하기] 코드랩
강좌 및 아래 해당 믹스드코드 글을 참고해주시기 바랍니다.

ㅁ나도개발자 시리즈1 {유무선통합 반응형 웹사이트 개발&서비스하기}
- 2017년 04월중 관련서적 출간예정
http://mixedcode.com/Category/Index?cidx=35

ㅁNET Platform and ASP.NET & ASP.NET MVC5 기술소개
http://mixedcode.com/Article/Index?aidx=1065


3.2 ASP.NET SignalR 동작방식

대부분의 통신방식이 그렇듯이 ASP.NET SignalR 또한 메시지를 주고 받는 기본방식은 Client/Server구조를 채택 하고 있습니다.
Client는 사용자 컴퓨터 이고 Server는 메시지 서비스를 제공하는 서버컴퓨터이겠죠?

아래 표는 SignalR 통신환경을 Client/Server구조로 표현해 본것입니다.
 1.ASP.NET SignalR 소개 ASP.NET SignalR은 Microsoft .NET 기반 환경에서의 실시간 웹 통신을 가능하게 해주는 GitHub 오픈소스 라이브러리입니다. ASP.NET SignalR은 Microsoft .NET 개발 플랫폼에서의 Web 개발 프레임워크인 ASP.NET에 신규로 추가된 RealTime Web 통신을 위한 웹 Push 기술을 핵심으로 제공하는 오픈소스 라이브러리라 말씀드릴수 있습니다. 참고)

ASP.NET SignalR의 내부 구조의 핵심은 서버상의 HubAPI 클래스 와 해당 서버Hub 클래스와 매칭되는 클라이언트 브라우저에서 작동되는HubProxy javascript 클래스입니다.
일반적인 ASP.NET SignalR 프로그래밍은 서버측에 클라이언트와의 통신을 위한 HubClass 를 정의하고 하위에 메시징을 위한 각종 메소드를 정의합니다. 이렇게 정의된 서버측 코드를 이용해
런타임 환경에서 서버측 코드와 1:1로 매칭되는 프록시 자바스크립트 파일을 자동생성하여 해당 프록시 스크립트 파일을 이용해 서버측 HUB 클래스 손쉽게 통신을 할수 있는 환경을 제공합니다.

ㅁASP.NET SignalR Hub 호출 통신 유형 2가지

1) HUB Proxy Javascript File을 이용하는 경우
-동일 ASP.NET 웹 응용프로그램내의 웹페이지에서 Hub Class를 호출하는 경우
즉,동일 웹 응용프로그램내에 서버HubAPI와 호출 웹 페이지가 함께 존재하는경우 설정에 의해 자동으로 Hub Proxy Class를 생성(with the generated proxy) 자바스크립트파일을 만듭니다.
이 방식은 해당 자동 생성된 자바스크립트 파일경로를 해당 호출 웹 페이지 내에 참조만 해주면 요청 웹 페이지가 브라우저에 렌더링 될때 HubProxy Javascript 파일이 함께 렌더링 제공되고 HUB API와
매칭되는 메소드등이 프록시 자바스크립트 파일에 존재하기 때문에  간결하고 명확한 프로그래밍 환경을 제공합니다. 


2) jquery.signalR-2.2.1.min.js JQuery Library를 이용하는 경우
- 동일 ASP.NET 웹응용 프로그램안에 존재하지 않은 웹페이지가 Hub Class를 호출하는 경우
즉, 호출하는 웹 페이지가  HUB API를 제공해주는 웹 응용프로그램상에 함께 존재하지 않거나(CrossDomain 환경),
웹서버상에 html페이지 형태로 존재하지 않고 클라이언트에 단독으로 포팅 되어 사용되거나(기존 초간단 채팅 페이지 예시처럼)(하이브리드앱 환경)
다른 웹 응용프로그램(JSP,PHP,ASP.NET,ASP,HTML,SmartPhone embeded html...) 페이지에서 호출되는경우
-해당웹페이지에 Jquery library를 참조하고 jquery.signalR.ver.js파일을 참조하여 호출 페이지내에서 직접 웹개발자가 HubProxyClass(without the generated proxy)를 생성
서버측 Hub API를 연결하고 메소드를 명시적으로 호출합니다. 
 
참고URL)
http://www.asp.net/signalr/overview/signalr-1x/getting-started/introduction-to-signalr


3.3 ASP.NET SignalR지원 Platform

ASP.NET SignalR 라이브러리는 대부분의 윈도우 O/S제품군에 설치되어 서비스 되어질수 있습니다.
하지만 SignalR에서 지원하는 전송기술중 하나인 WebSocket방식은 Windows8 ,Windows2012 O/S에서만 지원됩니다.

ㅁASP.NET SignalR 지원 O/S
 Windows Server 2012 OR  2012 R2 이상 : Websokcet 전송기술지원
 Windows8 : Websokcet 전송기술지원
    Windows7 : Websocket 지원안함.

ㅁASP.NET SignalR 지원 개발 프레임워크
WebSocket 전송기술 지원을 위해서는 반드시 .Net Framework 4.5 이상을 사용해야합니다.
- .Net Framework 4.5  이상

ㅁASP.NET SignalR 지원 IIS버전
IIS는반드시 응용프로그램 풀의 pipeline모드가 통합모드로 작동되어야하며  클래식 모드는 SignalR환경을 제대로 지원되지 않습니다.
( 클래식 모드 사용시 Server Sent Event 전송방식을 이용 통신시 최대 30초정도의 딜레이 타임이 발생합니다.)
-IIS SignalR웹사이트의 .NET 신뢰수준을 Full Trust Mode로 설정되어야합니다.
-IIS8 , IIS8 Express

ㅁSignalR 지원 브라우저
• Microsoft Internet Explorer versions 8, 9 and 10이상. Modern, Desktop, and Mobile versions are supported.
• Mozilla Firefox: 최신버전 - 1, both Windows and Mac versions.
• Google Chrome: 최신버전 - 1, both Windows and Mac versions.
• Safari: 최신버전- 1, both Mac(PC용) and iOS(모바일용) versions.
• Opera: 최신버전 - 1, Windows only.
• Android browser(모바일용)


저자주)
*ASP.NET SignalR은 서버에서 클라이언트로  실시간 통신할수 있는 다양한 전송기술을 제공하지만 그중 가장 빠른속도를 제공하는 WebSocket방식을  사용하여 고가용성 있는 실시간 웹  응용프로그램을 개발하시려면 
개발환경으로는 OS: Windows8,개발툴:VisualStudio 2012이상,.NET Frramework 4.5, IIS8 OR IIS8 Exress
서비스 환경으로 서버는 Windows Server 2012이상 개발프레임워크는 .NET Framework 4.5이상 IIS웹서버는 II8 이상 환경을 권장드립니다.

참고URL)
http://www.asp.net/signalr/overview/signalr-1x/getting-started/supported-platforms

3.4 ASP.NET SignalR 개발환경 구축

ㅁ운영체제
-Windows 8이상 10 권장(Windows7도 개발은 가능합니다.)
-윈도우8버전 비교참고
Tip: Windows8에는 IIS8이 포함되어 있으며 IIS8 웹 서버 버전에서만 WebSocket전송방식을 지원합니다.
Tip: Windows8에서 IIS8 설치하기
Tip: Windows8 버전별 기능비교표
Tip: Windows8 Edition별 IIS8 동시접속자 정보
http://techit.kr/9226
http://dexcore.tistory.com/651

ㅁ개발툴
- Visual Studio 2017 Community Edition(무료) for Windows 권장
- 다운로드 및 설치가이드
반드시 원할한 코드랩 코딩 진행을 위해서는 Visual Studio 2015 or Visual Studio 2017 or Visual Studio for MAC & Visual Studio Code는 설치하셔야합니다.

http://mixedcode.com/Article/Index?aidx=1149
http://mixedcode.com/Article/Index?aidx=1066

- Visual Studio 2017 Community 를 설치하실분은 아래 설치 항목중  ASP.NET 및 웹개발,Azure 개발 항목  두개만 체크하시고 설치를 진행하시면됩니다.
- 금번 프로젝트에서는 반드시 Windows PC 를 준비해주셔야합니다.



ㅁASP.NET SignalR 최소 개발환경 사양(참고만 해주세요.)
- 최소 Visual Studio 2012 + update3 설치 사용 가능
- Visual Studio 2012 update3  :
- VS 2012 with ASP.NET and Web Tools 2013.1

ㅁ개발 프레임워크: .Net Framework 4.5 이상
    -.NET Framework 4.5 이상 권장( 개발툴 설치시 자동설치됨)
    -.NET Framework 4.5 필수 업데이트사항 
    - 최소 .NET Framework 4.0 기반에서도 ASP.NET SignalR은 서비스할수는 있지만 WebSocket방식은 지원하지 않음
   
ㅁ브라우저
    -IE10 또는 Chrome 최신버전 권장

ㅁDBMS
  - MS SQL 2014 Express (무료) 권장 - DB 프로그래밍시 사용(옵션)
  - 다운로드 및 설치가이드 : http://mixedcode.com/Article/Index?aidx=1066

감사합니다.

Comments

  1. KevindalMQ on 3/9/2023 7:48:14 AM

    Сказка Курочка Ряба https://dzen.ru/video/watch/6406b55136fc3309ce02e249

  2. KevindalMQ on 3/8/2023 10:31:07 AM

    Сказка Курочка Ряба https://dzen.ru/video/watch/6406b55136fc3309ce02e249

  3. KevindalMQ on 2/20/2023 10:36:50 AM

    Я знаю где-то во вселенной https://dzen.ru/video/watch/63d0a2ee00b242106a364177?t=7

  4. KevindalMQ on 2/9/2023 8:06:46 PM

    Я знаю где-то во вселенной https://dzen.ru/video/watch/63d0a2ee00b242106a364177?t=7

  5. wazzunopeSR on 2/7/2023 11:48:41 AM

    https://rentry.co/3ouz5

    ZOBACZ wyzej
    Opowiesci z NARNI caly film LEKTOR pl

  6. KevindalMQ on 2/4/2023 6:02:22 PM

    Я знаю где-то во вселенной https://dzen.ru/video/watch/63d0a2ee00b242106a364177?t=7

  7. KevindalMQ on 2/4/2023 3:17:14 AM

    Я знаю где-то во вселенной https://dzen.ru/video/watch/63d0a2ee00b242106a364177?t=7

  8. wazzunopeGP on 1/31/2023 12:02:04 PM

    docdroid.net/YZULUtJ/z-pamietnika-poloznej-s12e01-za-darmo-hd-pdf

    Z pamiętnika położnej Cały SERIAL
    Z pamiętnika położnej LEKTOR PL za free

  9. KevindalMQ on 1/26/2023 6:34:34 AM

    Я знаю где-то во вселенной https://dzen.ru/video/watch/63d0a2ee00b242106a364177?t=7

  10. KevindalMQ on 1/25/2023 7:23:04 AM

    Белым по черному https://dzen.ru/video/watch/63ce0d0fef8ec52eb146eed8?t=3

  11. KevindalMQ on 1/23/2023 11:20:31 PM

    Белым по черному https://dzen.ru/video/watch/63ce0d0fef8ec52eb146eed8?t=3

  12. KevindalMQ on 1/22/2023 9:27:39 PM

    Бог проснулся утром рано https://dzen.ru/video/watch/63ca0d414e549275cb0e37bb?t=4

  13. KevindalMQ on 1/22/2023 11:04:04 AM

    Бог проснулся утром рано https://dzen.ru/video/watch/63ca0d414e549275cb0e37bb?t=4

  14. KevindalMQ on 1/22/2023 5:05:04 AM

    Бог проснулся утром рано https://dzen.ru/video/watch/63ca0d414e549275cb0e37bb?t=4

  15. KevindalMQ on 1/18/2023 10:23:15 AM

    Небесная Конституция. Я выбираю счастье. День 6 https://dzen.ru/video/watch/63c4c9e167ba7f28a75c7bef?t=2

  16. KevindalMQ on 1/16/2023 11:17:19 PM

    Небесная Конституция. Я выбираю счастье. День 6 https://dzen.ru/video/watch/63c4c9e167ba7f28a75c7bef?t=2

  17. KevindalMQ on 1/10/2023 10:15:45 PM

    Рисуем ВОЛШЕБНЫМИ чернилами. ЭКСПЕРИМЕНТ!!! https://dzen.ru/video/watch/63aa738fd6058f07935143aa

  18. MarionPexRJ on 12/27/2022 3:29:12 AM

    https://kmwcity.ru/

  19. KevindalMQ on 12/24/2022 2:49:58 AM

    Торт Смешарики https://dzen.ru/video/watch/63a3d302da1c4f18e1086715?t=3

  20. KevindalMQ on 12/21/2022 9:32:35 PM

    Я смотрю в глаза людей https://dzen.ru/video/watch/63a27ea9fb9a933ce3c492de?t=6

  21. KevindalMQ on 12/13/2022 3:37:24 AM

    Песня Где обретешь ты надежду https://dzen.ru/video/watch/6396bf5b5aefb15730910aa0?t=9

  22. SadSantarxiSE on 11/29/2022 2:22:22 PM

    https://groups.google.com/g/bonus-ohne-einzahlung-mit-casino-bonus-code/c/hheLdyejACI/m/rr4elstnDAAJ


    AVATAR Istota Wody 2022 Caly Film
    AVATAR Istota Wody 2022 Caly Film Premiera
    AVATAR Istota Wody 2022 Caly Film vider

  23. SadSantacimSE on 11/27/2022 11:44:19 AM

    https://groups.google.com/g/bonus-ohne-einzahlung-mit-casino-bonus-code/c/hheLdyejACI/m/rr4elstnDAAJ


    AVATAR Istota Wody 2022 Caly Film
    AVATAR Istota Wody 2022 Caly Film Premiera
    AVATAR Istota Wody 2022 Caly Film vider

  24. WfmSYK on 10/31/2022 12:42:19 AM

    https://prednisoneall.top/

  25. WilliamStyncKC on 10/15/2022 10:57:41 PM


  26. WilliamStyncKC on 10/4/2022 8:30:09 PM


  27. WilliamStyncKC on 9/25/2022 9:39:22 AM


  28. ThomhaniaIH on 8/27/2022 6:51:05 AM

  29. ThomunfoxDJ on 8/22/2022 5:11:40 AM

  30. HiramdoownIW on 7/16/2022 7:51:51 PM


  31. BoriskbuigeUD on 5/27/2022 7:48:41 AM

    [url=http://www.english-yes.ru]развитие детской речи[/url]
    [url=http://english-yes.ru/]http://english-yes.ru/[/url]
    [url=https://google.fm/url?q=http://english-yes.ru]http://google.co.za/url?q=http://english-yes.ru[/url]

  32. Steven#bennick[ZojzgikylubydtDG,2,5]AB on 5/27/2022 6:44:43 AM

    [url=http://www.english-yes.ru]частный английский детский сад[/url]
    [url=http://english-yes.ru/]http://english-yes.ru/[/url]
    [url=https://google.ca/url?q=http://english-yes.ru]https://google.kg/url?q=http://english-yes.ru[/url]

  33. RandycawET on 5/27/2022 6:18:35 AM

    [url=https://www.english-yes.ru]кружки раннего развития детей[/url]
    [url=http://english-yes.ru/]http://english-yes.ru/[/url]
    [url=https://google.kz/url?q=http://english-yes.ru]https://google.li/url?q=http://english-yes.ru[/url]

  34. BrandondooniCJ on 3/26/2022 3:08:11 PM

    https://maps.google.cv/url?sa=t&url=https://xn-----7kccgclceaf3d0apdeeefre0dt2w.xn--p1ai/centr-perevodov-jazikovih-perevodov-novokuznetsk.php

  35. JackieBoupeXU on 3/15/2022 1:19:01 PM

    https://solovei.info/url/?url=https://uslugi.yandex.ru/profile/IgorSyzranov-1598463

  36. BrandondooniCJ on 3/14/2022 3:04:32 AM

    https://images.google.com.uy/url?sa=t&url=https://xn-----7kccgclceaf3d0apdeeefre0dt2w.xn--p1ai/surdoperevodchik-novokuznetsk.php

  37. JackieBoupeXU on 3/12/2022 2:25:55 PM

    https://maps.google.co.za/url?sa=t&url=https://zamena-ventsov-doma.ru/

  38. ExpanyDapay on 4/22/2021 8:20:51 AM

    http://vslevitrav.com/ - how to get a free trial of levitra

  39. 허재영 on 5/28/2018 6:42:20 PM

    특정 사용자에게만 보내려면 어떻게 해양살까요

  40. 이대용 on 7/24/2017 9:08:11 AM

    좋은 정보 감사합니다 !

  41. 믹스드코드 on 4/13/2017 9:20:51 AM

    안녕하세요. 믹스드코드 운영자 입니다.
    금일 첫 코드랩 모임을 서울 창조경제혁신센터에서 실시했는데요.

    평일인데요. 한분도 안빠지시고 참석해주신 많은분들께 감사 인사드립니다.
    함께하신분들의 열정을 느낄수 있었던 자리였던것 같습니다.

    전반적으로 함께신분들이 코드랩 진행을 잘 따라와 주셨는데요.
    개발툴( Visual Studio 2017 Community) 설치가 정상적으로 마무리가 안되어 ASP.NET MVC5 프로젝트 템플릿이 나타나지 않은분들이 몇분 계셨습니다.
    먼저 Visual Studio 2017 Community을 완전히 설치하시려면 안정된 인터넷 접속환경에서 본 게시글 하단의 설치 캡쳐 이미지를 참고하셔서
    ( http://mixedcode.com/Article/Index?aidx=1109 ) 개발툴 초기 설치시 나타나는 해당 화면에서 웹과 클라우트(5) > ASP.NET 및 웹 개발 항목만 체크 하신 후
    설치를 계속 진행하시면 1~2시간 안에 설치가 정상적으로 완료됩니다.

    설치가 완료되면 ASP.NET MVC5 기반 SignalR 개발 기초 실습하기1 게시글( http://mixedcode.com/Article/Index?aidx=1110 ) 을 참고해서
    솔루션 과 프로젝트를 생성해보시고 정상적으로 솔루션 및 ASP.NET MVC5 웹프로젝트 생성 및 빌드, 디버깅이 되시면 정상적으로 설치되신거라 판단할수 있습니다.

    개발툴 문제로 정상적으로 강의중 실습을 못해보신분들은
    웹채팅 개발 코드랩 카테고리 ( http://mixedcode.com/Category/Index?cidx=33 ) 게시글 목록중 하단에서부터 순차적으로 게시글들을 따라하기 식으로 직접해보시면
    아주 쉽게 따라 할수 있을것으로 판단됩니다.

    그럼 수고하세요.

Leave a Reply

*