Node.js 从服务器（socket.io）接收数据后，console.log不工作

我目前正在使用socket.io构建聊天应用程序，在从服务器接收数据时，我很难理解为什么我的console.log不工作，即使我的MessageList状态已开始更新，我也在等待WDS的更新信号时收到此错误[HMR]

这是我的服务器代码。。。当它收到一个信号时，我用console.log检查了一下，它似乎正在工作

const express = require("express");
const socket = require("socket.io");
const path = require("path");
const cors = require("cors");

const app = express();
const PORT = process.env.PORT || 3003;

app.use(cors());
app.use(express.json()); //parses every json
app.use(express.urlencoded({ extended: false }));


const server = app.listen(PORT, console.log(`server is starting ${PORT}`));

io = socket(server);

io.on("connection", (socket) => {
  console.log("sockets are connected");

  socket.on("join", (data) => {
    socket.join(data.room);
    console.log(`The use joined the room ${data.room}`);
  });

  socket.on("send_message", (data) => {
    socket.to(data.room).emit("recieve_message", data.content);
    console.log(data);
  });

//   socket.on("user", (data) => {
//     console.log(data.name);
//     socket.to("1").emit("joined_user", data);
//   });

  socket.on("disconnect", () => {
    console.log("USER DISCONNECTED");
  });
});

// const express = require("express");
// const socket = require("socket.io");
// const app = express();
// const cors = require("cors");

// app.use(cors());
// app.use(express.json());

// const server = app.listen("3002", () => {
//   console.log("Server Running on Port 3002...");
// });

// io = socket(server);

// io.on("connection", (socket) => {
//   console.log(socket.id);

//   socket.on("join_room", (data) => {
//     socket.join(data);
//     console.log("User Joined Room: " + data);
//   });

//   socket.on("send_message", (data) => {
//     console.log(data);
//     socket.to(data.room).emit("receive_message", data.content);
//   });

//   socket.on("disconnect", () => {
//     console.log("USER DISCONNECTED");
//   });
// })

下面是客户端代码（app.js），具体看一下socket.on（“receive\u message”）的useEffect

导入“/App.css”； 从“React”导入React，{useffect，useState}； 从“socket.io客户端”导入io； 从“/contexts/contexts”导入{chatContext，logContext}； 从“/components/Chat”导入聊天； 从“/components/Logg”导入日志； 让插座； const CONNECTION_PORT=“localhost:3003/”； 函数App（）{ //登录前 const[logged，setLogged]=使用状态（false）； const[name，setName]=useState（“”）； 常数[房间，设置室]=使用状态（“”）； //登录后 const[message，setMessage]=useState（“”）； const[messageList，setMessageList]=useState（[]）； const[users，setUsers]=useState（[]）； useffect（（）=>{ 套接字=io（连接端口{ 传输：[“websocket”、“轮询”、“flashsocket”]， }); }, []); useffect（（）=>{ socket.on（“接收消息”，（数据）=>{ log（“你好”） setMessageList（[…messageList，data]）； }); }, []); 功能连接室（）{ emit（“join”，{room，name}）； setLogged（真）； } 函数sendMessage（）{ 让messageContent={ 房间：房间， 内容：{ 作者：姓名， 讯息:讯息,， }, }; 发出（“发送消息”，messageContent）； setMessageList（[…messageList，messageContent.content]）； 设置消息（“”）； } 返回( {！登录了吗( ) : ( )} ); } 导出默认应用程序； 这就是聊天应用程序的外观：

如果您能提供任何帮助，我将不胜感激。我不知道socket.on（）下的console.log为什么会不起作用。如果需要任何其他文件，请留下评论，我会添加它

import "./App.css";
import React, { useEffect, useState } from "react";
import io from "socket.io-client";
import { chatContext, logContext } from "./contexts/Contexts";
import Chat from "./components/Chat";
import Logg from "./components/Logg";

let socket;
const CONNECTION_PORT = "localhost:3003/";

function App() {
  //before login
  const [logged, setLogged] = useState(false);
  const [name, setName] = useState("");
  const [room, setRoom] = useState("");

  //after login
  const [message, setMessage] = useState("");
  const [messageList, setMessageList] = useState([]);
  const [users,setUsers] = useState([]);


  useEffect(() => {
    socket = io(CONNECTION_PORT, {
      transports: ["websocket", "polling", "flashsocket"],
    });
  }, []);

  useEffect(() => {
    socket.on("recieve_message", (data) => {
      console.log("hello")
      setMessageList([...messageList, data]);
      
    });

  }, []);

  function connectRoom() {
      socket.emit("join", { room, name });
    setLogged(true);
  }

  function sendMessage() {
    let messageContent = {
      room: room,
      content: {
        author: name,
        message: message,
      },
    };
    socket.emit("send_message", messageContent);

      setMessageList([...messageList, messageContent.content]);
    setMessage("");
  }

  return (
    <div className="App">
      {!logged ? (
        <logContext.Provider value={{ setName, setRoom, connectRoom }}>
          <Logg />
        </logContext.Provider>
      ) : (
        <>
          <chatContext.Provider
            value={{
              message,
              messageList,
              setMessage,
              sendMessage,
                    name,
                    users
            }}>
            <Chat />
          </chatContext.Provider>

        </>
      )}
    </div>
  );
}

export default App;