[javascript] Angular에서의 자바스크립트 웹 소켓 통신 방법

21 Dec 2023

javascript

Angular는 웹 애플리케이션을 개발하기 위한 인기 있는 프레임워크 중 하나입니다. 이 프레임워크를 사용하여 웹 소켓을 통해 실시간 통신 기능을 구현할 수 있습니다. 웹 소켓은 양방향 통신을 지원하며, 클라이언트와 서버 간에 실시간 데이터 전송이 가능합니다.

웹 소켓 라이브러리 설치

먼저, Angular 프로젝트에 웹 소켓을 사용하기 위한 라이브러리를 설치해야 합니다. Angular에서는 일반적으로 angular-websocket이나 ngx-socket-io와 같은 웹 소켓 라이브러리를 사용합니다.

npm install angular-websocket

설치가 완료되면, 애플리케이션 모듈에 해당 라이브러리를 가져와야 합니다.

import { WebsocketModule } from 'angular-websocket';

웹 소켓 서비스 생성

다음으로, 웹 소켓 서비스를 생성하여 클라이언트 측에서 소켓 연결을 관리할 수 있습니다. 이 서비스는 연결을 설정하고 데이터를 전송하거나 받는 등의 기능을 제공합니다.

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

@Injectable({
  providedIn: 'root'
})
export class WebSocketService {

  private socket: WebSocketSubject<any>;

  constructor() {
    this.socket = new WebSocketSubject('ws://서버주소');
  }

  send(data: any) {
    this.socket.next(data);
  }

  onMessage(): Observable<any> {
    return this.socket.asObservable();
  }
}

위의 코드에서, WebSocketSubject를 사용하여 소켓 연결을 생성하고, send 함수를 사용하여 데이터를 전송하며, onMessage 함수를 사용하여 수신된 데이터를 Observable로 반환합니다.

컴포넌트에서의 사용

이제 웹 소켓 서비스를 컴포넌트에서 사용할 수 있습니다.

import { Component, OnInit } from '@angular/core';
import { WebSocketService } from './websocket.service';

@Component({
  selector: 'app-websocket',
  template: `
    <div>
      <button (click)="sendMessage()">Send Message</button>
      <div>{{ receivedMessage }}</div>
    </div>
  `
})
export class WebsocketComponent implements OnInit {

  receivedMessage: string;

  constructor(private webSocketService: WebSocketService) { }

  ngOnInit() {
    this.webSocketService.onMessage().subscribe((message) => {
      this.receivedMessage = message;
    });
  }

  sendMessage() {
    this.webSocketService.send('Hello, WebSocket!');
  }
}

위의 코드에서는 WebSocketService를 주입하여 송수신을 관리하는 방법을 보여줍니다. sendMessage 함수를 통해 메시지를 보내고, onMessage 함수를 사용하여 수신된 메시지를 처리합니다.

이제 Angular 애플리케이션에서 웹 소켓을 통한 통신을 구현할 준비가 되었습니다!

결론

Angular를 사용하여 웹 소켓을 통한 실시간 통신을 구현하는 방법을 살펴보았습니다. 이러한 방식을 사용하면 클라이언트와 서버 간에 실시간으로 데이터를 교환할 수 있어서, 실시간 채팅, 실시간 게임, 주식 시장 데이터 실시간 업데이트 등 다양한 기능을 구현할 수 있습니다.

이를 통해 Angular를 사용하여 손쉽게 웹 소켓을 통한 통신을 구현할 수 있습니다.

참고: https://angular.io/, https://www.npmjs.com/package/angular-websocket, https://github.com/Treri/ngx-socket-io