React+Socket.io出现未知频繁连接、服务端无法接收emit事件问题

你遇到的两个异常本质是配置错误导致的连接异常，加上公网扫描/残留页面的无效连接干扰，具体修复方案如下： #

问题根因 #

• 前端Socket客户端初始化地址写错：你写的io('localhost:4000')没有带HTTP协议前缀，Socket.io客户端会将其识别为相对路径，实际请求的是当前前端域名下的路径，根本没有连接到你4000端口的Socket服务，自然点击按钮发的emit事件服务端收不到，同时客户端会触发自动重连逻辑，反复发起无效连接。
• 服务端未配置跨域（CORS）：React开发服务默认运行在3000端口，和4000端口的服务属于跨域请求，就算地址写对，没有跨域配置也会被浏览器拦截，导致连接失败。
• 客户端未启动时的持续新连接：要么是之前打开的前端页面标签没关干净，在后台反复重连；要么是你的4000端口暴露在公网，被批量端口扫描器探测，扫描器会自动尝试Socket.io连接，产生持续的新连接日志。

修复步骤 #

1. 修正前端Socket连接地址 #

修改App.js中的客户端初始化代码，补全协议前缀：

// 错误写法
// const socket = io('localhost:4000');
// 修正为
const socket = io('http://localhost:4000');

同时补全useEffect中的监听清理逻辑，避免内存泄漏和重复触发更新：

useEffect(() => {
    const handleValueUpdate = val => setValue(val);
    socket.on('new-value', handleValueUpdate);
    // 组件卸载时移除事件监听
    return () => socket.off('new-value', handleValueUpdate);
}, []);

2. 服务端配置跨域、绑定本地监听地址 #

修改server.js的Socket初始化和服务监听代码：

// 补充CORS配置，允许本地3000端口的前端访问
const io = require('socket.io')(http, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST"]
  }
})

// 监听时绑定127.0.0.1，避免公网扫描器探测
http.listen(4000, '127.0.0.1', function () {
    console.log('listening on 127.0.0.1:4000');
})

3. 清理残留连接 #

把之前打开的所有访问过React前端页面的浏览器标签全部关闭，避免残留页面在后台发起重连。 #

验证 #

改完后重启Node服务、启动React前端，服务端只会打印1条当前客户端的connected日志，不会再每隔数秒刷新连接ID；点击+/-按钮时服务端会打印new value日志，页面数值也会实时同步更新。

注意：请保证本地安装的socket.io（服务端）和socket.io-client（客户端）大版本一致，版本不兼容也会导致连接失败。

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