Angular의 WebSocket

1. Angular의 웹소켓
2. RxJS를 사용하여 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도 정의합니다.

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

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>

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

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

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

여기 데모