使用Create-React-App集成Socket.io遭遇ERR_CONNECTION_REFUSED错误求助

嘿，我来帮你搞定这个连接拒绝的问题～你遇到的情况主要是跨域限制和一些小的代码细节问题，下面一步步来解决：

1. 配置服务端的跨域允许 #

因为你的客户端跑在localhost:3000，服务端在localhost:8000，浏览器的同源策略会阻止跨端口的Socket连接。你需要给Socket.io服务端添加CORS配置：

修改你的server.js代码：

// 改用Server构造函数，适配v4+版本的写法
const { Server } = require('socket.io');
const port = 8000;

// 初始化时配置CORS，明确允许3000端口的客户端请求
const io = new Server(port, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST"]
  }
});

io.on('connection', (client) => {
  console.log('新客户端已成功连接'); // 新增这句方便确认连接状态
  client.on('subscribeToTimer', (interval) => {
    console.log('client is subscribing to timer with interval ', interval);
    setInterval(() => {
      client.emit('timer', new Date().toLocaleString()); // 格式化时间更易读
    }, interval);
  });
});

console.log('listening on port ', port);

2. 确保Socket.io客户端和服务端版本匹配 #

版本不兼容是连接失败的常见原因，如果你的服务端安装的是socket.io@4.x，客户端也要安装对应的socket.io-client@4.x版本：

先检查服务端版本：

npm list socket.io

客户端安装对应版本（以4.7.2为例）：

npm install socket.io-client@4.7.2

3. 修复客户端组件的参数传递问题 #

你的组件里调用subscribeToTimer时只传了回调函数，但api.js里的函数需要两个参数（interval和cb），这会导致事件发送异常。修改组件的componentDidMount：

componentDidMount() {
  // 传入interval参数（比如1000）和回调函数
  subscribeToTimer(1000, (err, timestamp) => this.setState({ timestamp }));
}

或者给api.js里的函数设置默认值，让调用更灵活：

function subscribeToTimer(interval = 1000, cb) {
  socket.on('timer', timestamp => cb(null, timestamp));
  socket.emit('subscribeToTimer', interval);
}

4. 额外检查：确认服务端端口未被占用 #

虽然你说服务端定时器正常运行，还是可以确认下8000端口是否真的被Socket.io服务占用：

• Windows：netstat -ano | findstr :8000
• Mac/Linux：lsof -i :8000

如果有其他进程占用，要么杀死该进程，要么修改服务端的端口号。

按照上面的步骤修改后，重启服务端和客户端，应该就能正常建立Socket连接并获取时间戳啦～

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