状态重置每个套接字事件发生

Question

我试图使聊天功能，将集成到我的Nextjs应用程序。我遵循文档，但是聊天日志重置了每一个套接字事件。代码如下：

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

export default function Chat() {

    const [chats, setChats] = useState([])
    let socket = io(':3000')
    
    useEffect(() => {

        socket.on('chat message', function(msg) {
    
            console.log(chats)
            setChats([
                ...chats,
                msg
            ]) 
            window.scrollTo(0, document.body.scrollHeight);  
        }.bind(this));

    }, [])

    const submitHandler = (e) => {
        e.preventDefault()
        let input = document.getElementById('input');
        if (input.value) {      
            socket.emit('chat message client', input.value);
            input.value = '';    
        }
    }
    
    console.log(chats)

    return (
        <div className='container mt-5 pt-5'>
            <ul id="messages">
                {
                    chats.map(chat => <li>{chat}</li>)
                }
            </ul>    
            <form id="form" onSubmit={submitHandler}>      
                <input id="input" autocomplete="off" />
                <button>Send</button>    
            </form>
        </div>
    )
}

快件聊天服务器：

const express = require('express');
const cors = require("cors");
const socket = require("socket.io");

const app = express();

app.use(cors())

const server = app.listen(3000, () => {
    console.log('listening on *:3000');
});

const io = socket(server, {
    cors: {
        origin: "http://localhost:5000",
        methods: ["GET", "POST"],
        allowedHeaders: ["my-custom-header"],
        credentials: true
    }
});

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
    console.log("connected")
    socket.on('chat message client', (msg) => {
        console.log('message: ' + msg);
        io.emit('chat message', msg)
    });
});

状态“聊天”只包含最新消息，因为每次聊天设置为空数组。

我试图更改useEffect钩子运行，每一次聊天都更改如下：

useEffect(() => {

        socket.off('chat message').on('chat message', function(msg) {
    
            console.log(chats)
            setChats([
                ...chats,
                msg
            ]) 
            window.scrollTo(0, document.body.scrollHeight);  
        }.bind(this));

    }, [chats])

它工作了大约10次，但之后显示了web套接字连接失败的错误。

似乎聊天功能使套接字连接每一次。(这就是为什么我试图添加.off(‘聊天消息’)，似乎没有正常工作)。我不知道它是怎么修好的。请告诉我任何建议。

Answer 1

这个问题可能会发生，因为在每次使用"setChat“函数设置新状态时，您都在初始化套接字变量。

尝试将变量移出组件之外，例如：

let socket = null

export default function Chat() {

const [chats, setChats] = useState([])    

useEffect(() => {
    if(socket == null)// Ensure that this variable is not initialized
        socket = io(':3000')
    socket.on('chat message', function(msg) {

        console.log(chats)
        setChats([
            ...chats,
            msg
        ]) 
        window.scrollTo(0, document.body.scrollHeight);  
    }.bind(this));

    }, [])
}

Answer 2

我对@humam ayad的代码做了一些修改：

let socket = null

export default function Chat() {

    const [chats, setChats] = useState([])
    
    useEffect(() => {

        if(socket == null) socket = io(':3000')

        socket.off('chat message').on('chat message', function(msg) {
    
            console.log(chats)
            setChats([
                ...chats,
                msg
            ]) 
            window.scrollTo(0, document.body.scrollHeight);  
        }.bind(this));

    }, [chats])