使用Socket.io与React时无法连接服务器的问题求助

问题描述 #

我正在尝试将Socket.io与React结合使用，已遵循Socket.io官方提供的模板，但不清楚如何让socket成功建立连接。

当前我的socket.js文件代码如下：

import { io } from 'socket.io-client';

const URL = process.env.NODE_ENV === 'production' ? undefined : 'http://localhost:3000';

export const socket = io(URL);

App.js文件代码如下：

import React, { useState, useEffect } from 'react';
import { socket } from './socket';

export default function App() {
  const [isConnected, setIsConnected] = useState(socket.connected);
  const [fooEvents, setFooEvents] = useState([]);

  useEffect(() => {
    function onConnect() {
      setIsConnected(true);
    }

    socket.on('connect', onConnect);
    
    return () => {
      socket.off('connect', onConnect);
    };
  }, []);

  return (
    <div className="App">
    </div>
  );
}

当我console.log socket或socket.connect时，发现并未建立连接。我不确定是否遗漏了某个'listen'配置，但不清楚具体应该在哪里添加。我曾按照教程重写代码，但仍存在无法连接的问题。我已安装所需依赖（express、node、socket.io、socket.io-client）并运行node socket.js开始监听，但没有任何反应。

排查与修复步骤 #

1. 确保服务端正确配置Socket.io监听 #

你运行node socket.js但无反应，大概率是服务端代码未正确初始化Socket.io。服务端需要绑定到Express服务器并开启监听，示例代码：

// 服务端 socket.js
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
// 本地开发需配置跨域允许React访问
const io = new Server(server, {
  cors: {
    origin: "http://localhost:3000", // React项目的运行地址
    methods: ["GET", "POST"]
  }
});

// 监听客户端连接事件
io.on('connection', (socket) => {
  console.log('客户端已连接:', socket.id);
  // 可在此添加自定义事件逻辑
});

// 服务端端口要避开React默认的3000
const PORT = 3001;
server.listen(PORT, () => {
  console.log(`服务端运行在 http://localhost:${PORT}`);
});

注意：React默认占用3000端口，服务端必须使用其他端口（如3001），否则会出现端口冲突导致服务无法启动。

2. 修正客户端Socket连接地址 #

服务端使用3001端口后，客户端socket.js的连接地址需同步修改：

// 客户端 socket.js
import { io } from 'socket.io-client';

const URL = process.env.NODE_ENV === 'production' ? undefined : 'http://localhost:3001';

export const socket = io(URL);

3. 完善客户端连接状态监听 #

仅监听connect事件不足以排查问题，建议添加disconnect和connect_error事件，获取连接失败的具体原因：

// App.js 中的 useEffect 部分
useEffect(() => {
  function onConnect() {
    setIsConnected(true);
    console.log('Socket连接成功');
  }

  function onDisconnect() {
    setIsConnected(false);
    console.log('Socket断开连接');
  }

  function onConnectError(error) {
    console.error('Socket连接失败:', error);
  }

  socket.on('connect', onConnect);
  socket.on('disconnect', onDisconnect);
  socket.on('connect_error', onConnectError);

  return () => {
    socket.off('connect', onConnect);
    socket.off('disconnect', onDisconnect);
    socket.off('connect_error', onConnectError);
  };
}, []);

4. 确认启动顺序 #

• 先启动服务端：执行node socket.js，看到控制台输出服务运行地址后再启动React。
• 再启动React项目：执行npm start，确保React正常运行在http://localhost:3000。

5. 检查依赖版本兼容性 #

Socket.io客户端与服务端的版本必须匹配（如均使用4.x版本），版本不兼容会导致连接失败。可以执行以下命令统一版本：

# 服务端更新依赖
npm install socket.io@latest
# 客户端更新依赖
npm install socket.io-client@latest

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