嵌套js websocket连接不适用于角度11

Question

创建了一个嵌套 js websocket 并尝试从 Angular 应用程序版本 11 连接到该应用程序。无法从 Angular 11 连接到套接字。我正在使用最新版本的 socket.io-client。

在 websocket 服务器日志中显示连接和断开连接。

嵌套js websocket文件：

import { Logger } from '@nestjs/common';
import { OnGatewayConnection, OnGatewayDisconnect, OnGatewayInit, SubscribeMessage, WebSocketGateway, WsResponse } from '@nestjs/websockets';
import { Socket,Server } from 'socket.io';

import { EventPattern } from '@nestjs/microservices';

@WebSocketGateway(3001)

export class AppGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect{
    private Logger = new Logger('AppGateway');

    afterInit(server: Server) {
        this.Logger.log("App Gateway Initialized");
    }

    handleConnection(client: Socket, ...args: any[]){
        this.Logger.log(`New client connected...: ${client.id}`);
        client.emit('connected', 'Successfully connected to the server.');
    }

    handleDisconnect(client: Socket) {
        this.Logger.log(`Client disconnected: ${client.id}`);
    }

    @SubscribeMessage('msgToServer')
    handleMessage(client:Socket, text:string):WsResponse<string> {
        this.Logger.log(`got new event`);
        return {event: 'msgToClient', 'data': text};
    }
}

angular websocket 服务文件：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { io } from 'socket.io-client';

@Injectable({
  providedIn: 'root'
})
export class WebSocketService {

  socket: any;

  constructor() {
    this.socket = io('http://localhost:3001');
    debugger;

    this.socket.on('connected', function() {
        console.log("connected !");
    });

  }

  listen(eventName: string) {
    return new Observable((subscriber) => {
      this.socket.on(eventName, (data) => {
        subscriber.next(data);
      })
    });
  }

  emit(eventName: string, data:any) {
    this.socket.emit(eventName, data);
  }
}

angular app.component.ts 文件：

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit{
  title = 'dashboard';


  constructor(
    private webSocketService: WebSocketService
  ) {}

  ngOnInit() {
    /*this.webSocketService.listen('msgToClient').subscribe((data) => {
      console.log(data);
    })*/

    this.webSocketService.listen('connected').subscribe((data) => {
      console.log(data);
    })
  }
}

Answer 1

我正在使用最新版本的 socket.io-client。

我相信您使用的是 socketIO 客户端 v4。 （如果您使用的是 v3，以下内容仍然适用）

基于NestJS Websocket documentation，NestJS socketIO 服务器仍处于 v2 中。

@nestjs/platform-socket.io 目前依赖于 socket.io v2.3 和 socket.io v3.0 客户端和服务器不向后兼容。但是，您仍然可以实现自定义适配器来使用 socket.io v3.0。请参阅此问题以获取更多信息。

如果你检查version compatibility，你会看到socketIO server v2和socketIO client v4不兼容。

但是，socketIO server v3 与 socketIO client v4 兼容。因此，我相信您可以查看this issue（如 NestJS 文档中所述）并尝试将您的 NestJS socketIO 服务器转换为支持 socketIO 客户端 v3。希望这也将支持 socketIO 客户端 v4。 （虽然我没有测试这个！）

希望这对您有所帮助。干杯? !!!