Live vs online (using javascript)

1

I’m not entirely sure which category this falls into, but the thing is this: i have about 100 or so “badges” I’d like to display on a page, but I want to filter them out such that only the ones that are currently live are displayed.

Now, it’s easy to ‘hide’ a badge depending on some condition, however I do not know how to extract the condition. Is there a way, using javascript, to know if the stream on the other end of a url is currently live or not?

2

Yes. The most common way is to make a GET request to https://api.twitch.tv/kraken/channels/test_channel, where test_channel is the channel name you’re wanting the status of. The reply is going to be JSON, and will contain a stream property. If the stream property is null then the stream is not live. If it is an object then the stream is live.

1 Like
3

cool. ty. however, I don’t actually know how to make a ‘get’ request in javascript. Everything I try by googling it doesn’t work…

Or, the link could be incorrect? I tried (for example):
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open( “GET”, “https://api.twitch.tv/kraken/channels/normalice”, false );

this gives me the same result (basically everything null) when i’m online as when i am offline.

4

Shoot that was my bad. The link you want to make your request to is https://api.twitch.tv/kraken/streams/normalice. Sorry about that!

5

that’s alright. It seems my problem runs a little deeper, though. I still get the same thing for an online as an offline. This could be because everything I read about this process says that I should include this line:
xmlHttp.send();

however, this doesn’t work. I’ve opened it up with the Mozilla ‘debugger’ thing, and once it gets to this line, the script stops functioning. I’ve also tried xmlHttp.send(null); Also doesn’t work. Any ideas?

6

hm. so, i found a problem was that i was using an .html file saved to my desktop, and for some reason the .send thing doesn’t work there.

But anyway, this also makes it difficult to check the variables, so I don’t know what to expect. Do you know exactly how I can use this in java? I mean exactly, because I won’t be able to test this on my own (I’m going to have to submit it to the live server, which I can’t use to toy with, unfortunately…)

xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", "https://api.twitch.tv/kraken/channels/normalice", false );
xmlHttp.send();
if ([***what goes here?***])
   //show frame
 document.getelementbyID('frame1').style.width = '160px';

else
//hide frame
 document.getelementbyID('frame1').style.width = '0px';
7

Well, if you’re willing to use jQuery you could easily do something along the lines of:

$.ajax({
  url: 'https://api.twitch.tv/kraken/streams/normalice',
  dataType: 'jsonp',
  type: 'get',
  success: function(data) {
    if(typeof data.stream === 'object') {
      document.getelementbyID('frame1').style.width = '160px';
    } else {
      document.getelementbyID('frame1').style.width = '0px';
    }
  }
});
8

is there something special i need to do to use the $.ajax thing? It isn’t working as is, and from what i read about it the syntax is correct.

9

You need to make sure you include jQuery first.

10

This nearly works! Thank you so much. However, there seems to be a timing issue. When I step through it with the debugger, it almost works (for some reason it shows/hides the next frame instead of the current), but when I just let it run on its own, it does not work. I.e. for 14 frames, starting at frame 1 if i go through the debugger, if frame1 is offline then it will hide frame2. If frame2 is offline it will hide frame3, and so on. However, if i exit the debugger and just let it run, it hides and shows nothing. I’m guessing this is all the same timing issue, but I don’t know how to go about fixing it…

<script src="jquery.js"></script>

<script>
window.setInterval("reloadFrame();", 7000);

function reloadFrame() {
	for (var i=1;i<=14;i++){
	var nm = 'frame' + i;
	var e = document.getElementById(nm).attributes[4].nodeValue;
	e = e.split("/");
	e = e[e.length-2];
	var ur = 'https://api.twitch.tv/kraken/streams/' + e;
	$.ajax({
  		url: ur,
  		dataType: 'jsonp',
  		type: 'get',
  		success: function(data) {
    		if(data.stream === null) {
      			document.getElementById(nm).style.width = '0px';
    		} else {
      			document.getElementByID(nm).style.width = '160px';
			document.getElementById(nm).src += '';
    		}
  		}
	});
	}


}

</script>

<center><iframe id="frame1" src="http://streambadge.com/twitch/custom/2B2B2B/FFBF00/FFBF00/fml_seksi/" style="border:none" scrolling="no" height="52px" width="160px"></iframe></iframe><iframe id="frame2" src="http://streambadge.com/twitch/custom/2B2B2B/FFBF00/FFBF00/FFAMastersleague/" style="border:none" scrolling="no" height="52px" width="160px"></iframe></iframe><iframe id="frame3" src="http://streambadge.com/twitch/custom/2B2B2B/FFBF00/FFBF00/whiteandnerdyyy/" style="border:none" scrolling="no" height="52px" width="160px" ></iframe></iframe><iframe id="frame4" src="http://streambadge.com/twitch/custom/2B2B2B/FFBF00/FFBF00/jasonkrav_/" style="border:none" scrolling="no" height="52px" width="160px"></iframe><iframe id="frame5" src="http://streambadge.com/twitch/custom/2B2B2B/FFBF00/FFBF00/warchiefrich/" style="border:none" scrolling="no" height="52px" width="160px"></iframe></iframe><iframe id="frame6" src="http://streambadge.com/twitch/custom/2B2B2B/FFBF00/FFBF00/kalipson/" style="border:none" scrolling="no" height="52px" width="160px"></iframe></iframe><iframe id="frame7" src="http://streambadge.com/twitch/custom/2B2B2B/FFBF00/FFBF00/pradogo/" style="border:none" scrolling="no" height="52px" width="160px"></iframe></iframe><iframe id="frame8" src="http://streambadge.com/twitch/custom/2B2B2B/FFBF00/FFBF00/starshapedsthlm/" style="border:none" scrolling="no" height="52px" width="160px"></iframe></iframe><iframe id="frame9" src="http://streambadge.com/twitch/custom/2B2B2B/FFBF00/FFBF00/roxkisabver/" style="border:none" scrolling="no" height="52px" width="160px"></iframe></iframe><iframe id="frame10" src="http://streambadge.com/twitch/custom/2B2B2B/FFBF00/FFBF00/sqktgw/" style="border:none" scrolling="no" height="52px" width="160px"></iframe></iframe><iframe id="frame11" src="http://streambadge.com/twitch/custom/2B2B2B/FFBF00/FFBF00/rmmasaa/" style="border:none" scrolling="no" height="52px" width="160px"></iframe></iframe><iframe id="frame12" src="http://streambadge.com/twitch/custom/2B2B2B/FFBF00/FFBF00/cheeron/" style="border:none" scrolling="no" height="52px" width="160px"></iframe></iframe><iframe id="frame13" src="http://streambadge.com/twitch/custom/2B2B2B/FFBF00/FFBF00/njw0819/" style="border:none" scrolling="no" height="52px" width="160px"></iframe></iframe><iframe id="frame14" src="http://streambadge.com/twitch/custom/2B2B2B/FFBF00/FFBF00/jehu54/" style="border:none" scrolling="no" height="52px" width="160px"></iframe>
</center>
11

I didn’t actually go through and test this but my first guess would be that the ajax call is asynchronously running and the loop keeps going before the request is done. By the time the request has been processed the nm variable has already moved on to a different frame.

12

cool. one step forward another step backward… I figured out how to sync it, but now I don’t know how to make the variable useful. The returned variable is, once again, undefined regardless of stream status. Here’s what I have:

function reloadFrame() {
    for (var i=3;i<=14;i++){
    var nm = 'frame' + i;
    var ur = document.getElementById(nm).attributes[4].nodeValue;
    ur = ur.split("/");
    ur = ur[ur.length-2];
    ur = 'https://api.twitch.tv/kraken/streams/' + ur;
    var em = $.ajax({
	type: "GET",
        url: ur,
        dataType: 'jsonp',
	async: false}).response;

            if(em.data.stream === null) {
                document.getElementById(nm).style.width = '0px';
            } else {
                document.getElementByID(nm).style.width = '160px';
            document.getElementById(nm).src += '';
            }
    }

}
13

Instead of making AJAX synchronous (a really bad way to go about things), just work with callbacks. Pass a function reference to reloadFrame() and call it in $.ajax’s success with the data it needs to parse. This stack overflow question is very helpful.

14

I got it working. In case anyone else wants to know, I’ll post the code here. You need the “jquery.js” file saved in whatever directory the html file containing this script is in. To make the jquery.js file go here. Open the link that says “Download the compressed…” It will take you to a huge wall of text. Copy it and paste it into a new text document. Save that text document as “jquery.js” and you are done. The code:

<script src="jquery.js"></script>

<script>
window.setInterval("reloadFrame();", 15000);

function reloadFrame() {
    for (var i=1;i<=[number of badges];i++){
    var nm = 'frame' + i;
    var ur = document.getElementById(nm).attributes[4].nodeValue;
    ur = ur.split("/");
    ur = ur[ur.length-2];
    ur = 'https://api.twitch.tv/kraken/streams/' + ur;

var wt = document.getElementById(nm).style.width;
showhide(nm,ur,wt);
}
}

function showhide(nm,ur,wt){
    $.ajax({
        url: ur,
        dataType: 'jsonp',
        type: 'get',
        success: function(data) {
            if(data.stream === null) {
		if(wt=="160px")
                document.getElementById(nm).style.width = '0px';
            } else {
		if(wt != "160px"){
                document.getElementById(nm).style.width = '160px';
            	document.getElementById(nm).src += '';
		}
            }
        },
    });

}
    
</script>

<center><iframe id="frame1" src="http://streambadge.com/twitch/custom/2B2B2B/FFBF00/FFBF00/normalice/" style="border:none" scrolling="no" height="52px" width="0px"></iframe><iframe>....additional frames here...
<script>reloadFrame();</script>
</center>