使用socket.io和ReactJS的实时聊天应用

问题描述

我正在使用ReactJS和socket.io构建一个实时聊天应用程序。我的应用程序快要用完了，但是卡在用户断开连接上。当用户离开房间时，断开连接消息将发出四次，如下图所示。

这是我的客户端代码（不是整个代码）

const ChatRoom = ({ location }) => {
    const { userName,setUserName } = useContext(ChatContext)
    const { roomCode,setRoomCode } = useContext(ChatContext)
    const [message,setMessage] = useState('')
    const [chats,setChats] = useState([])
    const ENDPOINT = 'localhost:5000'
    const socket = io(ENDPOINT)
    
    useEffect(() => {
        const { userName,roomCode } = queryString.parse(location.search)
        
        setUserName(userName)
        setRoomCode(roomCode)

        socket.emit('chatroom-join',{userName,roomCode})

        return () => {
            socket.emit('disconnect',{userName})
            socket.off()
        }
    },[location.search,ENDPOINT])

 useEffect(() => {
        socket.on('message',({userName,message}) => {
            setChats(chats => [...chats,message}])
        })
    },[])

我的服务器端代码

// Socket.io API
io.on('connection',(socket) => {
    socket.on('chatroom-join',roomCode}) => {
        console.log('User joined')
        socket.join({roomCode})
        io.to({roomCode}).emit('message',{userName: 'admin',message: `${userName} has joined`})
    })
    
    socket.on('message',message}) => {
        io.emit('message',message})
    })

    socket.on('disconnect',() => {
        io.emit('message',message: 'An user has left'})
        console.log('User disconnected')
        socket.disconnect(true)
    })
})

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

livechat reactjs reactjs socket.io