useEffect 无法与我的组件内的 socket.on 一起使用

Question

我目前正在尝试接收组件 ListeRoom 中的所有活动房间。我的 useEffect 似乎不起作用，因为我目前在客户端没有收到任何信息。在服务器端，我可以看到所有活动房间的列表都是通过 getActiveRooms() 的 console.log 返回的。我做错了什么吗？

服务器端

const express = require('express');
const app = express();
const http = require('http');
const cors = require('cors'); 
const { Server } = require("socket.io");
app.use(cors());

const PORT = 3001;
const server = http.createServer(app);

const io = new Server(server, { 
    cors: {
        origin: 'http://localhost:3000',
        methods: ["GET", "POST"],
    }
});

function getActiveRooms(io) {
    // Convert map into 2D list:
    // ==> [['4ziBKG9XFS06NdtVAAAH', Set(1)], ['room1', Set(2)], ...]
    const arr = Array.from(io.sockets.adapter.rooms);
    // Filter rooms whose name exist in set:
    // ==> [['room1', Set(2)], ['room2', Set(2)]]
    const filtered = arr.filter(room => !room[1].has(room[0]))
    // Return only the room name: 
    // ==> ['room1', 'room2']
    const res = filtered.map(i => i[0]);
    console.log(`Liste des rooms actives : ${res}`)
    return res;
}

io.on("connection", (socket) => {
    socket.on("room_list", (data) => {
        socket.join(data); //data is a room called listroom that will receive all rooms (string)
        socket.to(data).emit("receive_room", getActiveRooms(io)); 
    });
});

server.listen(PORT, () => {
    console.log(`Serveur lancé sur le port ${PORT}`);
});

客户端（它是一个名为 ListeRoom 的组件）

function ListeRooms({socket, username}) {

    const PORT = 3001;
    const socket = io.connect(`http://localhost:${PORT}`); //Pour connecter le frontend au backend

    const classes = useStyles(); 
    const [roomList, setRoomList] = useState([]);
    
    useEffect(() => {
        socket.on("receive_room", (data) => {
            console.log('Data fetched',data)
            setWebData(data);
        });
        socket.on("connect_error", () => {
          console.error("socket error!");
        socket.close();
      });
       // remove the socket listener when component left!
       return () => {
       socket.close();
      }
    }, []);
    // second use effect if web data changed!
    useEffect(() => {
      if(webData){
        // if webData is array of objects
        setRoomList([...roomList, ...webData]);
        //if webData is just objects
         setRoomList([...roomList, webData]);
        //refresh the local state
         setWebData([]);
       }
    },[webData])

Answer 1

在客户端，即使您从服务器收到响应，它也不会更新您应该使用 2 个 useEffects 函数的状态：类似这样。

// new file.js
import io from "socket.io-client";
export const socket = io(process.env.API_URL || 'http://localhost:3000');

// component.jsx
function ListeRooms({username}) {
import socket from 'path/to/newfile'
const classes = useStyles(); 
const [roomList, setRoomList] = useState([]);
const [webData , setWebData] = useState([]);

useEffect(() => {
    socket.on("receive_room", (data) => {
        console.log('Data fetched',data)
        setWebData(data);
    });
    socket.on("connect_error", () => {
      console.error("socket error!");
    socket.close();
  });
   // remove the socket listener when component left!
   return () => {
   socket.close();
  }
}, []);
// second use effect if web data changed!
useEffect(() => {
  if(webData){
    // if webData is array of objects
    setRoomList([...roomList, ...webData]);
    //if webData is just objects
     setRoomList([...roomList, webData]);
    //refresh the local state
     setWebData([]);
   }
},[webData])