开发聊天应用时socket.io连接报ERR_CONNECTION_REFUSED错误

问题排查与解决步骤 #

1. 检查后端服务运行状态 #

ERR_CONNECTION_REFUSED 错误90%以上的原因是8900端口的socket.io服务没有正常启动：

• Windows系统可在cmd执行命令：netstat -ano | findstr "8900"
• Mac/Linux系统可在终端执行命令：lsof -i:8900
  如果命令执行后没有返回任何进程信息，说明后端服务没有启动成功，先查看后端启动时的控制台日志，确认有没有依赖缺失、端口被占用之类的报错。

2. 核对前后端socket.io版本兼容性 #

socket.io前后端大版本必须匹配才能正常连接：

• 后端安装的是socket.io v4版本时，前端对应的socket.io-client必须是v3或v4版本，不能使用v2及更早版本
  可分别执行命令查看版本：
• 后端项目目录执行：npm list socket.io
• 前端项目目录执行：npm list socket.io-client
  如果版本不匹配，卸载旧版本重装对应版本即可。

3. 代码优化建议 #

你当前的代码没有原则性错误，可以增加连接错误监听方便快速定位问题：

useEffect(() => {
    socket.current = io.connect("http://localhost:8900/");
    // 新增连接错误监听
    socket.current.on('connect_error', (err) => {
      console.log('连接失败具体原因：', err);
    })
    socket.current.on("getMessage", (data) => {
      setArrivalMessage({
        sender: data.senderId,
        text: data.text,
        createdAt: Date.now(),
      });
    });
}, []);

4. 特殊场景排查 #

• 检查是否开启了全局代理工具，代理可能会拦截本地端口的请求
• 如果后端是在容器、虚拟机内运行，确认8900端口已经配置端口映射，且前端访问的是宿主机的对应IP，不是容器内部的localhost

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