从另一台计算机或手机添加数据后，如何更新计算机上的视图？

Posted 2023-02-24

【中文标题】从另一台计算机或手机添加数据后，如何更新计算机上的视图？

【英文标题】：How to update view on computer when the data has been added from another computer or phone?

【发布时间】：2020-02-06 23:28:45

【问题描述】：

实际上，在我的网站中，我有一个 ajax 调用，我从 ASPX 获取一些来自 mysql 数据库的数据。

根据该数据，我使用 Chart.JS 构建了一个图表，当从另一个设备向数据库添加新数据时，我将能够更新该图表。

该网站是一个网络服务，因此该网站可以在计算机上打开，然后从我的手机我可以加载相同的页面并将一些新项目添加到数据库中，手机上的视图已更新但计算机上没有我如何在计算机上更新视图？

假设我的网站中有一个表单和一个列表，该网站在我的电脑和手机上打开，从手机编译表单并将其提交到列表中后，我会比较新项目，我什至会这样在该项目将在不刷新页面的情况下进行比较的计算机上。

其实这里是我创建图表的 ajax 调用，如果有新数据，是否可以进行类似轮询的操作来刷新？

function loadReports(data) 
    $.ajax(
        type: "POST",
        url: "Default.aspx/getReports",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify( data: data ),
        dataType: "json",
        success: function (r) 
            data = r.d;
            if (data != '[]') 
                data = jQuery.parseJSON(data);
                var dataObject = 
                    labels: data.map(ora => ora.ORARIO),
                    datasets: [
                        label: 'Coperti',
                        backgroundColor: gradient,
                        hoverBackgroundColor: gradient,
                        data: data.map(cop => cop.COPERTI)
                    ]          
                ;
                chart.data = dataObject;
                chart.update();
             else 
                var dataObject = 
                    labels: [],
                    datasets: []
                
                chart.data = dataObject;
                chart.update();
            

        ,
        error: function (error) 
            alert(error.responseText);
        
    );

【问题讨论】：

Is there a way to 'listen' for a database event and update a page in real time?的可能重复

【参考方案1】：

您可以使用 setInterval 之类的东西定期从服务器请求数据，每 5 秒请求一次，您可以执行以下操作：

setInterval(() => loadReports(data), 5000)

或者，您可以考虑使用 websockets。这基本上是您的后端可以告诉客户端某些内容已更改并且应该更新（或无论如何只是发送数据）的地方。您可以在 https://blog.teamtreehouse.com/an-introduction-to-websockets 阅读关于 websockets 的精彩介绍（虽然已经有几年历史了，但仍然是一个很好的介绍）

​​>

【讨论】：

实际上 websocket 将是一个不错的解决方案，但对于原始解决方案，我会使用 setInterval :) 谢谢

【参考方案2】：

使用Pusher 将您的数据从服务器端广播到客户端。它使用 websocket 技术。如果更新了特定页面，则数据将发送到推送服务器，并且可以使用 javascript 从您的客户端（显示图表的位置）捕获该数据。

如果你使用 ajax，它会比使用 pusher 消耗更多的带宽。

不喜欢 pusher 的可以选择 Redis、firebase、pubnub。