Check whether channel is online or not via js [SOLUTION FOUND]

[Jonathan_x64]

Hi!
I want to display my channel status to my website visitors (site is based on wordpress).
Right now I’m using special widget for this-but it loads up stream instantly (=>consumes traffic) and also uses Flash, which loads up users’ CPU and loads relatively slowly on its own.
I also have very basic knowledge of HTML and JS.
What I want to do now is a simple “text box” (which allows HTML and js), where I could place script that looks like:
IF channel is live THEN display img with link via innerHTML
ELSE (f channel is offline) display another image with same link via innerHTML

So, how do I write this? I don’t know how to “ask” server for channel status, and I barely know how to realize that function.

Any help would be appreciated, thanks.

[AidanDaniel97]

here give this a try:

$.getJSON('https://api.twitch.tv/kraken/streams/' + YOUR_CHANNEL_NAME, function(channel) {

    if (channel["stream"] == null) { 
        //THEY ARE OFFLINE DO WHATEVER HERE

    } else {

        //THEY ARE ONLINE DO WHATEVER HERE
    
    }



});

[Jonathan_x64]

Thank you for a quick response!
I’m trying to implement this, but there should be an error somewhere in this code. How can I debug/search for it? Maybe you can show me, where it is?)
Screenshot: http://puu.sh/h8IAK/6fa92aad63.png
Code snippet: http://pastebin.com/hMKyM4Md

[mkze]

You need to make the request using jsonp, example:

$.ajax({ 
     url:'https://api.twitch.tv/kraken/streams/Jonathan_x64',
     dataType:'jsonp',
     success:function(channel) { 
           //logic here
      }
 });

[Jonathan_x64]

1. I get the same: “ReferenceError: Can’t find variable: $”. Can you help me to fix it, please?)
2. In your code, “//logic here” executes if channel is live, or if request succeeded no matter what the result?

[mkze]

Sorry, I just looked at your screenshot and now I see the issue. I thought you meant the CORS error that is displayed when querying the endpoint without jsonp.

You need to include a script reference to jQuery before making the request like so:

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

(place it above your existing <script> tag )

The //logic here will execute when the request succeeds, it really should have an error function declared too like so:

$.ajax({ 
     url:'https://api.twitch.tv/kraken/streams/Jonathan_x64',
     dataType:'jsonp',
     success:function(channel) { 
          //request succeeded, check channel status here
     },
     error:function() {
          //request failed
     }
 });

[Jonathan_x64]

Alright guys, thank you very much for your answers.

Final piece of code that seems to work, in case anybody will stumble upon this page while googling for the same problem. Idea was to display different images of Twitch channel logo depending on status is LIVE or not, and existing wordpress plugins or other solutions were not suited for me, because I wanted exact image with exact size.

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$.getJSON('https://api.twitch.tv/kraken/streams/Jonathan_x64', function(channel) {

    if (channel["stream"] == null) { 
        window.alert("nie wow");

    } else {
        window.alert("wow");
    
    }
});
</script>

window.alert here must be replaced with document.write() or similar function. “wow” is displayed when stream is online.

/thread

[Fugiman]

FYI, I wrote a library to handle the common use case of “I want an image to change based on whether a channel is live or not” https://github.com/Fugiman/Twitch-Channel-Status

At it’s core, it does exactly what’s described in this thread, but batches the requests if you have multiple images.