我如何调试（并希望修复）ionic 5 客户端和 NestJS 服务器之间的 websocket 连接

Question

我已经多次使用 MEAN 堆栈，但对于这个项目，我选择使用 ionic 5 和 NestJS 对其进行升级，现在我面临新的问题。首先，对于 Http 通信，我必须解决 CORS 问题，但多亏了这条简单的线，它现在已经过去了。

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors();
  await app.listen(3000);
}

因此，在让我的 NestJS 服务器通过 Http 与我的 Ionic 应用程序通信后，我希望他们有一个套接字连接来向我的应用程序添加聊天。据我所知，我的 NestJs 服务器运行良好，因为我已经能够使用此工具对其进行测试：https://socketserve.io/ 结果如下图所示

显示服务器正在运行的工具图片

问题是，当尝试与我的 ionic 客户端建立连接时，服务器获得许多不稳定的连接并且客户端根本没有收到任何答复（连接日志显示混乱的连接模式，如图所示下面，这些只是一个客户端尝试建立连接的日志）

服务器日志

这是我的代码

服务器端：

import {
  MessageBody,
  OnGatewayConnection,
  OnGatewayDisconnect,
  SubscribeMessage,
  WebSocketGateway,
  WebSocketServer,
} from '@nestjs/websockets';

@WebSocketGateway()
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer() server;
  users = 0;

  async handleConnection() {
    this.users++;
    console.log('connection, total: ' + this.users);
  }

  async handleDisconnect() {
    this.users--;
    console.log('disconnection, total: ' + this.users);
  }

  @SubscribeMessage('event')
  handleEvent(@MessageBody() data: string) {
    console.log(data);
    this.server.emit('event', 'anwser from server');
  }
}

客户app.module.ts

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

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

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { HttpClient, HttpClientModule } from '@angular/common/http';

import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
const config: SocketIoConfig = { url: 'http://localhost:3000', options: {}};

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

客户页面

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

@Component({
  selector: 'app-authentification',
  templateUrl: './authentification.page.html',
  styleUrls: ['./authentification.page.scss'],
})
export class AuthentificationPage implements OnInit {

  constructor(private socket: Socket) { }

  ngOnInit() {
    this.socket.connect();
    console.log('socket: ' + this.socket);
    this.socket.fromEvent('event').subscribe(data => {alert(data);});
  }

  socketTest() {
    this.socket.emit('event', 'from client');
    console.log('socket emited "event"');
  }

}

如何解决这个问题？ or/and 如果你能建议我一个工具来测试我的客户端套接字，就像我用 SocketServe.io 测试我的服务器一样。

Answer 1

根据您的日志，以及 Nest 是运行 socket.io v2.4.0 的最新版本（版本 7.x），它看起来像您的 websocket 客户端（ socket.io-client) 版本在 v3.x 或 v4.x 上，这与服务器 v2 不兼容。您应该按照链接评论中的描述将客户端降级到 v2.4.0 或 use a custom adapter，以使服务器和客户端再次兼容

Answer 2

好的，多亏了 Jay，我的插座才能正常工作！！！更改 verion 是 wright anwser，但我必须创建一个具有不同 angular 版本（11.x）的新离子项目才能使 ngx-socket-io 3.3.1 版本正常工作最后一次使用 nestJs 因为出于某种原因我在我的第一个 projet 事件中不明白我试图更改我的套接字版本，它被自动更新为 4.x 导致错误

我如何调试（并希望修复）ionic 5 客户端和 NestJS 服务器之间的 websocket 连接

How can i debug (and hopefully fix) a websocket connection between an ionic 5 client and a NestJS server

sockets

ionic-framework

nestjs