如何在Angular中使用WebSocket服務實現雙向通信

在Angular中使用WebSocket服務實現雙向通信可以通過Angular的HttpClient模塊結合WebSocket API來實現。以下是一個簡單的示例：

1. 首先在Angular項目中安裝WebSocket庫，比如angular-websockets：

npm install angular-websockets

2. 創建一個WebSocketService服務，用于處理WebSocket連接和通信：

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/ws');

    this.socket.subscribe(
      msg => {
        console.log('Received message: ', msg);
      },
      err => {
        console.error('WebSocket error: ', err);
      }
    );
  }

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

3. 在組件中使用WebSocketService來發送和接收消息：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  message: string;

  constructor(private webSocketService: WebSocketService) {}

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

4. 在模板中添加一個輸入框和按鈕，用于發送消息：

<input type="text" [(ngModel)]="message">
<button (click)="sendMessage()">Send Message</button>

這樣就實現了在Angular中使用WebSocket服務實現雙向通信的功能。您可以根據具體的需求擴展WebSocketService來處理不同的消息類型和業務邏輯。