Angular中Socket.io连接message命名空间重复触发连接问题咨询

message命名空间多次触发connected日志，而friends仅触发一次的核心原因是**message的Socket连接被重复创建**，常见场景包括：

• 连接代码写在会被多次实例化的组件中（比如message.component.ts这类路由/复用组件的ngOnInit或构造函数里），每次组件初始化都会新建Socket连接，服务器就会多次收到连接事件。
• 没有将message的Socket连接封装为单例服务，多个组件各自独立创建连接实例，导致多份连接请求。而friends的连接大概率是在全局单例服务中初始化，只创建一次实例，所以仅触发一次连接日志。

1. 封装Socket为单例服务
   创建全局单例服务统一管理Socket连接，确保每个命名空间只初始化一次：

   import { Injectable } from '@angular/core';
   import { io, Socket } from 'socket.io-client';
   import { environment } from '../environments/environment';
   
   @Injectable({ providedIn: 'root' })
   export class SocketService {
     private messageSocket: Socket;
     private friendsSocket: Socket;
   
     constructor() {
       this.messageSocket = io(`${environment.api_url}/message`);
       this.friendsSocket = io(`${environment.api_url}/friends`);
     }
   
     getMessageSocket(): Socket {
       return this.messageSocket;
     }
   
     getFriendsSocket(): Socket {
       return this.friendsSocket;
     }
   }
   

   后续所有需要使用message连接的组件，都通过注入该服务获取已有的连接实例，而非自行新建。

2. 排查组件重复初始化问题
   检查使用message连接的组件：

   • 查看路由配置是否开启了重复加载（如onSameUrlNavigation: 'reload'）
   • 确认组件是否在*ngFor循环、或*ngIf条件频繁切换的场景下被反复销毁重建
   • 若为路由组件，检查路由复用策略是否导致组件重复实例化

3. 组件销毁时清理连接（可选）
   如果必须在组件内创建连接，务必在组件销毁时断开，避免无效连接残留：

   import { OnDestroy } from '@angular/core';
   // ...其他导入
   
   export class MessageComponent implements OnInit, OnDestroy {
     private socket: Socket;
   
     ngOnInit(): void {
       this.socket = io(`${environment.api_url}/message`);
     }
   
     ngOnDestroy(): void {
       this.socket?.disconnect();
     }
   }
   

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