Angular项目中如何关闭指定的WebSocket连接？

你的问题核心在于当前的WebsocketService只维护了单个WebSocket实例——每次调用connect时，新创建的连接会覆盖this.ws变量，导致disconnect方法永远只能关闭最后创建的那个连接，之前的连接因为没有被引用，根本没法操作。

要实现关闭指定连接，你需要改造服务，让它能同时管理多个WebSocket实例，每个实例和对应的按钮/标识绑定。下面是具体的改造方案：

1. 改造WebSocket服务，支持多连接管理 #

把单个ws变量换成Map来存储所有活跃连接，用唯一标识（比如按钮ID、payload里的唯一值）作为键，对应每个WebSocket实例。同时调整消息传递逻辑，让组件能区分不同连接的消息：

@Injectable({
  providedIn: 'root'
})
export class WebsocketService {
  // 用Map存储多连接：key=连接唯一标识，value=WebSocket实例
  private connections: Map<string, WebSocket> = new Map();
  // 消息主题，附带连接标识方便组件区分来源
  socketChanges$: Subject<{ connectionId: string; message: MessageEvent }> = new Subject();
  
  // 替换成你的实际配置
  private token = 'your-token';
  private socketUrl = 'ws://your-websocket-url';

  constructor() { }

  async connect(connectionId: string, payload: any): Promise<void> {
    // 如果该标识已有连接，先关闭旧的再创建新的
    if (this.connections.has(connectionId)) {
      this.disconnect(connectionId);
    }

    const ws = new WebSocket(`${this.socketUrl}?token=${this.token}`);
    this.connections.set(connectionId, ws);

    ws.onopen = () => {
      if (ws.readyState === WebSocket.OPEN) {
        ws.send(JSON.stringify({ payload }));
      }
    };

    ws.onmessage = (data: MessageEvent) => {
      // 发送消息时带上连接标识
      this.socketChanges$.next({ connectionId, message: data });
    };

    ws.onerror = (error: Event) => {
      console.error(`连接 ${connectionId} 出错:`, error);
      this.connections.delete(connectionId);
    };

    ws.onclose = () => {
      console.log(`连接 ${connectionId} 已关闭`);
      this.connections.delete(connectionId);
    };
  }

  // 根据标识关闭指定连接
  disconnect(connectionId: string): void {
    const targetWs = this.connections.get(connectionId);
    if (targetWs) {
      targetWs.close();
      this.connections.delete(connectionId);
    }
  }

  // 可选：一键关闭所有连接
  disconnectAll(): void {
    this.connections.forEach(ws => ws.close());
    this.connections.clear();
  }
}

2. 组件中使用改造后的服务 #

给每个按钮分配唯一的connectionId（比如btn-1、btn-2），点击时切换连接状态（开启/关闭），同时接收对应连接的消息：

import { Component, OnDestroy } from '@angular/core';
import { WebsocketService } from './websocket.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-ws-buttons',
  template: `
    <button (click)="toggleConnection('btn-1', { btnId: 1, content: '按钮1的负载' })">
      {{ connectedIds.has('btn-1') ? '关闭连接1' : '开启连接1' }}
    </button>
    <button (click)="toggleConnection('btn-2', { btnId: 2, content: '按钮2的负载' })">
      {{ connectedIds.has('btn-2') ? '关闭连接2' : '开启连接2' }}
    </button>
    <button (click)="toggleConnection('btn-3', { btnId: 3, content: '按钮3的负载' })">
      {{ connectedIds.has('btn-3') ? '关闭连接3' : '开启连接3' }}
    </button>

    <h3>收到的消息</h3>
    <div *ngFor="let msg of messageList">
      <span>来自{{ msg.connectionId }}:</span> {{ msg.message.data }}
    </div>
  `
})
export class WsButtonsComponent implements OnDestroy {
  // 跟踪已连接的ID，用来切换按钮文本
  connectedIds = new Set<string>();
  messageList: { connectionId: string; message: MessageEvent }[] = [];
  private msgSubscription: Subscription;

  constructor(private wsService: WebsocketService) {
    // 订阅所有连接的消息
    this.msgSubscription = this.wsService.socketChanges$.subscribe(msg => {
      this.messageList.push(msg);
      this.connectedIds.add(msg.connectionId);
    });
  }

  // 切换指定连接的状态
  toggleConnection(connectionId: string, payload: any) {
    if (this.connectedIds.has(connectionId)) {
      this.wsService.disconnect(connectionId);
      this.connectedIds.delete(connectionId);
    } else {
      this.wsService.connect(connectionId, payload);
    }
  }

  // 组件销毁时清理资源
  ngOnDestroy() {
    this.msgSubscription.unsubscribe();
    this.wsService.disconnectAll();
  }
}

核心要点 #

• 唯一标识绑定：每个按钮对应一个独一无二的connectionId，确保能精准定位要关闭的连接。
• Map管理多实例：用Map存储所有活跃连接，避免单个变量覆盖旧实例的问题。
• 消息区分：在消息中附带connectionId，让组件能识别消息来自哪个连接。

内容的提问来源于stack exchange，提问作者Alex