[javascript] 앵귤러와 웹 소켓 통신

05 Dec 2023

javascript

웹 소켓은 앵귤러와 함께 사용하기에 적합한 실시간 통신 기술입니다. 웹 소켓을 사용하면 서버와 클라이언트 간에 실시간 데이터를 주고받을 수 있습니다. 이번 글에서는 앵귤러와 웹 소켓을 연동하는 방법을 알아보겠습니다.

웹 소켓 모듈 설치하기

앵귤러에서 웹 소켓을 사용하기 위해서는 먼저 @angular/websocket 모듈을 설치해야 합니다. 다음 명령어를 사용하여 모듈을 설치합니다.

npm install --save @angular/websocket

웹 소켓 서비스 생성하기

@angular/websocket 모듈을 설치한 후에는 웹 소켓 서비스를 생성해야 합니다. 이 서비스는 웹 소켓과의 연결을 관리하고, 데이터를 주고받을 때 사용됩니다. 아래의 코드를 참고하여 웹 소켓 서비스를 생성합니다.

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

@Injectable({
  providedIn: 'root'
})
export class WebSocketService {
  private subject: Subject<any>;

  constructor() { }

  connect(url: string): Observable<any> {
    if (!this.subject || this.subject.closed) {
      this.subject = webSocket(url);
    }
    return this.subject.asObservable();
  }

  send(data: any): void {
    if (this.subject && !this.subject.closed) {
      this.subject.next(data);
    }
  }

  close(): void {
    if (this.subject && !this.subject.closed) {
      this.subject.complete();
    }
  }
}

위 코드에서는 WebSocketService라는 클래스를 생성하였고, connect, send, close 메소드를 정의하였습니다. connect 메소드는 웹 소켓 서버에 연결하고, send 메소드는 데이터를 서버로 전송합니다. close 메소드는 웹 소켓 연결을 종료합니다.

앵귤러 컴포넌트에서 웹 소켓 사용하기

이제 @angular/websocket 모듈을 사용하여 웹 소켓을 앵귤러 컴포넌트에서 사용해보겠습니다. 웹 소켓 서비스를 주입받은 후에 connect 메소드를 호출하여 서버와 연결하고, send 메소드를 사용하여 데이터를 전송할 수 있습니다. 아래의 코드를 참고하여 앵귤러 컴포넌트에서 웹 소켓을 사용하는 예제를 작성해보세요.

import { Component, OnInit } from '@angular/core';
import { WebSocketService } from 'src/app/web-socket.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {

  constructor(private webSocketService: WebSocketService) { }

  ngOnInit(): void {
    const url = 'ws://localhost:8080/socket'; // 웹 소켓 서버의 URL
    this.webSocketService.connect(url)
      .subscribe(data => {
        // 서버로부터 데이터 받기
        console.log(data);
      });
  }

  sendData(): void {
    const data = { key: 'value' }; // 전송할 데이터
    this.webSocketService.send(data);
  }

  ngOnDestroy(): void {
    this.webSocketService.close();
  }

}

위 코드에서는 WebSocketService를 주입받은 후에 connect 메소드를 호출하여 웹 소켓 서버에 연결합니다. 그리고 subscribe 메소드를 사용하여 서버로부터 데이터를 받을 수 있습니다. sendData 메소드는 데이터를 서버로 전송합니다. ngOnDestroy 메소드에서는 웹 소켓 연결을 종료합니다.

이제 웹 소켓을 사용하는 앵귤러 컴포넌트를 사용하여 실시간 데이터를 주고받을 수 있습니다.

참고 자료

Angular WebSocket

웹 소켓을 앵귤러와 함께 사용하면 실시간 통신 기능을 구현할 수 있습니다. @angular/websocket 모듈을 사용하여 웹 소켓 서비스를 생성하고, 앵귤러 컴포넌트에서 사용하여 데이터를 주고받을 수 있습니다. 이를 통해 앵귤러 애플리케이션을 더 동적이고 인터랙티브하게 만들 수 있습니다.