React js套接字io发射

Question

im用mern和socket.io构建了一个聊天应用程序。io，我试图用回调发出，但它发出的是函数而不是值，当我删除setList(l=>[…l，data](时，它发出(第一个问题(。第二个问题是，当我收到消息并将其推到列表中两次时(useEffect(。

客户端：

import React,{ useState,useEffect } from 'react';
import socketIOClient from "socket.io-client";
function Room(props) {
const [message,setMessage]=useState('');
const [list, setList] = useState([]);
const ENDPOINT = "http://localhost:5000";
const socket = socketIOClient(ENDPOINT, {
credentials: true
});
const sendMessage=(e)=>{
e.preventDefault(); 
let data=message;
//the first problem is here
socket.emit('send',(data)=>{
setList(l=>[...l,message])
});


}
useEffect(()=>{
//the second problem is here
socket.on('rec',(data)=>{
setList(l=>[...l,data])           
})
},[])
return (
<div>
<div>
{list!==[] && list!==null && list.map((el,i)=>{
return <p key={i}>{el}</p>
})}
</div>
<div>
<form>
<input value={message} onChange={e=>setMessage(e.target.value)} />
<button onClick={sendMessage}>Send</button>
</form>
</div>
</div>
)
}
export default Room;

服务器端：

const io = new Server(server, { cors: { origin: '*'}});
app.use((req,res,next)=>{
res.header("Access-Control-Allow-Credentials", true);
next();
})
dotenv.config();
io.on("connection", (socket) => {
socket.emit('greeting', {
greeting: 'Hello Client'
})

socket.on("send", (data) => {
io.emit("rec", data);
console.log(data)
});
});

server.listen(process.env.PORT, err => err?console.log('server error'):console.log(`server is running on PORT ${process.env.PORT}`));

Answer 1

//the first problem is here
socket.emit('send',(data)=>{
setList(l=>[...l,message])
});

必须是

socket.emit('send', message, (data)=>{
setList(l=>[...l,message])
});

(你错过了辩论，请参阅https://socket.io/docs/v4/client-api/#socketemiteventname-args(

2(

useEffect(()=>{
//the second problem is here
socket.on('rec',(data)=>{
setList(l=>[...l,data])           
})
},[])

这并不是一个真正的问题，因为您通过使用setList两次，在这里和sendMessage中添加了相同的消息。我想对于聊天应用程序，您需要使用不同的响应更改io.emit("rec", data);。