Question

我的问题基本上如下：我有一个网页在另一个子域（Airtime sourcefabric）上运行在线广播。现在我发现这个无线电插件有一个很好的实时API，所以我可以通过这个URL访问JSON中的prevoius，当前和下一个音轨（和显示）信息：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 open连接，以便在请求完成后进行轮询，如下所示。 $.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，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 () {})执行类似操作。

Answer 2

您有确切的时间文件将更改，这是下一首歌曲开始的时间。您需要做的就是计算时差以安排新请求。

NSString *encode = [string stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLQueryAllowedCharacterSet]];

NSString *decode = [encode stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

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();
});

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

2 个答案: