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

Posted 2023-03-10

【中文标题】从 NextJS 到节点后端的套接字连接

【英文标题】：Socket connection from NextJS to a node backend

【发布时间】：2021-07-06 04:04:24

【问题描述】：

我正在尝试实现从 NextJS 客户端（在 localhost:3000 上运行）到我的 NestJs 服务器（在 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)
  )

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

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

知道为什么我不能连接到套接字，为什么即使我从客户端禁用套接字连接，服务器也会不断地连接和断开连接。

谢谢！

【问题讨论】：

你使用的socket.io是什么版本的？

@JayMcDoniel 客户端是 ^4.0.1 并且在服务器端 "@nestjs/platform-socket.io" : ^7.6.15

【参考方案1】：

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

【讨论】：

谢谢！将客户端版本更改为 2.0.0 解决了该问题。奇怪的是我们必须使用旧版本..

嗯，版本必须更新，更新到主要版本的同时仍然提供与旧版本的向后兼容性很困难，因此 Nest 团队决定最好的办法是等到 Nest v8进行重大更新。我们在 v7 期间尝试过使用 Fastify，但最终在一个小版本中遇到了重大更改，因此我们试图再次避免这种情况。