Почему у меня дублируется подключение пользователя по WebSocket?

Question

YungJabo @YungJabo

Почему у меня дублируется подключение пользователя по WebSocket?

Я хочу подключаться по websocket. На React.js я по консоли вижу, что подключаюсь ровно 1 раз:

Вот компонент с подключением к Websocket:

import { createContext, useEffect, useRef, useState } from "react";
import "./global.scss";
import { Home } from "./pages/HomePage";
import { io } from "socket.io-client";

export const socketContext = createContext();

function App() {
  const [socket, setSocket] = useState(null);
  useEffect(() => {
    if (socket) return;
    console.log(1);
    const newSocket = io("http://localhost:3000");

    newSocket.on("connect", () => {
      console.log("Connected to WebSocket server");
      setSocket(newSocket);
    });

    // Слушаем событие "message"
    newSocket.on("message", (data) => {
      console.log("New message:", data);
    });

    return () => {
      newSocket.disconnect();
      setSocket(null);
    };
  }, []);
  return (
    <>
      <socketContext.Provider value={socket}>
        <div className="page">
          <Home />
        </div>
      </socketContext.Provider>
    </>
  );
}

export default App;

На Nest я вывожу в консоль подключенного пользователя (и отключенного):

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

import { ChatService } from './chat.service';

@WebSocketGateway({ cors: { origin: '*' } })
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer()
  server: Server;

  constructor(private readonly chatService: ChatService) {}

  handleConnection(client: Socket): void {
    console.log(`User connected: ${client.id}`);

    // const connectedClients = Array.from(this.server.sockets.sockets.values());
    // const connectedUserIds = connectedClients.map((socket) => socket.id);
    // this.server.emit('message', {
    //   type: 'info',
    //   message: `Current users: ${connectedUserIds.join(', ')}`,
    // });
  }

  handleDisconnect(client: Socket): void {
    console.log(`User disconnected: ${client.id}`);
  }

  @SubscribeMessage('message')
  async handleMessage(
    @MessageBody() data: { type: string; sender: number; message: string },
  ): Promise<void> {
    switch (data.type) {
      case 'message':
        await this.chatService.addMessage(data);
      default:
        console.log('unknown message');
    }
  }
}

В консоль на Nest.js выводится так:

User disconnected: 046SGN3h47c3boRlAAAF
User disconnected: 046SGN3h47c3boRlAAAF
User connected: 7xMDHH1TCWlVQ8A1AAAH
User connected: 7xMDHH1TCWlVQ8A1AAAH

Не могу понять, в чем причина. Если бы происходит ререндер компонента, и вызывалось бы несколько подключений - это одно. Тут не могу разобраться

P.S. у меня также при отправке сообщений через socket.emit приходят 2 сообщения на Nest:

@SubscribeMessage('message')
  async handleMessage(
    @MessageBody() data: { type: string; sender: string; message: string },
  ): Promise<void> {
    console.log(data);
    switch (data.type) {
      case 'message':
        await this.chatService.addMessage(data);
      default:
        console.log('unknown message');
    }
  }