应用程序不更新 useEffect Socket。io/react

Question

我有一个简单的聊天应用程序问题，当我在其他客户端发送消息时看不到更新，这是后端

const express = require('express')
const cors = require('cors')
const http = require('http')
const {Server} = require('socket.io')

const app = express()
app.use(cors())

const server = http.createServer(app)
const io = new Server(server,{cors:'http://localhost:3000'})

let mensaje

io.on('connection',socket =>{
    socket.on('new',data =>{
        mensaje = data
        socket.emit('mensaje',mensaje)
    })
})

server.listen(3001,() =>{
    console.log('Server online')
})

和前端

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

const socket = io('http://localhost:3001')


function App() {
  const [user,set_user] = useState('')
  const [mensaje,set_mensaje] = useState('')
  const [mensajes,set_mensajes] = useState('')

  const handle_input = ({target}) =>{
    set_user(target.value)
  }
  const handle_message = ({target}) =>{
    set_mensaje(target.value)
  }
  const handle_click = () => {
    socket.emit('new',{user,mensaje})
  }

  useEffect(() => {
    socket.on('mensaje',data =>{
      set_mensajes(data)
    })
  }, [socket])

  return (
    <main>
      <div>
        <h1>Hi {user}</h1>
        <input type="text" onChange={handle_input}/>
        <h2>what do u want to say today</h2>
        <input type="text" onChange={handle_message}/>
        <button onClick={handle_click}>Send</button>
      </div>
      <div>
        <h1>{mensajes.user}</h1>
        <p>{mensajes.mensaje}</p>
        <br/>
      </div>
    </main>
  )
}

export default App;

他们是来自所有

的版本

"快递": "^4.17.3", "socket.io": "^4.4.1", “反应”：“^ 18.0.0”， "socket.io-客户端": "^4.4.1",

我发现如果添加

...
socket.emit('mensaje',mensaje)
socket.broadcast.emit('mensaje',mensaje)

后端运行良好，但我知道这不是正确的方法

Answer 1

你不需要在这里使用useEffect。仅使用

socket.on('mensaje',data =>{
  set_mensajes(data)
})

Answer 2

您应该在后端使用 io.emit('mensaje',mensaje) 而不是 socket.emit('mensaje',mensaje)。 See here.

应用程序不更新 useEffect Socket。io/react

app don´t update useEffect Socket.io/react

javascript

node.js

reactjs

express

sockets