实时数据的设计模式

Posted 2023-03-31

【中文标题】实时数据的设计模式

【英文标题】：Design pattern for real time data

【发布时间】：2013-06-18 05:50:28

【问题描述】：

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

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

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

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

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

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

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

有什么建议吗？

【问题讨论】：

我会在后端进行常规分页，提供参数 pageNum、sortValue 等。在前端我会使用无限滚动，其中 pageNum 只是递增并从后端获取数据在每个卷轴的底部。对于排序，我会让前端重置列表并将 pageNum=1、sortValue=desc 提供给后端或类似的东西。

【参考方案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