Question

我有一系列实时事件。我正在开发一个前端来向用户显示此流，以便：

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

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

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

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

这种互动是否有设计模式？ Twitter使用infinite scrolling。这种模式很棒但我不太确定如何使其适应情况：

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

有什么建议吗？

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
}

实时数据的设计模式

1 个答案:

响应格式

前端