tengo un problema con una aplicación de chat simple, cuando envío un mensaje en los otros clientes no ven la actualización, este es el backend

 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') })

y la interfaz

 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;

son la versión de todos

"express": "^4.17.3", "socket.io": "^4.4.1", "reaccionar": "^18.0.0", "socket.io-cliente": "^4.4.1",

encontré si agregar

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

en el backend funciona bien, pero sé que esa no es la forma correcta de hacerlo