ngx-socket-io如何从组件动态设置socket初始化options参数

核心逻辑：ngx-socket-io 封装的Socket实例会在构造阶段固化连接配置，连接建立后直接修改options.data不会触发握手参数更新，写死在服务构造函数里的配置无法从组件层动态修改，可根据业务场景选择以下两种实现方式：

方案1：组件级独立注入（多实例隔离场景推荐） #

适合不同组件使用不同parameter值、连接互不干扰的场景：

• 第一步：改造原有Socket服务，通过注入令牌接收外部动态参数，不再写死配置

import { Inject, Injectable, InjectionToken } from '@angular/core';
import { Socket } from 'ngx-socket-io';
import { environment } from 'src/environments/environment';
import { SocketEnum } from './socket.enum';

// 定义注入令牌用于传递动态参数
export const USER_SOCKET_DATA_PARAM = new InjectionToken<{parameter: string}>('USER_SOCKET_DATA_PARAM');

@Injectable()
export class UsersListUpdateSocketService extends Socket {
  userListsUpdate$ = this.fromEvent<User[]>('update-users');

  constructor(@Inject(USER_SOCKET_DATA_PARAM) dynamicData: {parameter: string}) {
    super({
      url: `${environment.socketUrl}/${SocketEnum.USER_LIST}`,
      options: { 
        data: { parameter: dynamicData.parameter } 
      }
    });
  }
}

• 第二步：在使用服务的组件中配置注入规则，传入当前组件需要的自定义参数值

import { Component } from '@angular/core';
import { UsersListUpdateSocketService, USER_SOCKET_DATA_PARAM } from './users-list-update-socket.service';

@Component({
  selector: 'app-user-list-module-a',
  template: '',
  providers: [
    {
      provide: USER_SOCKET_DATA_PARAM,
      // 此处可传入任意自定义值，比如'value2'、'value3'
      useValue: { parameter: 'value2' }
    },
    UsersListUpdateSocketService
  ]
})
export class UserListModuleAComponent {
  // 注入的服务实例会自动使用上面配置的自定义参数完成初始化
  constructor(private userListSocket: UsersListUpdateSocketService) {
    this.userListSocket.userListsUpdate$.subscribe(list => {
      console.log('接收用户列表更新', list);
    })
  }
}

该方案下每个组件注入的都是独立Socket实例，连接、事件监听完全隔离，不会出现数据串流问题，适配多模块独立使用同个命名空间但握手参数不同的场景。

方案2：手动控制实例化（单实例动态重连场景） #

如果不需要多实例隔离，要在运行过程中动态切换parameter值，可以封装通用服务手动控制实例创建和重连：

import { Injectable, OnDestroy } from '@angular/core';
import { Socket } from 'ngx-socket-io';
import { environment } from 'src/environments/environment';
import { SocketEnum } from './socket.enum';

@Injectable({ providedIn: 'root' })
export class UserListDynamicSocketService implements OnDestroy {
  private socket: Socket | null = null;

  /**
   * 传入自定义parameter建立连接
   * @param parameterValue 自定义参数值
   */
  connect(parameterValue: string) {
    // 存在旧连接先销毁
    if (this.socket) {
      this.socket.removeAllListeners();
      this.socket.disconnect();
    }
    // 用新参数创建实例
    this.socket = new Socket({
      url: `${environment.socketUrl}/${SocketEnum.USER_LIST}`,
      options: {
        data: { parameter: parameterValue }
      }
    });
    this.socket.connect();
    return this.socket;
  }

  getActiveSocket() {
    return this.socket;
  }

  ngOnDestroy(): void {
    this.socket?.removeAllListeners();
    this.socket?.disconnect();
  }
}

组件中使用时直接传入需要的参数即可，后续需要更新参数时重新调用connect方法传新值，会自动断开旧连接建立新连接：

import { Component, OnInit } from '@angular/core';
import { UserListDynamicSocketService } from './user-list-dynamic-socket.service';

@Component({
  selector: 'app-demo',
  template: ''
})
export class DemoComponent implements OnInit {
  constructor(private dynamicSocket: UserListDynamicSocketService) {}

  ngOnInit(): void {
    // 传入自定义值'value2'初始化连接
    const socket = this.dynamicSocket.connect('value2');
    socket.fromEvent<User[]>('update-users').subscribe(list => {
      console.log(list);
    });
  }
}

注意事项 #

• Socket.IO客户端会在连接握手阶段将options.data的内容发送给服务端，连接建立后直接修改实例属性不会更新握手信息，必须用新配置重新建立连接才能让参数生效。
• socket.of()方法仅用于在已建立的连接上切换子命名空间，不支持传入新的握手配置参数，无法满足动态传参需求。

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