React应用与Node后端集成Socket.IO失败：Socket无法连接

核心问题1：客户端连接协议错误 #

你的服务器是基于HTTP协议创建的，但客户端代码中使用了https://localhost:8000作为连接地址，这会导致连接失败。需要将协议修正为http://。

核心问题2：React Strict Mode导致副作用重复执行 #

控制台打印两次"hi"是React开发环境下Strict Mode的正常行为，它会重复执行副作用函数以检测潜在问题，生产环境不会出现该现象。

修正后的客户端代码（App.jsx） #

import './App.css';
import { io } from 'socket.io-client';
import React, { useEffect, useRef } from 'react';

function App() {
    const socket = useRef();

    useEffect(() => {
        // 修正连接协议为http
        socket.current = io('http://localhost:8000');
        
        // 监听连接成功事件，确保在连接建立后再发送消息
        socket.current.on('connect', () => {
            console.log('Socket连接成功');
            socket.current.emit('join', { message: 'hi!' });
        });

        // 组件卸载时断开Socket连接，避免内存泄漏
        return () => {
            socket.current.disconnect();
        };
    }, []);

    return <div className="App">This is just a placeholder</div>;
}

export default App;

优化后的服务器代码（server.js） #

const express = require('express');
const cors = require('cors');
const dotenv = require('dotenv');
const { Server } = require('socket.io');

dotenv.config({ path: './config.env' });
const app = express();
app.use(express.json());
app.use(cors());
const port = process.env.PORT || 8000;

const http = require('http').createServer(app);
// 使用Server类初始化Socket.IO，代码更清晰
const io = new Server(http, {
    cors: {
        origin: '*', // 开发环境可临时使用*，生产环境建议指定具体域名
    },
});

io.on('connection', (socket) => {
    console.log(`user connected from ${socket.handshake.address}`);
    
    socket.on('join', (data) => {
        console.log(data.message);
    });

    // 监听断开连接事件，便于调试
    socket.on('disconnect', () => {
        console.log('user disconnected');
    });
});

http.listen(port, () => {
    console.log(`App running on port ${port}`);
});

额外检查点 #

• 版本兼容性：确保服务器端socket.io和客户端socket.io-client版本一致，版本不兼容会导致连接失败。可通过以下命令查看版本：
  • 服务器端：npm list socket.io
  • 客户端：npm list socket.io-client
• 端口占用：确认8000端口未被其他程序占用，可通过lsof -i :8000（Mac/Linux）或netstat -ano | findstr :8000（Windows）检查。

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