[angular] 웹 소켓 구성

26 Dec 2023

angular

웹 소켓은 실시간 양방향 통신을 구현하는 데 사용됩니다. Angular 애플리케이션에서 웹 소켓을 구성하는 방법을 살펴보겠습니다.

1. WebSocket 모듈 설치

먼저, Angular 애플리케이션에서 웹 소켓을 사용하기 위해 @angular/websocket 모듈을 설치해야 합니다.

npm install --save @angular/websocket

2. WebSocket 서비스 생성

웹 소켓과 상호작용하기 위한 서비스를 생성합니다. 예를 들어, WebSocketService라는 서비스를 생성할 수 있습니다.

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

@Injectable({
  providedIn: 'root'
})
export class WebSocketService {
  private socket$: WebSocketSubject<any>;

  constructor() {
    this.socket$ = webSocket('ws://localhost:8080');  // 웹 소켓 서버 URL로 변경
  }

  sendMessage(message: string): void {
    this.socket$.next(message);
  }

  getMessages() {
    return this.socket$.asObservable();
  }
}

3. WebSocket 서비스 사용

이제, Angular 컴포넌트에서 WebSocket 서비스를 사용하여 웹 소켓과 상호작용할 수 있습니다.

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

@Component({
  selector: 'app-websocket-example',
  template: `
    <input type="text" [(ngModel)]="message" />
    <button (click)="sendMessage()">Send</button>
    <ul>
      <li *ngFor="let msg of messages">{{ msg }}</li>
    </ul>
  `,
})
export class WebSocketExampleComponent implements OnInit {
  message: string;
  messages: string[] = [];

  constructor(private webSocketService: WebSocketService) {}

  ngOnInit() {
    this.webSocketService.getMessages().subscribe((message) => {
      this.messages.push(message);
    });
  }

  sendMessage() {
    this.webSocketService.sendMessage(this.message);
    this.message = '';
  }
}

위 예제에서는 WebSocketService를 사용하여 웹 소켓으로 메시지를 보내고 받는 방법을 보여줍니다.

이제 Angular 애플리케이션에서 웹 소켓을 구성할 수 있습니다!

더 많은 자세한 내용은 Angular 웹 소켓 공식 문서를 참고하시기 바랍니다.