Ionic项目中ngx-socket-io的emit与fromEvent方法失效问题

问题现象 #

• 已成功建立与Java后端Socket.io服务器的连接，服务器控制台能看到连接日志
• 无法通过emit方法向服务器发送消息
• 浏览器网络标签能看到服务器发送的get_message事件及消息内容，但应用控制台无任何日志输出
• 组件中connect、get_message事件的订阅回调均未触发打印

环境依赖 #

项目基于Ionic 6.x开发，核心依赖版本如下：

"dependencies": {
    "@angular/common": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@capacitor/app": "4.1.1",
    "@capacitor/camera": "^4.1.4",
    "@capacitor/core": "4.5.0",
    "@capacitor/filesystem": "^4.1.4",
    "@capacitor/haptics": "4.1.0",
    "@capacitor/keyboard": "4.1.0",
    "@capacitor/preferences": "^4.0.2",
    "@capacitor/status-bar": "4.1.0",
    "@ionic/angular": "^6.1.9",
    "@ionic/pwa-elements": "^3.1.1",
    "ionicons": "^6.0.3",
    "ngx-socket-io": "^4.4.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  }

核心代码 #

AppModule配置 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
const config: SocketIoConfig = { url: 'http://localhost:8086?room=a&token=abc123', options: {transports: [ 'websocket','polling']}};

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(),
    SocketIoModule.forRoot(config),
     AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

Tab1Page组件代码 #

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

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  constructor(private socket:Socket) {}

  ngOnInit() {
    this.socket.connect();

    let name = `user-${new Date().getTime()}`;
    
    this.socket.emit('send_message',  {"room":"a", "type":"CLIENT","message":"my 1st message"});
    
    this.socket.fromEvent('get_message').subscribe(message => {
      console.log("message received is "+message)
    });

    this.socket.fromEvent('connect').subscribe(message => {
      console.log("Connected now "+message)
    });
  }

  sendMessage() {
    this.socket.emit('send-message', {"room":"a", "type":"CLIENT","message":"my 2nd message"});
  }

  ionViewWillLeave() {
    this.socket.disconnect();
  }

  connect(){

  }
}

排查与修复建议 #

1. 事件名一致性检查

   • 组件中发送消息使用了两个不同的事件名：send_message和send-message，需确认后端是否同时监听了这两个事件
   • 核对后端发送的事件名是否严格等于get_message（Socket.io事件名区分大小写）

2. 调整连接与消息发送时序

   • ngx-socket-io默认会自动建立连接，手动调用this.socket.connect()可能导致时序问题。建议移除手动连接，改为在connect事件触发后再发送消息：

     ngOnInit() {
       this.socket.fromEvent('connect').subscribe(() => {
         console.log("Connected now");
         // 连接成功后再发送消息
         this.socket.emit('send_message', {"room":"a", "type":"CLIENT","message":"my 1st message"});
       });
     
       this.socket.fromEvent('get_message').subscribe(message => {
         console.log("message received is ", message);
       });
     }
     

3. 版本兼容性验证

   • ngx-socket-io@4.4.0依赖的Socket.io客户端版本为^4.0.0，需确认Java后端使用的Socket.io服务器版本是否与客户端兼容（建议使用同大版本，如4.x）

4. CORS配置检查

   • 确认后端是否允许Ionic默认端口（http://localhost:8100）的跨域请求，且放开所有Socket.io相关的请求头部与方法

5. 开启调试日志

   • 在Socket配置中开启调试模式，查看底层连接细节：

     const config: SocketIoConfig = { 
       url: 'http://localhost:8086?room=a&token=abc123', 
       options: {
         transports: [ 'websocket','polling'],
         debug: true // 开启调试日志
       }
     };
     

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