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

Question

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

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

该网站是一个Web服务，因此可以在计算机上打开该网站，然后从我的手机上加载相同的页面并向数据库中添加一些新项目，电话上的视图已更新，但在计算机上未更新，因此如何即使在计算机上也可以更新视图吗？

假设我在我的网站和一个列表中都有一个表格，在我的计算机和手机上打开该网站，从手机中编译表格并将其提交到列表中后，它将比较新项目，即使在该项目将在不刷新页面的情况下进行比较。

实际上这是我创建图表的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);
        }
    });

}

Answer 1

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

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

或者，您可以使用webhooks / websockets。基本上，您的后端可以在此告诉客户端某些更改，并且应该更新（或无论如何只是发送数据）。

Answer 2

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

如果使用ajax，将比使用pusher消耗更多带宽。

如果您不喜欢pusher，则可以选择Redis，firebase，pubnub。