如何有效地将新数据推送到前端，而不需要重新加载页面或计时器

Question

我正试着让两个屏幕从建筑物的另一边反射对方的影像。

目前，我有两个运行Wordpress的前端设备，两者都有一个on和off开关：

​

目前，两个屏幕上都运行着一个<meta content="http-refresh=60">。我用这种方式运行它的问题是，因为间隔是60秒，所以有一点时间会发生错误。如果一个用户将设置为off，则另一个用户将加倍执行相同的操作，因为屏幕没有正确反射(关灯和关灯只是这个问题的一个例子)。

我试着进入wp-api和heartbeat-api，但是我找不到关于JSON的问题的答案，没有正确地解析。

主题问题

因此，我想创建一个类似于元刷新的ajax拉，但是表单上已经有了ajax调用，所以我遇到了冲突。

当前AJAX

<form id="form">
    <label><input type="checkbox" name="mb_user_location" value="on">On</label>
    <label><input type="checkbox" name="mb_user_location" value="off">Off</label>
    <input hidden name="mb_user_id" value="<? get_current_user_id(); ?>">
</form>

$(function() {
    $('#form').change(function(a) {
        a.preventDefault();
        var mbformdata = new FormData($(this)[0]);

        $.ajax({
            method:         "POST",
            data:           mbformdata,
            contentType:    false,
            processData:    false,
            success:        function(a) { $( "#response" ).show().html(a); },
            complete:       function(a) { setTimeout(function(){ $(".mbsuccessmessage").slideUp(); }, 5000); }
            error:          function(b){ console.log(b); }
        });
    });
});

$mb_location_set    = isset( $_POST['mb_user_location'] ) ? $_POST['mb_user_location']  : '';
$mb_location_userID = isset( $_POST['mb_user_id']       ) ? $_POST['mb_user_id']        : '';

// if there was empty data
if( empty( $mb_location_userID ) || empty( $mb_location_set ) ) {
    die( 'Something went wrong. Please try again' );

// otherwise set the location
} else {
    update_user_meta( $mb_location_userID, 'mb_user_location_current',  $mb_location_set );
    die( 'Location saved' );
}

现在，我想添加另一个ajax调用，它将询问服务器设置是什么，并更新接口，如果它与显示的不同。

我目前有以下情况：

mb_send_request();

function mb_send_request() {
    var mbajaxdata = new FormData($('#form')[0]);

    $.ajax({
        method:         "POST",
        data:           mbajaxdata,
        contentType:    false,
        processData:    false,
        success:        function() { console.log('success - ajax'); },
        complete:       function() { setInterval(mb_send_request, 15000); console.log('ajax - completed'); },
        error:          function(b){ console.log(b); }
    });
}

但到目前为止，我还不知道如何在相同的表单上实现两个ajax调用，而不会产生冲突，并再次通过PHP验证。

Answer 1

在一定的时间间隔内从服务器上提取数据仍然会造成延迟，而且是不可靠的，即使您每秒钟都这样做。您应该查看发布/订阅服务干道或巴布。这是我头上的第二个，我相信还有更多的选择。通常这类服务是付费的，但其中一些为低数量客户提供免费计划。

如果您决定以发布/订阅方式进行发布/订阅，那么也有几种方法可以实现我们的目标。

• 您可以在javascript中完成任何事情，而不必完全连接到您的php脚本。在这种情况下，所有通信都将通过消息服务提供者进行。你必须同时使前端应用程序出版商和订户。当状态在其中一个客户端上发生变化时，您将向信道发布一条消息，该消息将传递给所有其他客户端(频道的订阅者)。客户端根据消息的内容更改其状态。
• 或者，在每次状态变化时，您可以提交表单并将其发送到您的php脚本，该脚本可以充当维护图像当前状态的中央“集线器”。在这种情况下，您将使PHP脚本成为"publisher“，并使所有javascript客户端成为"subscirbers”。其余内容非常相似: php脚本向所有信道订阅者发送消息，这些订阅者根据消息内容更改它们的状态。

PHP解决方案的优点是在页面加载期间了解状态，这有助于所有客户端的初始同步。

您应该知道，尽管发布/订阅服务几乎在“实时”工作(消息可能需要30-50毫秒左右才能传递)，但仍然存在竞争条件的可能性。两个客户端几乎可以同时改变他们的状态(图像被触摸)(比如微秒差)。客户机A可能期望从"on“到"off”状态，而客户端B可能希望从"on“到"off”状态，但是由于实际上发生了两个事件，而且两个客户端都没有意识到这一点，它们最终可能都会出现"on“状态(取决于您如何处理消息)。好的一点是，在您的场景中，这样的情况很容易检测到，您可以决定如何处理它:将所有客户端静默地强制到最新状态，或者抛出一个错误，解释他们的应用程序一度不同步。

Answer 2

您可以编写一个集间隔来检索数据并在适当的位置更新html。

从来不建议使用标题刷新。

Answer 3

如果可以修改为与表单提交相关的代码，则可以在侦听器中调用第二个方法：

$(function() {
$('#form').change(function(a) {
    a.preventDefault();
    mb_send_request();
    var mbformdata = new FormData($(this)[0]);

...
});});

如果无法修改代码，则可以再次侦听“更改”事件(可以在多个事件上有多个侦听器)。

$('#form').change(function(a) {
    mb_send_request();
}