Angular의 WebSocket

Rana Hasnain Khan 2023년1월30일
  1. Angular의 웹소켓
  2. RxJS를 사용하여 Angular에서 WebSocket 구현
Angular의 WebSocket

예를 들어 Angular에서 WebSockets를 소개합니다.

Angular의 웹소켓

WebSocket은 클라이언트와 서버 간의 지속적인 연결입니다. HTTP를 통해 작동하는 양방향 및 전이중 채널을 제공합니다.

이 작업은 단일 TCP/IP 소켓 연결을 통해 이루어집니다. WebSocket 사용의 가장 좋은 예는 채팅 애플리케이션입니다.

채팅 애플리케이션은 WebSocket에서 작동하며 실시간으로 메시지를 주고받는 실시간 연결을 제공합니다.

이 튜토리얼은 Angular 애플리케이션에서 WebSocket을 사용하는 방법을 보여줍니다. Angular 애플리케이션에서 WebSocket을 사용하는 가장 좋은 방법은 WebSocket과 이벤트를 서비스로 캡슐화하는 것입니다.

그리고 우리가 사용하고자 하는 모든 구성 요소에서 해당 서비스를 사용할 수 있습니다.

Angular 응용 프로그램에서 WebSocket 작업을 시작하기 위해 새 Angular 응용 프로그램을 만들어 보겠습니다. 다음 명령을 사용하여 새 Angular 애플리케이션을 만들 수 있습니다.

# angular
ng new my_app

애플리케이션이 생성되면 다음 명령을 사용하여 애플리케이션 폴더로 이동합니다.

# angular
cd my_app

아래와 같이 다음 명령을 사용하여 애플리케이션을 실행합니다.

# angular
ng serve

RxJS를 사용하여 Angular에서 WebSocket 구현

시작하려면 주어진 URL에 연결하고 RxJS 제목을 반환하는 매우 간단한 서비스를 만들어야 합니다. 이 RxJS 주제는 연결된 소켓에서 들어오는 새 메시지를 수신하려는 서비스 또는 구성 요소에 구독됩니다.

아래와 같이 다음 명령을 사용하여 새 서비스를 만들 수 있습니다.

# angular
ng g service websocketchat

새 서비스가 생성되면 서비스의 rxjs 라이브러리에서 *를 가져옵니다. 관찰자이자 관찰자 역할을 할 수 있는 주제를 만들 수 있습니다.

주제는 들어오는 메시지를 감시하고 해당 주제를 구독한 구성 요소에도 메시지를 브로드캐스트합니다.

우리 서비스의 코드는 아래와 같습니다.

import { Injectable } from '@angular/core';
import * as Rj from 'rxjs';

@Injectable()
export class WebsocketChatService {
  constructor() {}

  private subject: Rj.Subject<MessageEvent>;

  public connect(url): Rj.Subject<MessageEvent> {
    if (!this.subject) {
      this.subject = this.create(url);
      console.log('Successfully connected To: ' + url);
    }
    return this.subject;
  }

  private create(url): Rj.Subject<MessageEvent> {
    let wsc = new WebSocket(url);

    let observable = Rj.Observable.create((obs: Rj.Observer<MessageEvent>) => {
      wsc.onmessage = obs.next.bind(obs);
      wsc.onerror = obs.error.bind(obs);
      wsc.onclose = obs.complete.bind(obs);
      return wsc.close.bind(wsc);
    });
    let observer = {
      next: (data: Object) => {
        if (wsc.readyState === WebSocket.OPEN) {
          wsc.send(JSON.stringify(data));
        }
      },
    };
    return Rj.Subject.create(observer, observable);
  }
}

이제 websocketchat 서비스를 만들었으므로 WebSocket과 인터페이스하고 어댑터 역할을 하는 또 다른 서비스가 필요합니다. WebSocket의 출력을 프런트 엔드에서 쉽게 사용할 수 있는 형식으로 조정합니다.

아래 명령을 사용하여 쉽게 만들 수 있는 서비스 이름을 chatservice로 지정하겠습니다.

# angular
ng g service chatservice

새 서비스가 생성되면 rxjs 라이브러리에서 websocketchat 서비스와 observable을 가져옵니다. 채팅 URL도 정의합니다.

아래와 같이 메시지 usermessageContent를 정의하는 메시지 인터페이스를 만듭니다.

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { map } from 'rxjs/operators';

import { WebsocketChatService } from './websocketchat.service';

const CHAT_URL = 'wss://echo.websocket.org/';

export interface Message {
  user: string;
  messageContent: string;
}

@Injectable()
export class ChatService {
  public messages: Subject<Message>;

  constructor(wscService: WebsocketChatService) {
    this.messages = <Subject<Message>>(
      wscService.connect(CHAT_URL).pipe(map((response: MessageEvent): Message => {
        let content = JSON.parse(response.data);
        return {
          user: content.user,
          messageContent: content.messageContent,
        };
      }))
    );
  }
}

두 서비스를 모두 구성 요소로 가져와 app.component.ts 파일을 업데이트합니다. 아래와 같이 메시지를 보내드립니다.

import { Component } from '@angular/core';
import { WebsocketChatService } from './websocketchat.service';
import { ChatService } from './chatservice.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [WebsocketChatService, ChatService],
})
export class AppComponent {
  constructor(private chatService: ChatService) {
    chatService.messages.subscribe((msg) => {
      console.log('Response recieved from websocket: ' + msg);
    });
  }

  private message = {
    user: 'Husnain',
    messageContent: 'Hello World!',
  };

  sendMessage() {
    console.log('new message from the client: ', this.message);
    this.chatService.messages.next(this.message);
    this.message.messageContent = '';
  }
}

이제 아래와 같이 클릭할 때마다 메시지를 보낼 버튼을 만드는 응용 프로그램의 프런트 엔드를 만듭니다.

<h1>Send Message by clicking button</h1>
<button (click)="sendMessage()">Send</button>

이제 어떻게 작동하는지 확인해보자.

Angular 예제의 웹 소켓

보내기 버튼을 클릭하면 콘솔에 다음 메시지가 전송됩니다.

Angular 예제 결과의 웹 소켓

위의 예에서 알 수 있듯이 rxjs를 사용하여 WebSockets를 구현하는 것은 매우 쉽습니다.

여기 데모

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn