嵌套 js websocket 连接不适用于 angular 11

问题描述

创建了一个嵌套的 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);
    })
  }
}

解决方法

我使用的是最新版本的 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 服务器 v2 与 socketIO 客户端 v4 不兼容。

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

希望对你有帮助。干杯? !!!