实时数据的设计模式

Question

我有一系列实时事件.我正在开发一个前端来向用户显示这个流,以便:

• 用户将能够使用数据中存在的某个属性进行搜索
• 用户将能够对数据进行排序

流中的每个事件都有一个与之关联的状态,可以随时更改,因此我不断查询服务器最后x分钟的数据,并在客户端相应地更改状态.

我的第一次尝试是使用分页.但是,这引起了以下问题:

• 当用户正在查看时,会添加第15页和新事件,我需要记住用户所在的当前页面并确保不会更改.即使新添加的数据不会过多,也会影响列表中事件的位置,因此用户必须搜索上一个事件移动到的位置.
• 当用户按某个特定属性排序时,我需要重新排序传入的数据并显示它.我仍然面临与上述相同的问题.

这种互动有设计模式吗？Twitter使用无限滚动.这种模式很棒但我不太确定如何使其适应情况:

• 用户可以对数据进行排序的位置.
• 我在哪里使用后端数据库向前端提供数据.如何设计分页查询？

有什么建议？

Answer 1

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

旁白：根据数据的实时性，您可能应该研究其他获取数据的方法，例如长轮询或 WebSocket，而不是每 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
}