source

AngularJS 및 그 이상의 웹소켓

lovecheck 2023. 10. 24. 21:25
반응형

AngularJS 및 그 이상의 웹소켓

저는 방금 이 게시물을 읽었고, 차이점이 무엇인지 이해합니다.하지만 내 머릿속에는 아직도 의문이 들어요.동일한 앱/웹 사이트에서 사용할 수 있습니까?AngularJs가 콘텐츠를 가져와 REST api에 연결하고 내 페이지를 업데이트하기를 원한다고 가정합니다.하지만 그 외에도 실시간 채팅을 원하거나 업데이트 또는 메시지가 수신될 때 다른 클라이언트에서 이벤트를 트리거하기를 원합니다.

Angular가 그것을 지지합니까?아니면 Socket.io 같은 것을 사용하여 이벤트를 시작해야 합니까?둘 다 쓰는 게 말이 됩니까?만약 누군가가 저를 도와줄 수 있거나, 둘 다 함께 사용하는 목적이 있다면 그에 대한 좋은 책을 알려줄 수 있다면요.

제가 충분히 이해했으면 좋겠네요. 어떤 도움이든 감사합니다.

자바스크립트는 WebSocket을 지원하기 때문에 추가적인 클라이언트 사이드 프레임워크가 필요 없습니다.웹소켓 기반의 Angular에서 선언된 $연결 서비스를 살펴보시기 바랍니다.JS application.

기본적으로 메시지를 들을 수 있습니다.

   $connection.listen(function (msg) { return msg.type == "CreatedTerminalEvent"; }, 
        function (msg) {
            addTerminal(msg);
            $scope.$$phase || $scope.$apply();
   });

한 번 듣기(요청/응답에 적합):

    $connection.listenOnce(function (data) {
        return data.correlationId && data.correlationId == crrId;
    }).then(function (data) {
        $rootScope.addAlert({ msg: "Console " + data.terminalType + " created", type: "success" });
    });

메시지 보내기:

    $connection.send({
        type: "TerminalInputRequest",
        input: cmd,
        terminalId: $scope.terminalId,
        correlationId: $connection.nextCorrelationId()
    });

일반적으로 WebSocket 연결은 양방향이며 지원이 좋기 때문에 요청/응답 모델의 서버에서 데이터를 가져오는 데 사용할 수도 있습니다.두 가지 모델을 사용할 수 있습니다.

  • 게시자/구독자:클라이언트가 일부 항목에 대한 관심을 선언하고 해당 항목의 메시지 처리기를 설정한 후 서버가 적합하다고 판단될 때마다 메시지를 게시(또는 푸시)하는 경우.

  • 요청/응답:클라이언트가 요청과 함께 메시지를 보내는 위치ID(또는 correlationId), 해당 requestId에 대한 단일 응답을 수신합니다.

그래도 원하는 경우 두 가지를 모두 사용할 수 있으며 데이터를 가져올 때 REST를 사용하고 업데이트할 때는 WebSocket을 사용할 수 있습니다.

서버 측면에서는 웹소켓 지원 백엔드를 사용하려면 Socket.io 이나 다른 서버 측면 프레임워크를 사용해야 할 수도 있습니다.

링크된 게시물의 답변에 나와 있듯이, Angular는 현재 웹소켓에 대한 내장된 지원 기능이 없습니다.따라서 Websockets API를 직접 사용하거나 Socket.io 과 같은 추가 라이브러리를 사용해야 합니다.

그러나 단일 Angular 응용 프로그램에서 REST api와 Websockets를 모두 사용해야 하는지에 대한 질문에 답하려면, 응용 프로그램의 여러 부분에 포함된 특정 기능에 대해 $http 또는 BreezeJS와 같은 다른 데이터 계층 라이브러리를 사용하여 REST api와 상호 작용하는 표준 XmlHttpRequest 요청을 둘 다 가질 수 없는 이유가 없습니다.ion과 Wesockets를 다른 부분(예: 실시간 채팅)에 사용합니다.

각도는 이러한 유형의 시나리오를 처리하는 데 도움이 되도록 설계되었습니다.일반적인 해결책은 애플리케이션 기능을 처리하고 페이지를 업데이트하기 위해 하나 이상의 컨트롤러를 만든 다음 각 데이터 엔드포인트(즉, REST api 및 실시간 채팅 서버)의 데이터 관리를 캡슐화하는 별도의 서비스 또는 공장을 만든 후 컨트롤러에 주입하는 것입니다.

데이터 연결을 관리하기 위한 각도형 서비스/공장 사용에 관한 많은 정보가 있습니다.Angular 애플리케이션을 구축하는 방법과 데이터 서비스가 어디에 적합한지에 대해 안내해 줄 자료를 찾고 있다면 John Papa의 Angular를 확인해 보는 것을 추천합니다.데이터 서비스에 대한 섹션을 포함하는 JS 스타일 가이드.

공장과 서비스에 대한 자세한 정보는 Angular에서 확인할 수 있습니다.JS : 공장이 아닌 서비스를 이용할 때

언급URL : https://stackoverflow.com/questions/26299403/angularjs-and-websockets-beyond

반응형