Я могу обнаружить изменение файла без бесконечного интервала или перезагрузки страницы?

Question

Я могу обнаружить изменение файла без бесконечного интервала или перезагрузки страницы?

Моя проблема в основном заключается в следующем: у меня есть веб-страница, на которой запущено онлайн-радио на другом поддомене (Airtime sourcefabric). Теперь я понял, что у этого радио-плагина есть хороший API в реальном времени, поэтому я могу получить доступ к информации о предварительном, текущем и следующем треке (и показе) в JSON с этого URL: http://music.wickedradionet.com/api/live-info .

Мне нужно показать эту информацию на веб-странице. Я могу заставить его работать с интервалом javascript, обновляя информацию из URL API каждую секунду (или каждые 5 секунд, не имеет значения), но я думаю, что должен быть лучший способ сделать это.

Есть ли способ проверить, был ли файл изменен, и обновить информацию, только если они не совпадают? Я думаю, что это можно сделать с помощью некоторого хитрого PHP, такого как настройка задания CRON, или, возможно, с помощью WebSocket. Есть ли лучший способ, чем проверить его в интервале JS?

JavaScript, который я сейчас использую для обновления: http://wickedradionet.com/js/wickedradio-playlist.js

4

ajax icecast javascript php

Решение

Другие решения

У вас есть точное время, когда файл изменится, это время, когда начинается следующая песня. Все, что вам нужно сделать, это рассчитать разницу во времени, чтобы запланировать новый запрос.

function stringToDate(s)  {
s = s.split(/[-: ]/);
return new Date(s[0], s[1]-1, s[2], s[3], s[4], s[5]*1);
};
function getPlaylistData() {
$.ajax({
dataType: "jsonp",
url: "http://music.wickedradionet.com/api/live-info/",
success: function (result) {
/* Change your DOM, than calculate time for next request this way: */
var requestTime = stringToDate( result.schedulerTime ).getTime() - result.timezoneOffset*1000;
var nextChange = stringToDate( result.next.starts ).getTime();
var differenceInMiliseconds = nextChange-requestTime;
console.log( differenceInMiliseconds );
setTimeout(getPlaylistData, differenceInMiliseconds);
}
});
};
$(document).on('ready', function () {
getPlaylistData();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

1

Источник

Accepted Answer

Ниже описаны два способа улучшения вашего опроса:

1) Более эффективный опрос AJAX

Вместо того, чтобы постоянно выполнять ajax-запрос каждую секунду (независимо от того, получаете вы данные) или нет, вы можете создать хакерское открытое соединение с сервером для опроса после завершения запроса, как показано ниже. Важная часть $.ajax() вызов complete вариант. timeout (то есть 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, документы привести примеры того, как вы можете использовать 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 () {}),

4