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

Posted 2023-03-10

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

【英文标题】：Web socket constantly disconnecting in react app. Backend is Nestjs

【发布时间】：2021-04-08 01:19:09

【问题描述】：

我正在尝试创建一个聊天应用程序，但客户端响应应用程序中的 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>
        );
    

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

知道为什么会这样吗？

【问题讨论】：

你安装的是什么版本的socket.io？

"socket.io-client": "^3.0.4" "socket.io": "^3.0.4"

解决方案："socket.io-client": "^2.3.0" "socket.io": "^2.3.0" 工作正常。或使用ws 代替socket.io

【参考方案1】：

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

【讨论】：

谢谢。让我试着回复你

谢谢。它真的很有帮助。 p.s -- github.com/nestjs/nest/tree/master/sample/16-gateways-ws 让我的生活变得非常轻松。谢谢:)