【问题标题】:Endless Scroll without polling (real time)无轮询的无尽滚动(实时)
【发布时间】:2020-06-12 13:11:55
【问题描述】:

如何使用实时服务器连接来管理和无限滚动,而不是每次用户在 nodejs 上到达列表末尾并做出反应时进行池化? 谢谢

【问题讨论】:

  • 服务器上的用户分页并在前端进行管理,当您对列表末尾做出反应时,然后尝试获取下一页数据并将该数据分配给反应变量。之后它将绑定到 FE。如果记录数在 5-6K+ 以上,则无法一次获取,您需要每次调用 API 以获得更好的 UI/UX。

标签: node.js reactjs websocket scroll


【解决方案1】:

服务器上的用户分页并在前端进行管理,当您对列表末尾做出反应时,然后尝试获取下一页数据并将该数据分配给反应变量。之后它将绑定到 FE。

如果记录数更像是在 5-6K+ 范围内,则无法一次获取。如果您一次获取,则可能需要超过一分钟,因此在用户无法在同一页面上等待之前,他可能会重新加载页面或离开页面。您需要每次调用 API 以获得更好的 UI/UX。

你可以使用这样的指令。

如果您收到诸如用户到达列表末尾之类的事件,只需关注滚动,然后简单地打印类似这样的内容(使用不透明度获得更多关注)

如果您的 API 返回零新数据,则只需打印类似这样的内容

评论后编辑: 不,您不需要设置与服务器的开放连接,只需在到达列表末尾时调用 API,就像您仅在您想从服务器获取更多数据时调用一样。 如果您获取实时数据并且您认为可能存在重复项,那么您可以在后端过滤并通过匹配的唯一键删除重复项。如果这不可行,那么您也可以在 FE 上删除,因为与 BE 相比,您在 FE 上的数据更少。
就像你调用第三方 API 来获取数据一样,所以如果可以的话,首先获取所有记录并存储在你的数据库中,然后从你的 FE 调用一个 API 来从你自己的数据库中获取数据,它将进行简单快速的渲染.

【讨论】:

  • 谢谢,但是与服务器的开放连接呢?我应该如何实施?此外,如果您从实时源滚动,您可以在下一页上获得重复项,因为项目发生了变化。如何解决?谢谢
猜你喜欢
  • 2017-07-01
  • 2016-04-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-12
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多