Question

我正在尝试构建一个使用Server Sent Events的应用程序，以便在UI上获取并显示一些tweet（最新的50-100条tweets）。

SSE网址：

https://tweet-service.herokuapp.com/stream

问题：

我的UI变得无响应，因为正在传入大量数据！

如何确保我的UI能够响应？我通常应采用什么策略来确保处理数据？

当前设置： （为了更清楚地说明我要实现的目标）

目前，我有一个Max-Heap，其中有一个自定义比较器，可以显示最新的50条推文。
每次更改时，我都会使用新的最大堆数据重新呈现页面。

Answer 1

我们不应该将EventSource保持打开状态，因为如果在短时间内发送太多消息，这将阻塞主线程。相反，我们仅应将事件源保持打开状态，直到获取50-100条推文为止。例如：

function getLatestTweets(limit) {
  return new Promise((resolve, reject) => {
    let items = [];
    let source = new EventSource('https://tweet-service.herokuapp.com/stream');

    source.onmessage = ({data}) => {
      if (limit-- > 0) {
        items.push(JSON.parse(data));
      } else {
        // resolve this promise once we have reached the specified limit
        resolve(items);
        source.close();
      }
    }
  });
}

getLatestTweets(100).then(e => console.log(e))

然后可以将这些tweet与以前获取的tweet进行比较，以找出哪些是新的tweet，然后相应地更新UI。您可以使用setInterval定期调用此函数以获取最新的tweet。

在客户端处理大型数据集

1 个答案: