Angular中ngx-socket-io连接失败重复重试的异常处理

要解决服务未运行时Socket持续重连的问题，只需通过配置socket.io-client参数+监听连接错误事件即可实现仅一次尝试、失败即停止的需求，具体步骤如下：

1. 调整全局Socket配置 #

在app.module.ts中，给SocketIoModule.forRoot()的配置添加重连控制参数，关闭自动重连并限制尝试次数：

import { NgModule } from '@angular/core';
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';

const socketConfig: SocketIoConfig = {
  url: 'http://localhost:8080',
  options: {
    reconnection: false, // 核心：关闭自动重连
    reconnectionAttempts: 1, // 最多尝试1次（配合reconnection:false更保险）
    transports: ['websocket'] // 直接使用websocket传输，避免轮询干扰
  }
};

@NgModule({
  imports: [
    // ...其他模块
    SocketIoModule.forRoot(socketConfig)
  ]
})
export class AppModule { }

2. 自定义Socket服务捕获连接错误 #

创建自定义Socket服务（推荐做法，便于统一管理Socket逻辑），继承ngx-socket-io的Socket类，监听connect_error事件处理连接被拒绝的场景：

import { Injectable } from '@angular/core';
import { Socket } from 'ngx-socket-io';

@Injectable({
  providedIn: 'root'
})
export class AppSocketService extends Socket {
  constructor() {
    // 若已在全局配置过参数，这里可直接调用super()继承全局配置
    super();

    // 监听连接错误事件
    this.ioSocket.on('connect_error', (error: Error) => {
      if (error.message.includes('ERR_CONNECTION_REFUSED')) {
        console.error('Socket连接被拒绝，已停止尝试');
        // 可在此添加自定义逻辑：比如通知用户、更新组件状态等
      }
    });

    // 可选：监听连接失败事件
    this.ioSocket.on('connect_failed', () => {
      console.error('Socket连接尝试失败');
    });
  }
}

3. 在组件中使用自定义Socket服务 #

在需要使用Socket的组件中，注入自定义的AppSocketService而非原生Socket类：

import { Component, OnInit } from '@angular/core';
import { AppSocketService } from './app-socket.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private socket: AppSocketService) {}

  ngOnInit(): void {
    // 这里可执行Socket相关操作，如监听事件、发送消息等
  }
}

原理说明 #

socket.io-client默认开启自动重连机制，通过reconnection: false直接关闭该机制，确保连接失败后不会再次尝试。同时通过connect_error事件精准捕获ERR_CONNECTION_REFUSED错误，执行自定义业务逻辑。

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