So I created this custom application and ported it into a few websites. It uses the Twitch API and pulls in active streams and the viewer count. The problem I run into is when the list gets so big it seems to become too much to do though ajax. I think this because sometimes it will show a stream online when it has been offline for awhile. I'm looking to improve it so open to suggestions. I'll leave a link at the bottom to an simple active page I have set up.
This is the AJAX / JS to handle my channel info and set them up into the page. I store some flash parameters in here because I didn't find it possible to change flash vars via JS so I just reset it every time. When there's no active channels it falls back on showing youtube videos.
var channel = new Array();
var stats = new Array();
var title = new Array();
var viewers = new Array();
var called = true;
var active = false;
var query = window.location.search.split( '?' );
var current; // For viewers update
var ran;
var youtube = '<iframe width="560" height="315" frameborder="0" allowfullscreen></iframe>';
var tubes = ["zn7-fVtT16k", "7rE0-ek6MZA", "zj2Zf9tlg2Y", "mhTd4_Ids80", "AeNYDwbm9qw", "mgVwv0ZuPhM",
"l3w2MTXBebg", "WA4tLCGcTG4", "TAaE7sJahiw", "xBzoBgfm55w", "AFA-rOls8YA", "YHRxv-40WMU",
"ZIMoQHpvFQQ", "7ZsKqbt3gQ0", "1_hKLfTKU5Y", "UcTLJ692F70", "CeLrlmV9A-s", "FArZxLj6DLk",
"gAYL5H46QnQ", "NisCkxU544c", "BBcYG_J3O2Q"];
function getList(){
var i=0;
$.getJSON(
"streams.php",
function(data)
{
var first;
while(data.streams[i]){
channel[i] = data.streams[i];
stats[i] = data.status[i];
title[i] = data.title[i];
viewers[i] = data.viewers[i];
i++;
}
var online = $.inArray('online', stats);
if(online != -1){
first = online;
current = online;
online = true;
}
if(query[1] != null && called)
specific();
else if(online && called)
build(first);
else if(called)
randomTube();
addList();
updateViewers();
}
);
}
getList();
function build(a){
var data = 'http://www.twitch.tv/widgets/live_embed_player.swf?channel='; // Object Data
var src = 'hostname=www.twitch.tv&auto_play=true&start_volume=25&channel='; // Flashvars Param
data += channel[a];
src += channel[a];
var changeVars = '<param name="flashvars" value="hostname=www.twitch.tv&auto_play=true&start_volume=25&channel='+src+'"/>';
var params = '<param name="allowFullScreen" value="true" />' +
'<param name="allowScriptAccess" value="always" />' +
'<param name="allowNetworking" value="all" />' +
'<param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />' +
changeVars;
$("#twitchTV").html(params);
$("#twitchTV").attr("data", data);
if(stats[a] == 'online')
$('#streamTitle').html("Streamer: " + title[a] + " - <span id=\"viewers\">" + viewers[a] + "</span> Viewers");
else
$('#streamTitle').text("Streamer: " + title[a] + " - Offline");
current = a;
called = false;
}
function addList(){
var i = 0;
var content = '';
while(channel[i]){
if(stats[i] == 'online'){
content += '<li class="item"><div class="online"></div><a style="color:green" href="javascript: void(0)"'+
' title="'+title[i]+' Stream : '+viewers[i]+' Viewers" onClick="changeStream($(this).text())">'+title[i]+'</a></li>';
}
i++;
}
i=0;
while(channel[i]){
if(stats[i] == 'offline'){
content += '<li class="item"><div class="offline"></div><a class="keyWord" href="javascript: void(0)"'+
' title="'+title[i]+' Stream" onClick="changeStream($(this).text())">'+title[i]+'</a></li>';
}
i++;
}
$('#list ul').html(content);
}
function updateViewers(){
$('#viewers').text(viewers[current]);
}
function changeChat(){
var chatSrc = $('#chatFrame').attr('src');
var chat = chatSrc.split('channel=');
$('#chatFrame').attr('src', chat[0]+'channel='+channel[current]);
$('#mainChat').removeClass('activeChat');
$('#streamChat').addClass('activeChat');
}
function changeStream(find){
var found = $.inArray(find, title);
if(found != -1){
build(found);
current = found;
}
if($('#streamChat').hasClass('activeChat'))
changeChat();
}
function randomTube(){
$('#player').html(youtube);
$('#player iframe').attr("src", "http://www.youtube.com/embed/"+ tubes[Math.floor(Math.random()*tubes.length)]);
$('#streamTitle').html('<a href="javascript: void(0)" title="Random Video" onClick="randomTube()" class="rano">Random Video</a>');
called = false;
}
function specific(){
var found = $.inArray(query[1], channel);
if(found != -1){
build(found);
current = found;
called = false;
}
}
setInterval(getList, 1000); // Update the streams list every second
The PHP file reads from a file which contains the channel name and channel Nick Name (which is how we want to show it in the webpage) and then I loop through to check and see which ones are active:
<?php
$streamer = array();
$status = array();
$title = array();
$viewers = array();
$i = 0;
$handle = file("streamers.txt", FILE_IGNORE_NEW_LINES);
foreach($handle as $chan){
$temp = explode("-t-", $chan); // Seperate Streamer from Title
$streamer[$i] = $temp[0]; // Streamer is on left of -t-
$title[$i] = $temp[1]; // Title is on the right of -t-
$i++;
}
$i = 0;
foreach($streamer as $index) // Loop through and see what streams are online
{
$json_file = @file_get_contents("http://api.justin.tv/api/stream/list.json?channel={$index}", 0, null, null);
$json_array = json_decode($json_file, true);
if ($json_array[0]['name'] == "live_user_{$index}")
{
$status[$i] = "online";
$viewers[$i] = $json_array[0]['channel_count'];
}
else
{
$status[$i] = "offline";
$viewers[$i] = 0;
}
$i++;
}
// Combine the 3 needed arrays to send through JSON
$data['streams'] = $streamer;
$data['status'] = $status;
$data['title'] = $title;
$data['viewers'] = $viewers;
echo json_encode($data);
I run into a bottle neck once I have so many channels to check. The only solution I can see if to do check half then check another half, but I'm not sure. Here's some links to an active example. The Index Page, The JS Page and The what PHP Returns. Let me know if you have any questions!
