# Live vs online (using javascript)

**URL:** <https://discuss.dev.twitch.com/t/live-vs-online-using-javascript/417>\
**Category:** Uncategorized\
**Created:** [January 31, 2014, 7:43pm UTC](https://discuss.dev.twitch.com/t/live-vs-online-using-javascript/417 "2014-01-31T19:43:23Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![normalice](https://avatars.discourse-cdn.com/v4/letter/n/f4b2a3/32.png) [@normalice](https://discuss.dev.twitch.com/u/normalice)\
**Post date:** [January 31, 2014, 7:43pm UTC](https://discuss.dev.twitch.com/t/live-vs-online-using-javascript/417/1 "2014-01-31T19:43:23Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Bufutda](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/bufutda/32/109_2.png) [@Bufutda](https://discuss.dev.twitch.com/u/Bufutda)\
**Post date:** [February 3, 2014, 12:51am UTC](https://discuss.dev.twitch.com/t/live-vs-online-using-javascript/417/2 "2014-02-03T00:51:22Z")

</div>

Yes. The most common way is to make a GET request to [https://api.twitch.tv/kraken/channels/](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.

---

<div class="post-metadata">

**Author:** ![normalice](https://avatars.discourse-cdn.com/v4/letter/n/f4b2a3/32.png) [@normalice](https://discuss.dev.twitch.com/u/normalice)\
**Post date:** [February 3, 2014, 7:02pm UTC](https://discuss.dev.twitch.com/t/live-vs-online-using-javascript/417/3 "2014-02-03T19:02:20Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![Bufutda](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/bufutda/32/109_2.png) [@Bufutda](https://discuss.dev.twitch.com/u/Bufutda)\
**Post date:** [February 3, 2014, 9:46pm UTC](https://discuss.dev.twitch.com/t/live-vs-online-using-javascript/417/4 "2014-02-03T21:46:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![normalice](https://avatars.discourse-cdn.com/v4/letter/n/f4b2a3/32.png) [@normalice](https://discuss.dev.twitch.com/u/normalice)\
**Post date:** [February 3, 2014, 11:12pm UTC](https://discuss.dev.twitch.com/t/live-vs-online-using-javascript/417/5 "2014-02-03T23:12:27Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![normalice](https://avatars.discourse-cdn.com/v4/letter/n/f4b2a3/32.png) [@normalice](https://discuss.dev.twitch.com/u/normalice)\
**Post date:** [February 4, 2014, 2:14am UTC](https://discuss.dev.twitch.com/t/live-vs-online-using-javascript/417/6 "2014-02-04T02:14:25Z")

</div>

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';

```

---

<div class="post-metadata">

**Author:** ![Bufutda](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/bufutda/32/109_2.png) [@Bufutda](https://discuss.dev.twitch.com/u/Bufutda)\
**Post date:** [February 4, 2014, 5:04am UTC](https://discuss.dev.twitch.com/t/live-vs-online-using-javascript/417/7 "2014-02-04T05:04:41Z")

</div>

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

```

---

<div class="post-metadata">

**Author:** ![normalice](https://avatars.discourse-cdn.com/v4/letter/n/f4b2a3/32.png) [@normalice](https://discuss.dev.twitch.com/u/normalice)\
**Post date:** [February 4, 2014, 1:31pm UTC](https://discuss.dev.twitch.com/t/live-vs-online-using-javascript/417/8 "2014-02-04T13:31:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sunspots](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/sunspots/32/1835_2.png) [@Sunspots](https://discuss.dev.twitch.com/u/Sunspots)\
**Post date:** [February 4, 2014, 2:39pm UTC](https://discuss.dev.twitch.com/t/live-vs-online-using-javascript/417/9 "2014-02-04T14:39:29Z")

</div>

> [@normalice](#):
>
> 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…)

You need to make sure you include [jQuery](http://jquery.com/) first.

---

<div class="post-metadata">

**Author:** ![normalice](https://avatars.discourse-cdn.com/v4/letter/n/f4b2a3/32.png) [@normalice](https://discuss.dev.twitch.com/u/normalice)\
**Post date:** [February 4, 2014, 5:21pm UTC](https://discuss.dev.twitch.com/t/live-vs-online-using-javascript/417/10 "2014-02-04T17:21:43Z")

</div>

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> 
```

---

<div class="post-metadata">

**Author:** ![Bufutda](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/bufutda/32/109_2.png) [@Bufutda](https://discuss.dev.twitch.com/u/Bufutda)\
**Post date:** [February 5, 2014, 3:35pm UTC](https://discuss.dev.twitch.com/t/live-vs-online-using-javascript/417/11 "2014-02-05T15:35:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![normalice](https://avatars.discourse-cdn.com/v4/letter/n/f4b2a3/32.png) [@normalice](https://discuss.dev.twitch.com/u/normalice)\
**Post date:** [February 5, 2014, 6:51pm UTC](https://discuss.dev.twitch.com/t/live-vs-online-using-javascript/417/12 "2014-02-05T18:51:52Z")

</div>

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 += '';
            }
    }

}
```

---

<div class="post-metadata">

**Author:** ![Bufutda](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/bufutda/32/109_2.png) [@Bufutda](https://discuss.dev.twitch.com/u/Bufutda)\
**Post date:** [February 5, 2014, 10:06pm UTC](https://discuss.dev.twitch.com/t/live-vs-online-using-javascript/417/13 "2014-02-05T22:06:43Z")

</div>

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](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) is very helpful.

---

<div class="post-metadata">

**Author:** ![normalice](https://avatars.discourse-cdn.com/v4/letter/n/f4b2a3/32.png) [@normalice](https://discuss.dev.twitch.com/u/normalice)\
**Post date:** [February 10, 2014, 5:41pm UTC](https://discuss.dev.twitch.com/t/live-vs-online-using-javascript/417/14 "2014-02-10T17:41:48Z")

</div>

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](http://jquery.com/download/). 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> 

```