javascript - 我可以在没有无限间隔或重新加载页面的情况下检测文件更改吗？

Question

我的问题基本上如下:我有一个网页在另一个子域 (Airtime sourcefabric) 上运行在线广播。现在我发现这个 radio 插件有一个很好的实时 API，所以我可以从这个 URL 访问 JSON 中的上一个、当前和下一首轨道(和显示)信息:http://music.wickedradionet.com/api/live-info .

我需要在网页上显示这些信息。我可以让它与 javascript 间隔一起工作，每秒更新一次来自 API URL 的信息(或者每 5 秒一次，没关系)，但我认为必须有更好的方法来做到这一点。

有什么方法可以检查文件是否已更改，并且只有在信息不相同时才更新信息？我认为这可以通过一些棘手的 PHP 来完成，比如设置 CRON 作业，或者可能通过 WebSocket 来完成。有比在 JS 间隔中检查它更好的方法吗？

我现在用于更新的 javascript:http://wickedradionet.com/js/wickedradio-playlist.js

Answer 1

下面介绍了两种改进投票的方法:

1) 更高效的 AJAX 轮询

与其每秒持续执行一个 ajax 请求(无论您是否获取数据)，您可以创建一个与服务器的 hacky 开放连接，以便在请求完成后进行轮询，如下所示。 $.ajax() 调用的重要部分是 complete 选项。 超时(即 30 秒)是为了确保在循环中断时继续轮询。

(function betterPoll(){
    $.ajax({ url: 'http://music.wickedradionet.com/api/live-info/', success: function (data) {
        // do something with "data"
    }, dataType: "json", complete: betterPoll, timeout: 30000 });
})();

2) WebSocket 连接

更好的选择是 WebSocket。这允许全双工、低延迟连接在客户端和服务器之间保持打开状态，从而实现“实时”通信。

如果您使用的是 Node.js，则 docs提供有关如何使用 Socket.IO 的示例用于 WebSocket 通信。如果您使用的是 PHP，快速搜索会将我带到 Ratchet和 PHP WebSockets .

下面是一个使用 Socket.IO 的例子:

在您的 HTML 中:

<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
<script src="example.js"></script>

在“example.js”中，你可以有这样的东西:

var socket = io.connect('http://music.wickedradionet.com/api/live-info/');
socket.on('an event', function (data) {
  // do something with "data"
  socket.emit('another event', { other: 'data' });
});

在服务器上，您可以使用 .on('another event', function () {}) 和 .emit('an event', function () { }).