Node.js 大家好，我部署了MERN项目。我的聊天功能正常，但只有3秒钟

我的游戏聊天功能正常，但只有3秒钟，然后它不会显示来自服务器的数据，发送消息也不起作用。我将console.log（“action”）放在useEffect钩子中，发现聊天可以在控制台上打印“action”时进行

node.js：

let messages = ['test']
let nicknames = ['admin']

wss.on('connection', function connection(ws) {
    ws.send(JSON.stringify({nicknames: nicknames, messages: messages}))
    ws.on('message', function incoming(message, name) {
        messages.push(message)
        nicknames.push(name)
        ws.send(JSON.stringify({nicknames: nicknames, messages: messages}))
    })
})

server.listen(8888, () => console.log("web socket server started"))

反应：

文本状态：

const [message, setMessage] = useState('');
const [messages, setMessages] = useState([])
const [messagesLoaded, setMessagesLoaded] = useState(false)
const webSocket = new WebSocket('ws://localhost:8888')

发送消息：

    function handleChange(e) {
        setMessage(e.target.value)
    }

    function sendMessage(e) {
        e.preventDefault()
        webSocket.onopen = () => webSocket.send(message)
        setMessage("")
    }

从服务器获取消息：

    useEffect(() => {
        webSocket.onopen = () => {
            webSocket.onmessage = function (event) {
                setMessages(JSON.parse(event.data))
                setMessagesLoaded(true)
                console.log(messages.messages)
            }
        }
    })

//呈现消息：
if（messagesLoaded）{
返回(
messages.messages.map（项=>{
返回(
{item}

)
})
)
}

完整代码：

import React, { useState, useEffect } from 'react'

function Chat() {
    const [message, setMessage] = useState('');
    const [messages, setMessages] = useState([])
    const [messagesLoaded, setMessagesLoaded] = useState(false)
    const webSocket = new WebSocket('ws://localhost:8888')

    function handleChange(e) {
        setMessage(e.target.value)
    }

    function sendMessage(e) {
        e.preventDefault()
        webSocket.onopen = () => webSocket.send(message)
        setMessage("")
    }

    useEffect(() => {
        webSocket.onopen = () => {
            webSocket.onmessage = function (event) {
                setMessages(JSON.parse(event.data))
                setMessagesLoaded(true)
                console.log(messages.messages)
            }
        }
    })

    return (
        <div>
            <div>
                <ChatInterface />
            </div>
            <form onSubmit={sendMessage}>
                <input value={message} onChange={handleChange} placeholder="Say something..." />
                <button>Send</button>
            </form>
        </div>
    )
    function ChatInterface() {
        if (messagesLoaded) {
            return (
                messages.messages.map(item => {
                    return (
                        <div className="messageCard" key={Math.random()}>
                            <p>{item}</p>
                        </div>
                    )
                })
            )
        }

        else {
            return (
                <p className="center">Загрузка сообщений...</p>
            )
        }
    }
}

export default Chat

import React，{useState，useffect}来自“React”
函数Chat（）{
const[message，setMessage]=useState（“”）；
const[messages，setMessages]=useState（[]）
常量[messagesLoaded，setMessagesLoaded]=useState（false）
const webSocket=new webSocket（'ws://localhost:8888'）
功能手柄更改（e）{
设置消息（如目标值）
}
函数sendMessage（e）{
e、 预防默认值（）
webSocket.onopen=（）=>webSocket.send（消息）
设置消息（“”）
}
useffect（（）=>{
webSocket.onopen=（）=>{
webSocket.onmessage=函数（事件）{
setMessages（JSON.parse（event.data））
setMessagesLoaded（真）
console.log（messages.messages）
}
}
})
返回(
发送
)
函数接口（）{
if（messagesLoaded）{
返回(
messages.messages.map（项=>{
返回(
{item}

)
})
)
}
否则{
返回(

)
}
}
}
导出默认聊天

import React, { useState, useEffect } from 'react'

function Chat() {
    const [message, setMessage] = useState('');
    const [messages, setMessages] = useState([])
    const [messagesLoaded, setMessagesLoaded] = useState(false)
    const webSocket = new WebSocket('ws://localhost:8888')

    function handleChange(e) {
        setMessage(e.target.value)
    }

    function sendMessage(e) {
        e.preventDefault()
        webSocket.onopen = () => webSocket.send(message)
        setMessage("")
    }

    useEffect(() => {
        webSocket.onopen = () => {
            webSocket.onmessage = function (event) {
                setMessages(JSON.parse(event.data))
                setMessagesLoaded(true)
                console.log(messages.messages)
            }
        }
    })

    return (
        <div>
            <div>
                <ChatInterface />
            </div>
            <form onSubmit={sendMessage}>
                <input value={message} onChange={handleChange} placeholder="Say something..." />
                <button>Send</button>
            </form>
        </div>
    )
    function ChatInterface() {
        if (messagesLoaded) {
            return (
                messages.messages.map(item => {
                    return (
                        <div className="messageCard" key={Math.random()}>
                            <p>{item}</p>
                        </div>
                    )
                })
            )
        }

        else {
            return (
                <p className="center">Загрузка сообщений...</p>
            )
        }
    }
}

export default Chat