SignalR을 사용하여 실시간 애플리케이션 구축 – 1부

HTTP 프로토콜은 웹을 통한 모든 커뮤니케이션의 기초이며 초기부터 우리의 요구를 충족시켜 왔습니다. HTTP는 요청 및 응답 모델에서 작동하며, 서버에서 업데이트를 받으려면 요청을 서버로 보내야 합니다.

이것은 실시간 데이터가 필요한 몇 가지 시나리오를 처리하는 데 어려움을 야기합니다 : 사용자가 웹 페이지를 열 때 업데이트해야하고, 서버에 변경이 있지만 HTTP 아키텍처에 따라 서버로부터 업데이트를 받기 위해 새로운 요청을 보내야합니다. 이로 인해 사용자에게 좋지 않은 환경이 발생하며 여러 요청으로 인해 네트워크 대역폭도 제한될 수 있습니다. 사용자에게 라이브 데이터를 표시해야 하는 많은 실시간 시나리오가 있습니다(예: 주식 시장 정보, 라이브 게임 결과, 채팅 애플리케이션 등).

이러한 시나리오를 처리하기 위해 다양한 해결 방법을 사용하는데, AJAX가 많은 도움이 되었습니다. AJAX를 사용하면 요청 (상대적으로 매우 작음)을 보내고 응답에 따라 UI를 업데이트 할 수 있습니다. 우리가 직면한 다른 문제로는 기능 및 지원 측면에서 브라우저의 다양한 동작이 있습니다. 성능 측면에서 서버의 리소스 및 네트워크 사용률은 다른 문제이므로 서버에 맹목적으로 여러 요청을 보낼 수 없습니다. 마찬가지로 사용자가 업데이트를 기다리는 동안 더 오래 기다리게 할 수 없습니다. 실시간 통신을 처리하기 위해 사용 가능한 최상의 옵션/프로토콜을 사용하는 것은 개발자의 책임입니다.

SignalR이란 무엇입니까?

SignalR은 실시간 웹 애플리케이션을 매우 쉽게 개발할 수 있는 고급 라이브러리입니다. 위에서 논의한 것처럼 AJAX를 사용하여 실시간 웹 애플리케이션을 작성하거나 Forever Frame 또는 기타 사용자 지정 해결 방법을 사용할 수 있지만 이는 매우 복잡하고 시나리오마다 다른 논리가 필요합니다. SignalR은 관련된 모든 복잡성을 숨기고 다른 버전을 포함한 모든 브라우저에서 원활하게 작동합니다. 매우 강력하며 클라이언트와 서버 간의 양방향 통신을 허용합니다. 서버는 클라이언트의 요청이 응답을 보낼 때까지 기다릴 필요가 없으며, 대신 새 데이터를 사용할 수 있을 때 논리적으로 응답을 푸시할 수 있습니다. 연결 관리 자체를 처리하고 연결된 클라이언트에 메시지를 브로드캐스트/유니캐스트할 수 있습니다.

Transport Mechanism

SignalR은 여러 기술 중 하나를 사용하여 클라이언트와 서버 간의 통신을 설정합니다. HTML5와 함께 도입된 웹 소켓은 양방향 지원을 제공하지만 모든 브라우저 및 이전 버전에서 지원되지는 않습니다. 사용자가 어떤 브라우저를 사용할지 보장할 수 없기 때문에 단순히 이것에 의존할 수 없으므로 브라우저 간에 유사한 기능을 구현할 수 있는 방법이 있어야 합니다. 이를 위해 SignalR을 사용하면 여러 전송 기술을 사용하고 시나리오에 가장 적합한 기술을 선택할 수 있습니다.

위의 기술에 대해 간략하게 논의해 보겠습니다

웹 소켓– 이것은 웹에서 단일 TCP 연결을 통해 진정한 양방향 통신을 제공하는 새로운 통신 기술입니다. 즉, 두 당사자(클라이언트와 서버)가 모두 웹 소켓을 지원하는 경우 클라이언트 또는 서버에서 언제든지 데이터를 보내는 데 사용할 수 있는 지속적인 연결을 만듭니다. 따라서 이 방법이 가장 효율적이고 메모리를 덜 사용하며 대기 시간이 가장 짧습니다. SignalR 애플리케이션에 가장 선호되는 프로토콜입니다.

Server Sent Events (Event Source 라고도 함) – HTML5에 도입된 또 다른 기술로, 새 데이터를 사용할 수 있을 때마다 서버가 클라이언트에 업데이트를 푸시할 수 있도록 합니다. 이 기술은 웹 소켓이 지원되지 않을 때 사용됩니다. IE를 제외한 대부분의 브라우저에서 지원됩니다.

Forever Frame– 이것은 COMET 모델의 일부이며 브라우저에서 숨겨진 iframe을 사용하여 서버에서 증분 방식으로 데이터를 수신합니다. 서버는 콘텐츠의 전체 길이를 모른 채 일련의 청크로 데이터를 보내기 시작합니다. 데이터가 수신될 때 클라이언트에서 실행됩니다.

AJAX 긴 폴링– SignalR에서 클라이언트와 서버 간의 통신을 설정하는 데 가장 선호되지 않는 방법입니다. 또한 가장 비쌉니다! 이것은 COMET 모델의 일부이며 이름에서 알 수 있듯이 업데이트를 확인하기 위해 서버를 계속 폴링합니다. 서버로 전송되는 요청은 리소스 사용을 최소화하고 더 나은 사용자 환경을 제공하기 위해 AJAX 기반입니다. 그러나 업데이트가 있는지 여부에 관계없이 서버를 계속 폴링하기 때문에 여전히 비쌉니다.

더 진행하기 전에 클라이언트와 서버 간에 연결하는 데 사용되는 두 가지 모델인 영구 연결 및 허브에 대해 논의해 보겠습니다

영구 연결– 이것은 다른 클라이언트에게 원시 메시지를 보낼 수 있는 낮은 수준의 API입니다. 또한 다양한 유형의 메시지와 다양한 클라이언트를 기반으로 이를 사용자 지정할 수 있으며 이러한 세부 정보를 메시지와 함께 보낼 수도 있습니다. 간단히 말해서 한편으로는 다양한 유형의 메시지를 연결하고 보내는 데 더 많은 제어 권한을 부여하고 다른 한편으로는 더 많은 코드를 작성해야 합니다.

허브– 영구 연결을 기반으로 구축된 상위 수준 API입니다. 허브는 개발자로부터 모든 복잡성을 숨기고 고유한 함수가 정의된 간단한 RPC 스타일 모델을 제공합니다.

SignalR 사용 방법

SignalR은 구성 및 사용이 매우 쉽습니다. 다음과 같이 nuget 패키지를 설치할 수 있습니다.

또는 패킷 관리자 콘솔을 통해 다음 명령을 실행할 수 있습니다.

Install-Package Microsoft.AspNet.SignalR

그러면 SignalR의 모든 필수 구성 요소가 설치됩니다. 설치가 완료되면 사용을 시작하려면 다음 단계를 완료해야 합니다.

1- 먼저 응용 프로그램에서 구성해야 합니다. 이를 위해 Startup.cs라는 클래스를 만들고 거기에 다음 코드를 넣어야 합니다.

    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }

2- Hub 클래스에서 상속해야하는 Hub 클래스를 다음과 같이 만듭니다.

public class MySignalRHub : Hub
{
    public void SendMessage(string message)
    {
        // Calls the call back function defined on client side
        Clients.All.SayHello("Hello !! Your Message : " + message);
    }
}

허브는 모든 SignalR 애플리케이션의 핵심이며 클라이언트와 서버 간의 통신을 용이하게 하는 허브입니다. 여기서 SayHello 메소드는 Hub에서 호출되는 JavaScript 메소드(다음에 볼 것입니다)입니다. SendMessage 메서드는 클라이언트에서 호출됩니다. 허브는 모델 바인딩 및 직렬화를 즉시 제공합니다.

3- 이제 클라이언트 측에서 (예 : Index.HTML) 흐르는 라이브러리를 추가해야합니다.

<script src="Scripts/jquery-1.6.4.min.js"></script>

<script src="Scripts/jquery.signalR-2.2.0.js"></script>

위는 JavaScript 클라이언트에 필요한 jQuery 및 SignalR 라이브러리입니다. jQuery의 최소 버전은 1,6.4입니다.

4- 이제 클라이언트는 서버 방법에 어떻게 연결합니까? 이를 위해서는 동적으로 생성되는 허브 프록시를 포함해야 합니다. 이를 사용하여 서버와 클라이언트 간에 통신이 발생합니다. 다음과 같이 포함됩니다.

<script src="signalr/hubs"></script>

참고 – 클라이언트의 파일 순서는 jQuery, jQuery SignalR 및 Hub 프록시와 동일해야 합니다.

5- 클라이언트에 필요한 모든 리소스가 있습니다. 이제 서버 측 코드를 호출하기 위한 코드를 작성하고 서버가 업데이트를 받을 때 서버에서 호출되는 콜백 기능을 제공해야 합니다. 코드에서 살펴보겠습니다.

var hubproxy = $.connection.mySignalRHub;

이것은 통신의 핵심이 될 프록시 인스턴스입니다. 콜백 메소드를 다음과 같이 정의해 보겠습니다.

hubproxy.client.sayHello = function (message) {
    // Process your message
}

이제 서버 측 메소드를 다음과 같이 호출하십시오.

$.connection.hub.start().done(function () {
   $('#sendmessage').click(function () {
          // Call the Send method on the hub.
          hubproxy.server.sendMessage($('#tbmessage').val());                
   });
});

위의 코드에는 두 가지 주요 사항이 있습니다. 먼저 허브를 시작하고 완료되면 click 메소드를 추가하고 허브의 sendMessage만 호출합니다. 허브를 시작하기 전에는 호출할 수 없습니다.

위의 내용은 SignalR 애플리케이션의 최소 설정에 필요한 모든 단계입니다. 여기에서 클라이언트와 서버 간의 통신에 대한 그림 표현을 살펴보겠습니다.

참고 – 클라이언트 측에서는 서버에서 어떻게 작성되었는지에 관계없이 메소드를 호출해야 하며, 그렇지 않으면 호출되지 않습니다.

결론

이 게시물에서는 실시간 웹 애플리케이션 작성의 복잡성과 SignalR이 해당 프로세스를 간소화하는 방법에 대해 설명했습니다. 그런 다음 연결 모델, 전송 모델의 개념 및 인프라를 설정하고 SignalR을 시작하는 방법에 대해 논의했습니다. 실제 사례를 통해 SignalR의 통찰력을 다룰 다음 게시물을 계속 지켜봐 주십시오.

좋아하는 프레임워크를 사용하여 모든 시나리오에 대한 최신 웹 앱을 만드세요.Ignite UI 다운로드 지금 바로 Infragistics jQuery/HMTL5 컨트롤의 강력한 기능을 경험해 보십시오.