React项目（create-react-app）localhost:3000连接失败求助

从报错信息来看，问题出在项目内的WebSocket连接初始化环节，并非单纯的dev server端口或HTTPS配置问题，按以下步骤排查：

• 检查WebSocket连接地址的正确性
  打开项目中的socket.js文件，确认WebSocket实例的连接URL是否匹配当前开发环境：

  • 如果dev server用HTTP协议，WebSocket地址必须用ws://localhost:3000/xxx（不能用wss://）；如果开启了HTTPS，才用wss://。
  • 避免硬编码生产环境的WebSocket地址，建议用环境变量动态切换，比如在.env.development中配置REACT_APP_SOCKET_URL=ws://localhost:3000/socket，然后在代码中引用process.env.REACT_APP_SOCKET_URL。

• 验证WebSocket逻辑是否阻塞页面加载
  临时注释掉socket.js中initSocket的调用代码，重新启动项目npm start，如果页面能正常加载，说明是WebSocket连接失败导致的页面渲染阻塞。此时需要排查WebSocket服务是否正常启动（如果是自建的WebSocket服务，确认服务端在对应端口监听）。

• 重置依赖与dev server

  1. 停止当前npm进程，删除项目根目录的node_modules文件夹和package-lock.json文件。
  2. 执行npm install重新安装依赖。
  3. 重新启动npm start，避免依赖缓存导致的dev server异常。

• 排查端口占用问题

  • Windows系统：打开命令提示符，执行netstat -ano | findstr :3000，找到占用端口的进程PID，在任务管理器中结束该进程。
  • macOS/Linux系统：执行lsof -i :3000，用kill -9 [PID]命令结束占用端口的进程。
  • 也可以临时换端口启动：PORT=3001 npm start，如果能正常访问，说明原3000端口被占用。

• 重置react-scripts配置
  如果之前对react-scripts进行过自定义配置（比如eject或使用customize-cra），可能导致dev server的WebSocket代理异常。可以执行npm install react-scripts@latest更新到最新版本，或者创建一个新的create-react-app项目，对比配置差异。

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