时间戳

首页 > 解决方案 > React.js/socket.io 瓶颈问题

javascript - React.js/socket.io 瓶颈问题

问题描述

我是 react.js 的新手，并开始将旧的纯 HTML/CSS/JS 前端应用程序迁移到 react.js，该应用程序包括以低延迟接收广播，我使用 create-react-app 创建我的项目，现在我在 react.js 方面遇到了一个奇怪的瓶颈问题。

我在应用程序上创建了一个模块来处理 socket.io 广播，但是当我运行应用程序时，接收广播时出现奇怪的高延迟。

这是旧 js vanilla 应用程序的延迟时间

这是 react.js 应用程序的延迟

起初，我认为问题是因为渲染需要很多时间来同步处理我的请求，因为我使用了钩子，useEffect所以我只是导入了模块并定义了广播事件而不渲染任何东西，但延迟没有改善。

然后我创建了一个简单的客户端并独立运行，延迟很好：

const io = require('socket.io-client');
//import io from 'socket.io-client';

socket = io.connect('------------------')

socket.on('connect', () =>{
  console.log("i'm connected to the server")
})

socket.on('broadcast_timer', data => {
  console.log(data)
})

这是基本上在 react.js、旧 vanilla 和创建的简单客户端上的代码。

我不知道这是否与 webpack 或热重载有关（我从应用程序构建并运行它但问题仍然存在），是否有人遇到过这样的处理套接字的问题？

标签： javascriptreactjssocket.iocreate-react-app

解决方案

好吧，尝试一切，比如使用新的 create-react-app 和构建一个手动配置 webpack 和 babel 的反应项目，我放弃了使用 socket.io，这可能是我在 react.js 上存在延迟差异的错误，因为我没有'没有在其他地方使用它并将服务器更改为使用 SSE（服务器端事件）流式传输，效果非常好，客户端只需要订阅计时器并且没有额外的依赖项。

推荐阅读