Angular中WebSocket仅刷新页面可连接，如何实现登录开启、登出关闭？

核心问题根因 #

• 你当前只在AppComponent的ngOnInit里判断登录状态，这个钩子仅在应用首次加载时执行一次，用户后续登录成功后不会重新触发，自然不会启动Socket连接
• 现有Socket服务没有做实例状态校验，重复调用open()会生成多余的WebSocket实例没有销毁，容易造成内存泄漏和连接冲突
• 没有监听登录/登出的状态变化，无法自动触发连接/断连操作
• rxjs的WebSocketSubject调用unsubscribe()仅取消流订阅，不会主动关闭底层WebSocket连接，必须调用complete()才能正常断连，你之前的关闭逻辑本身有问题

代码调整步骤 #

第一步：优化Socket服务代码 #

import { Injectable } from '@angular/core';
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
import { environment } from '../environments/environment';
import { AuthService } from './auth.service'; // 替换为你实际的Auth服务路径

@Injectable({ providedIn: 'root' })
export class SocketService {
  private readonly SOCKET_URL: string = environment.webSocketEndpoint;
  private ws: WebSocketSubject<any> | null = null;

  constructor(private auth: AuthService) {}

  open(): void {
    // 已有连接先销毁旧连接避免冲突
    if (this.ws) {
      this.close();
    }
    const accessToken = this.auth.user()?.['accessToken'];
    if (!accessToken) {
      console.warn('未获取到登录凭证，无法建立WebSocket连接');
      return;
    }
    this.ws = webSocket(`${this.SOCKET_URL}/?access_token=${accessToken}&platform=web`);
    // 可选：添加连接状态监听方便排查问题
    this.ws.subscribe({
      error: (err) => console.error('WebSocket连接出错：', err),
      complete: () => console.log('WebSocket连接已正常关闭')
    });
  }

  emit(event: Object): void {
    if (!this.ws) {
      console.warn('WebSocket未连接，无法发送消息');
      return;
    }
    this.ws.next(event);
  }

  events() {
    if (!this.ws) {
      this.open();
    }
    return this.ws?.asObservable() || null;
  }

  close(): void {
    if (this.ws) {
      // 完全关闭底层WebSocket连接
      this.ws.complete();
      this.ws = null;
    }
  }

  // 对外暴露连接状态方便业务逻辑判断
  getConnectionStatus(): boolean {
    return this.ws !== null && !this.ws.closed;
  }
}

第二步：关联登录/登出状态自动触发连接操作 #

不需要把逻辑放在ngOnInit的单次判断里，按你Auth服务的实现二选一即可：

1. 如果Auth服务已经暴露了登录状态的Observable（比如user$流），直接在AppComponent里订阅状态变化：

// app.component.ts
import { Subscription } from 'rxjs';

private authStatusSub: Subscription;

ngOnInit() {
  this.authStatusSub = this.auth.user$.subscribe(user => {
    if (user) {
      // 登录成功启动连接
      this.socketService.open();
    } else {
      // 登出成功关闭连接
      this.socketService.close();
    }
  });
}

ngOnDestroy() {
  // 组件销毁时取消订阅避免内存泄漏
  this.authStatusSub?.unsubscribe();
}

2. 如果Auth服务没有暴露状态流，分别在登录、登出的成功回调里加对应逻辑即可：

// 登录方法成功回调
login(formData) {
  this.auth.login(formData).subscribe(res => {
    // 原有登录成功逻辑
    this.socketService.open();
  })
}

// 登出方法成功回调
logout() {
  this.auth.logout().subscribe(res => {
    // 原有登出成功逻辑
    this.socketService.close();
  })
}

可选优化 #

如果需要实现断连自动重连，可以在Socket服务的错误回调里增加重试逻辑，设置最大重试次数和间隔避免无限重试。

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