实时数据的设计模式

Question

我有一串实时事件流，正在开发一个前端界面将其展示给用户，以便用户能够：

• 使用数据中的某个属性进行搜索
• 对数据进行排序

流中的每个事件都有一个与之相关联的状态，可以在任何时候更改，因此我会查询服务器以获取最近x分钟的数据，并在客户端相应地更改状态。

我的第一次尝试是使用分页。然而，这引起了以下问题：

• 当用户查看第15页时，如果添加了新事件，则需要记住用户当前所在的页面，并确保不改变该页面。即使新添加的数据没有太多影响，它也会影响列表中事件的位置，因此用户必须搜索前一个事件移动到哪里。
• 当用户按某个特定属性排序时，我需要重新对传入的数据进行排序并显示。我仍然面临上述问题。

这种交互是否有设计模式？Twitter使用无限滚动。这个模式很棒，但我不太确定如何适应以下情况：

• 用户可以对数据进行排序。
• 我正在使用后端数据库向前端提供数据。分页查询应该如何设计？

有什么建议吗？

- Legend

---

我会在后端使用常规分页，提供pageNum、sortValue等参数。在前端，我会使用无限滚动，其中pageNum简单地递增，并在每次滚动到底部时从后端获取数据。对于排序，我会让前端重置列表并向后端提供pageNum=1、sortValue=desc之类的参数。 - Simon

Answer 1

听起来将排序转移到前端是实现您所需结果的最佳方法。我不会深入探讨无限滚动/分页，因为可能有更好的资源，但基本上要跟踪检索到的最后一行（或页面）并将其与请求一起发送。希望这可以帮助解决阻止您实施该功能的其他问题。

另外：根据数据的实时性，您应该考虑使用长轮询或WebSockets等其他获取数据的方法，而不是每X分钟重复调用。

响应格式

{
    'status' : 'OK',
    'last_row_retrieved': 20,
    'events' : [{
        'html' : "<div>The regular response</div>",
        'sort_attr_1' : 10,
        ...
    }]
}

前端

//Maintain a container for the results you get each call.
var myevents = [];
$.post(...,function(response) {
    var data = $.parseJSON(response);
    var events = data.events;
    for(var i=0;i<events.length;i++) {
        //Save each event
        myevents.push(events[i]);
    }
    DisplayEvents();
});
//When user tries to sort do so with custom sorting function
myevents.sort(function(a,b) { return a.sort_attr_1 - b.sort_attr_2;});
DisplayEvents();

function DisplayEvents() {
    //loop through myevents and display them however you're doing it
}

- Patrick