javascript - React 中的 Socket.IO 连接导致持续重新加载

Question

我以前从未遇到过这个问题，而且似乎无法弄清楚是什么原因造成的。我正在开发一个具有 Express 和 Socket.io 后端和 React 前端(使用 create-react-app)的项目。

server/index.js...

相当标准，据我所知应该有效......

const app = express();
const server = app.listen(config.port);
io.attach(server);

if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, '..', 'build')));
  app.get('/', (req, res) => res.sendFile(path.join(__dirname, '..', 'build', 'index.html')));
}

io.on('connection', socket => {
  *blah blah blah*
});

src/index.js...

class App extends Component {
  constructor(props) {
    super(props);
    this.socket = io.connect(window.location);
  }

  render = () => {
    if (view === 'start') {
      return <StartContainer socket={this.socket} />;
    } else if (view === 'game') {
      return <Game socket={this.socket} />;
    }
  }
}

我实际上正在测试部署，因此我一直在运行 set NODE_ENV=product&& node server/index.js 来测试 Express 应用中的文件服务。

在开发过程中，我运行两台服务器:一台使用 create-react-app，另一台用于 Express & Socket.io 服务器。开发中不会出现此问题。

因此，我启动服务器，转到本地主机，页面不断刷新。如果我从 App 中删除套接字连接，问题就会消失。希望我没有忽略这里 super 简单的事情。如有任何帮助，我们将不胜感激。

为了简洁起见，我省略了一些应用程序组件，但如果您怀疑问题可能出在其他地方，请告诉我，我将添加更多内容。

编辑问题肯定出在客户端。我served构建的 React 项目也有同样的问题。

Answer 1

问题已解决

之前的连接是这样的:

this.setState({ socket: io.connect(config.socketIO) });

其中 config.socketIO 是 process.env.NODE_ENV === '生产' ？ window.location : 'http://localhost:3001'

我认为这会起作用，因为在文档中它说 io() 默认为 window.location。显然传递 window.location 是不一样的。到目前为止的工作解决方案是...

if (process.env.NODE_ENV === 'production') {
  this.setState({ socket: io.connect() });
} else {
  this.setState({ socket: io.connect('http://localhost:3001') });
}

我还应该注意到，我将连接移至 componentDidMount 中，因此是 setState。