从 NextJS 到节点后端的套接字连接

Question

我正在尝试实现从我的 NextJS 客户端（运行 on localhost:3000）到我的 NestJs 服务器（运行 on localhost:3003）的基本套接字连接。

服务器代码如下所示

ChatGateway.ts

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

@WebSocketGateway()
export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {

  @WebSocketServer() server: Server;
  private logger: Logger = new Logger('ChatGateway');

  @SubscribeMessage('msgToServer')
  handleMessage(client: Socket, payload: string): void {
    console.log(payload);
    this.server.emit('msgToClient', payload);
  }


  afterInit(server: Server) {
    this.logger.log('Init');
  }

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

  handleConnection(client: Socket, ...args: any[]) {
    this.logger.log(`Client connected: ${client.id}`);
    this.server.emit('msgToClient', "payload");
  }
}

ChatModule.ts

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { ChatGateway } from "./chat.gateway";


@Module({
  imports: [],
  controllers: [],
  providers: [ChatGateway],
})
export class ChatModule {}

AppModule.ts

@Module({
  imports: [TypeOrmModule.forRoot(), NewsletterModule, AuthModule, UsersModule, ListingsModule, ChatModule]
})
export class AppModule {
  constructor(private connection: Connection) {}

但是当我尝试从客户端连接到套接字时

import {
  io
} from "socket.io-client";



function Chat() {
  const socket = io("http://127.0.0.1:3003");

  useEffect(() => {
    console.log("chat useEffect")
    socket.emit('msgToServer', "message")
  }, [])
  socket.on('msgToClient', (message) => {
    console.log(message)
  })

我没有收到任何错误，但当我发出或尝试从服务器接收事件时也没有任何反应。

甚至服务器控制台也不记录发射事件。服务器上唯一发生的事情是客户端一直连接和断开连接，甚至我都没有做任何事情

知道为什么我无法连接到套接字，为什么即使我从客户端禁用了套接字连接，服务器仍然不断地连接和断开连接。

谢谢！

Answer 1

Socket.io 客户端需要是版本 2。版本 3 和 4 是重大更改，不与 v2 服务器通信。一旦 Nest v8 命中，socket.io v4 将默认使用。

从 NextJS 到节点后端的套接字连接

Socket connection from NextJS to a node backend

websocket

node.js

socket.io

next.js

nestjs