实时数据的无限滚动

Question

我正在尝试在网站应用程序中实现无限滚动，记录可能会从服务器添加或删除，并按其ID的字母顺序排序，同时相关数据也可能随时更改，我必须显示最新的数据。我了解无限滚动如何工作以及如何显示一组固定对象的最新数据（在我的情况下，反复轮询并将数据转储到视图中），但我无法理解如何整合两者。API使用游标每次发送给我20条记录。请帮忙

- Vikrant Yadav

---

如果您能理解什么进入视图，什么离开视图，那么您可以使用FCM（Firebase Cloud Messaging）订阅和取消订阅主题（帖子），因为它被设计为可扩展到数十亿用户。通过服务器更新的帖子将发送到该“主题”，如果您放置逻辑来更新数据，则人们可以看到帖子更新。 - King Friday

Answer 1

我想我理解您的主要问题了。实现具有实时更新的无限滚动非常困难。您必须仔细考虑并弄清楚您真正想要实现的内容。有几种情况需要考虑，为简化起见，让我们假设我们使用带行的网格：

1. 可见行已更改（编辑）
2. 在可见行之间添加了新行（添加）
3. 从可见行中删除了现有行（删除）
4. 已加载的行已更改（编辑）
5. 在以前加载的行之间添加了新行，但它们不可见-我们向下滚动（添加）
6. 已从已加载的行中删除现有行（删除）
7. 任何未加载行中的更改都是微不足道的-因为我们仍然必须加载它

我认为这里最大的问题是操作已加载但不可见的行。任何更改都不会对用户可见。既然如此，您是否考虑过虚拟滚动？因此仅显示10行，并在用户向上/向下滚动时替换它们。如果您真的想要无限滚动，好的方法是通知用户数据已更改，并且您必须重新呈现整个无限滚动。在这种情况下，用户决定刷新已加载的数据。您可以获取可见内容并尝试计算要向其显示什么（以反映先前状态中添加/删除/编辑的行）。

- Oskar

Answer 2

基本上，您需要在可滚动的容器中设置记录。然后使用一些jquery来随着API调用添加更多行而向下滚动容器。

这是我拥有的一些javascript代码，可以滚动列表。为了实现这一点，css需要设置overflow属性。

   function scrolllist(){


            //get the current width of the screen
            var width = document.body.clientWidth;
            var channelPanelWidth = 120;

            //get the height of the info container of the current video 
            var elem = document.getElementsByClassName("listInfoContainer")[0];


            $('#listContainer').animate({scrollLeft: nextScroll + "px"}, {duration: 1000, specialEasing: { width: 'linear', height: 'easeOutBounce'},
            complete: function (e) {

                //debug print
                //console.log("animation completed");
            }

        }


  #listContainer{
  display: inline-block;
  vertical-align: top;
  width: 196px;
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 510px;
  left: 0px;

}

下一个滚动变量将控制框的滚动程度。如果您想要为其赋予连续滚动的外观，则只需要调整持续时间和nextscroll变量，以使它们在API发出的下一次更新到达之前尚未到达列表的末尾。

- Mark Crawford

Answer 3

使用Socket.io或Google Cloud Messaging实现无限滚动

我自己也在寻找想法，当然，在没有适合您需求的答案时，您必须自己创造一个。

典型的无限滚动行为

做无限滚动本质上是在分页数据集上查询，提前获取行，并在滚动动量（向上或向下）之前显示它们。我已经在我的网站和iOS / Android上完美地实现了这一点。

获取每篇帖子的实时更新

在使用“room”概念成功地使用socket.io实现后，我现在决定改用GCM Google Cloud Messaging（或现在的Firebase Cloud Messaging FCM）。

方法

现在我正在每次提前获取20条记录并订阅用户到20个主题（帖子），当它们移出视野时，我从未查看的主题中取消订阅。如果动量增量太大，则禁用此功能，直到其在范围内，因为快速订阅/取消订阅可能被视为对FCM的滥用。

然后，我在页面/设备上有一个基于帖子ID加载的哈希查找，与订阅的主题匹配，并且帖子更新在消息数据包中具有帖子ID，因此我可以根据此方法快速更新页面/应用程序上的统计信息。

我担心这会使FCM过载，但迄今为止似乎非常可扩展。顺便说一句，Firebase（任何东西）基本上都很棒，但FB DB在查询方面非常有限，这有点令人失望，因此我使用其他云DB。

- King Friday