nest js websocket 连接不适用于 angular 11

Question

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

在 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

I am using latest version of socket.io-client.

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

基于NestJS Websocket documentation，NestJS socketIO 服务器仍然是 v2.

@nestjs/platform-socket.io currently depends on socket.io v2.3 and socket.io v3.0 client and server are not backward compatible. However, you can still implement a custom adapter to use socket.io v3.0. Please refer to this issue for further information.

如果您检查 version compatibility，您将看到 socketIO 服务器 v2 与 socketIO 客户端 v4 不兼容。

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

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

nest js websocket 连接不适用于 angular 11

nest js websocket connection is not working with angular 11

websocket

nestjs

angular11