Web 套接字在反应应用程序中不断断开连接。后端是 Nestjs

Question

我正在尝试创建一个聊天应用程序，但客户端响应应用程序中的 Web 套接字由于某种原因一直断开连接。如果我尝试从 Vue 应用程序建立相同的连接，它工作正常。

下面是我的服务器端和客户端代码。

服务器

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

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

    @WebSocketServer()
    private server: Server;

    private logger: Logger = new Logger('AppGateway');

    @SubscribeMessage('events')
    handleEvent(client: Socket, data: string): string {
        console.log(data);
        client.emit('events', { name: 'Nest' }, data => console.log(data));
        return data;
    }

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

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

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

    public handleConnection(client: Socket, ...args: any[]) {
        this.logger.log(`Client connected: ${client.id}`);
    }
}

客户端

import React from 'react';
import { io } from "socket.io-client";

const SERVER = "http://localhost:4000";
export class App extends React.Component {

    state = {
        channels: null,
        socket: null,
        channel: null
    }
    socket;

    componentDidMount() {
        this.configureSocket();
    }

    configureSocket = () => {
        var socket = io(SERVER);

        socket.on('connection', () => {
            console.log("here");
            socket.on('disconnect', (reason) => {
                console.log(reason);
            });
        });

        socket.on('msgToClient', (channel) => {
            console.log(channel);
        });
        socket.on('connect_error', (error) => {
            console.log(error);
        });
        socket.on('message', message => {
            console.log(message);
        });
        socket.on('disconnect', (reason) => {
            console.log(reason);
        });

        this.socket = socket;
    }

    handleSendMessage = () => {
        console.log("trying");

        this.socket.emit('send-message', { name: 'myname', text: 'mytext' });
    }

    render() {

        return (
            <div>
                help
                <button onClick={this.handleSendMessage}>send</button>
            </div>
        );
    }
}

从前端也没有记录任何事件。 从后端 套接字连接，然后断开连接。因此开始一次又一次地重新连接。没有保持连接。

知道为什么会这样吗？

Answer 1

Nest 尚不支持 Socket.io v3。您可以find the issue here 使用自定义适配器使它们一起工作。