Question

我正在尝试开发一个网站，当其他用户发布时自动显示帖子，或者用户在收到消息时收到通知，基本上就像Facebook一样。无需重新加载页面或点击F5。

我已经使用Javascript和PHP多年了，据我所知，保持页面更新的唯一方法是持续使用AJAX请求。

这是一个示例（从dataBase检查消息）：

setInterval(function() {
    $ajax({
      url: "http://myweb.com/checkmessage.php",
      type: "POST",
      data: {value: userID},
      dataType: "json",
      success: function(result){

              //If true do something and update message inbox

         }
    });
}, 500);

这基本上每0.5秒发送一次请求到我的PHP文件，在那里我可以访问我的数据库并检查新消息并返回它们。感谢此代码，我可以实时收到消息通知，而无需更新我的网站。

但老实说，从性能角度来看，每隔0.5秒发送数百个AJAX请求是非常糟糕的做法，这会让网站变慢。

这就是为什么我在这里问是否有更好的方法来实现这一点，我一直在检查Facebook以及它实现的方式对我来说是纯粹的神秘。我仍然不知道他们是如何做到的，在页面上进行如此大量的更新，只需几个电话（你可以自己检查打开facebook等待它加载然后打开谷歌开发者工具，去网络看看你的眼睛！）。

Answer 1

一些可能的方法是：

网络套接字
长轮询
push api

您可以阅读它们并做出选择。

Answer 2

看看Pusher（pusher.com）。他们有一个免费的层，您可以使用，然后确定这是否足以满足您的需求。

你可以使用他们的演示 - 它非常容易。

在你的PHP中，你会触发＆＃34;推送＆＃34;像这样：

<?php
  require __DIR__ . '/vendor/autoload.php';

  $options = array(
    'cluster' => 'eu',
    'encrypted' => true
  );
  $pusher = new Pusher\Pusher(
    'key1',
    'key2',
    'key3',
    $options
  );

  $data['message'] = 'hello world';
  $pusher->trigger('my-channel', 'my-event', $data);
?>

然后在你的HTML中，你会听取推文：

<!DOCTYPE html>
<head>
  <title>Pusher Test</title>
  <script src="https://js.pusher.com/4.1/pusher.min.js"></script>
  <script>

    // Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;

    var pusher = new Pusher('your-key', {
      cluster: 'eu',
      encrypted: true
    });

    var channel = pusher.subscribe('my-channel');
    channel.bind('my-event', function(data) {
      alert(data.message);
    });
  </script>
</head>

因此，如果您推送一些JSON，那么您几乎会立即在HTML页面中收到这些内容。然后，您可以做您需要的事情。

Answer 3

您可以将websockets用于此类方案。使用HTTP，AJAX轮询或AJAX长轮询实际上会在网络上增加大量开销，因为涉及许多请求/响应周期，而每次都涉及所有连接设置和验证步骤。

但是，从头开始实施此操作通常不是一种选择。你会发现很多PaaS，IaaS选项。我之前使用过Ably，似乎完全解决了目的。

基本上即使你试图自己实现底层功能，你也需要使用发布/订阅架构，每次发生变化时都会使用该架构推送事件（比如用户在FB上发布新帖子），这个事件将会反过来广播给所有订阅者。在订阅者端，您将实现处理事件的逻辑。

Websockets是这种用例的完美解决方案，因为它们允许全双工和持久连接，因此服务器可以利用推送范例在数据更新时不断推送更新。

希望这有帮助！

Answer 4

您可以根据您的要求使用Pusher和事件广播系统。并即兴即可使用Angular或Vue

开发实时更新网站的最佳方式

4 个答案: