React Hooks+TypeScript通过Socket.IO连接Express+Mongoose后端问题

我正尝试让基于React Hooks+TypeScript的前端应用，通过Socket.IO连接至集成Mongoose的Node.js Express后端API，但遇到了连接问题，以下是我的前后端代码及相关截图：

前端TSX代码 #

import React, { useEffect, useState } from "react";
import io from "socket.io-client";

const socket = io("http://localhost:4000");

const Chat: React.FC = () => {
  const [messages, setMessages] = useState<string[]>([]);
  const [inputValue, setInputValue] = useState("");

  useEffect(() => {
    // 接收服务器消息的事件
    socket.on("chat message", (msg: string) => {
      setMessages((prevMessages) => [...prevMessages, msg]);
    });

    return () => {
      // 组件卸载时清除事件监听
      socket.off("chat message");
    };
  }, []);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    socket.emit("chat message", inputValue);
    setInputValue("");
  };

  return (
    <div>
      <h1>Walkie Talkie Chat</h1>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
        <li>final</li>
      </ul>
      <form onSubmit={handleSubmit}>
        <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default Chat;

后端TS代码 #

import cors from "cors";
import express from "express";
import http from "http";
import mongoose from "mongoose";
import socketio from "socket.io";

// 配置Express
const app = express();
app.use(express.json());
app.use(cors());

const PORT = 4000;

// Socket IO配置
const server = http.createServer(app);
app.set("port", PORT);
const io = new socketio.Server(server);

io.on("connection", (socket: socketio.Socket) => {
  console.log("新客户端连接");

  // 接收客户端消息的事件
  socket.on("chat message", (msg: string) => {
    console.log("收到消息: " + msg);

    // 将消息发送给所有连接的客户端，包括发送者
    io.emit("chat message", msg);
  });

  // 处理客户端断开连接事件
  socket.on("disconnect", () => {
    console.log("客户端断开连接");
  });
});

const dbName = process.env.dbName;
const dbUsername = process.env.dbUsername;
const dbPassword = process.env.dbPassword;

mongoose
  .connect(`mongodb+srv://${dbUsername}:${dbPassword}@cluster.something.mongodb.net/${dbName}?retryWrites=true&w=majority`)
  .then(() => {
    console.log("数据库连接成功");
  })
  .catch((error) => {
    console.error("数据库连接失败:", error);
  });

app.get("*", (_, res) => {
  res.status(404).send("无相关内容");
});

// 启动服务器
app.listen(PORT, () => {
  console.log(`服务器已启动，端口号：${PORT}`);
});

连接问题截图 #

问题解决方法 #

1. 核心问题：Socket.IO绑定的服务器未启动
   后端代码中，你创建了http.Server实例用于Socket.IO，但最后启动的是Express的app.listen()，这会创建一个全新的服务器，导致Socket.IO绑定的服务器并未运行。将启动代码改为：

   // 替换原有的app.listen
   server.listen(PORT, () => {
     console.log(`服务器已启动，端口号：${PORT}`);
   });
   

2. Socket.IO跨域配置优化
   为避免跨域连接失败，在创建Socket.IO实例时显式配置CORS规则：

   const io = new socketio.Server(server, {
     cors: {
       origin: "http://localhost:3000", // 替换为你的前端实际地址
       methods: ["GET", "POST"]
     }
   });
   

3. 前端连接容错处理
   可以给前端Socket连接添加错误监听，便于排查问题：

   useEffect(() => {
     socket.on("connect_error", (err) => {
       console.error("Socket连接错误:", err);
     });
   
     socket.on("chat message", (msg: string) => {
       setMessages((prevMessages) => [...prevMessages, msg]);
     });
   
     return () => {
       socket.off("chat message");
       socket.off("connect_error");
     };
   }, []);
   

内容的提问来源于stack exchange，提问作者LuisEnMarroquin