几条消息后，ReactJS socket.io-client聊天崩溃

如何解决几条消息后，ReactJS socket.io-client聊天崩溃

我正在尝试建立聊天，但是在收到几条消息后，前端会冻结并向控制台发送以下错误消息：

  websocket.js:248 WebSocket connection to 'ws://localhost:4000/socket.io/?EIO=3&transport=websocket&sid=oL1cw1JphDjZTWdrAAFC' failed: WebSocket is closed before the connection is established.

我不确定如何使用ReactJS实现套接字。我推测这个问题与useEffect有关。另外，在使用socketRef.current之前，我正在使用const socket = io.connect('http://localhost:4000')，希望它将作为解决该问题的有用信息。谢谢！

前端

import React,{useState,useEffect,useRef} from 'react';
import io from 'socket.io-client'

export default({user})=>{

    const [chat,setChat] = useState([])
    const [data,setData] = useState({name: user,msg:'' })
    const socketRef = useRef()
    
    useEffect(()=>{
        socketRef.current = io.connect('http://localhost:4000')
        socketRef.current.emit('new-user',user)
    },[user])

    useEffect(()=>{
        socketRef.current = io.connect('http://localhost:4000')

        socketRef.current.on('new-user',name =>{
            console.log("NEW USER")
            setChat([...chat,name + " has connected!"])
        })

        socketRef.current.on('message',({name,msg})=>{
            setChat([...chat,{name,msg}])
        })

        
    },[chat])

    

    const renderChat = () =>{

        const userChat = (data,i) => (<div key={i}> {data.name} : {data.msg} </div>)
       
        return  chat.map( (data,i) => {
          
        return userChat(data,i)
            })
    }

    const handleSubmitButton = (e) =>{
        e.preventDefault()
        const {name,msg} = data
        socketRef.current.emit('message',msg})
        setData({...data,msg:''})
    }

    const chatForm = () =>{

        return   <div className="card">
                <form onSubmit={handleSubmitButton}>
                    <h1>Messenger</h1>
                    <div className="name-field">
                        <textarea 
                        name="msg" 
                        cols="30" 
                        rows="10" 
                        id="outlined-multiline-static"
                        value = {data.msg} 
                        onChange={e=>setData({...data,[e.target.name]:e.target.value})}></textarea>
                    </div>
                    <input type="submit" value="Enter"/>
                </form>
            </div>
        }

    return <>
        
        {chatForm()}
        {renderChat()}

     </>
}

后端

const express = require('express')
const app = express()
const http = require('http').createServer(app)
const io = require('socket.io')(http)

const port = 4000

let users = {}

io.on('connect',socket =>{
    socket.on('message',msg}) =>{
        io.emit('message',msg})
    })
    
    socket.on('new-user',(name)=>{
        users[socket.id] = name
        io.emit('new-user',users[socket.id])
    })

    socket.on('disconnect',()=>{
        if(users[socket.id])
        console.log(users[socket.id] +' dc!')
        delete users[socket.id]
    })
})

http.listen(port,()=>{
    console.log('listening on port ' + port)
})