[Beginner] Basic Twitch website integration

[visceral_]

Hello fellow Twitch developers.

I am a new webdesigner that have a problem that im looking for some help with.
The reason why im making a topic is beacuse i had problem understanding the documentation fully.

So my task is that i want to have a simple icon on my clients website, the icon need to flesh whenever the streamer is live.
So what do i need to make this happen? Im using bootstrap and i assume i need to integrate JSON somehow in my project. Is there like a simple way to do this? I dont want to be bog down with a bunch of files and functions i will never use, i just want to tell my website when the streamer is live, links and such should be easy to make.

Now, keep in mind i don’t have that much experience when it comes to webdevelopment and thats why i came here.
I hope some of you are willing to help out a beginner, since you all seem to be pretty advanced users here i figured this would be the best place to ask.

[Baker]

so for example I have made a mockup for my wwebsite to come soon its http://dev.francispbaker.com/Baker in the top right corner you can see the “Offline” when I go live this turns to “online” sadly it doesnt glow, but I have that setup/

[Xzapo]

whats the html you used for the image to swap?

[Baker]

  <h1 id="displayname">
        <a href="/"><?php if($custom_name) { echo $custom_name; } else { echo $display_name; } ?>&nbsp;<span class="label accent <?php if($online){ echo 'live'; }?>"><?php if($online){ echo '<span class="rec">•</span>live'; } else { echo 'offline'; } ?></span></a>
      </h1>

Not html but php.

[OurFlagIsMined]

Just go to https://api.twitch.tv/kraken/streams/visceral_ and decode as JSON. If object stream is null, the stream is offline; otherwise, the stream is live.

If you’re trying to check it server-side with PHP, just Google how to decode the data as JSON and you should find what you need. It’ll come through as part of the HTML though, so it won’t be able to update live; it’ll only update once, the first time the page loads.

If you’re wanting the display to update live, without having to reload the page, then you’ll probably want to have client-side JavaScript query the API at an interval, instead of your server querying on load. Then just have the JavaScript update the display from ‘OFFLINE’ to ‘ONLINE’ or ‘LIVE NOW’ when online status changes.

To make it flash, you can either make an animated GIF, or use HTML5 to do the flashing (Google HTML5 flashing button and you should find plenty of examples).

[visceral_]

Thank you all for the replies.

@OurFlagIsMined, So the problem im having is the whole JSON thing. The javascrips i can probably figure out how to do.(i assume i can do the same thing in jquery?) But the problem im having is getting that information from twitch.

So this JSON thing, is it a package you download and place in your project?

I appologise again for my lack of understanding this.

[OurFlagIsMined]

JSON is like an extension of JavaScript; it’s is just a JavaScript compatible format for sending data, and if you’re writing in JavaScript the basic functions are built in. It encodes the data in almost the same way you do when writing JavaScript code, which makes it very easy to both read and create it with JavaScript programs.

Encode it with JSON.stringify() and decode it with JSON.parse().

You’ve heard of XML, right? Well JSON is just the next evolution that everyone’s adapted to for sharing data between software.

This should help clarify things:
this array of data
{1: "one", 2: "two", ["three", "four"]}
or written as
{"1":"one","2":"two",["three","four"]}
would encoded to
{"1":"one","2":"two",["three","four"]}
in JSON format.

And if you’re using jQuery, as a simple example:
$.getJSON('https://api.twitch.tv/kraken/streams/lirik?callback=?').done(function(data){console.log(data.stream?'LIVE NOW':'OFFLINE')})
will print ‘LIVE NOW’ or ‘OFFLINE’ for lirik’s stream (you can paste it into your browser’s JavaScript console to see it work).

And if you want to get around your browser’s cross-site-scripting limitations, you use a callback as above. If you’re on the same domain, or running the code outside of a browser, or just want to open the JSON URL in your browser to view the data, you don’t need the callback (as a callback WILL change the data you get back; the server will wrap it in a function). To see a live example you can just click the following URL, it should help you understand what you’re checking for:
https://api.twitch.tv/kraken/streams/lirik

So if you want to check the channel status every minute, you could imagine using client-side JavaScript to check once on load and then again every minute on a timer after that; then updating the image / text with jQuery the first time plus whenever it changes.

–OR–

If you wanted to go the PHP route, just poll the same API (no callback, like in the above link), decode as JSON (the function’s built into PHP as well), and check if object stream is null or not. If it’s null, show the offline image / text; otherwise, show the online image / text.

I’m really not good with PHP (nor do I take credit for writing this), so this probably isn’t very clean, but:
`<?php
$channel = “swifty”;
$json_file = @file_get_contents(“https://api.twitch.tv/kraken/streams/{$channel}”, 0, null, null);
$json_array = json_decode($json_file, true);
if ($json_array[‘stream’] == null)
{ ?>
OFFLINE

<?php } else { ?>

ONLINE

<?php } ?>`

You might not want all that right in the body, so feel free to clean things up if you don’t, but the basics are all there and it’s a working example.

[bluefontdesign]

You can use this simple function for a cleaner PHP alternative:

function is_channel_live( $channel ) {
    $twitchRequest = json_decode( @file_get_contents( 'https://api.twitch.tv/kraken/streams/' . $channel ) );
    return ( ! is_null( $twitchRequest->stream ) ) ? TRUE : FALSE;
}

if (is_channel_live("swifty")) {
    echo "WOO I'm live!";
}

[visceral_]

Okey guys i think i have got soething going. However im running into an error.

The user Sjopele gave me some excellent help in PM’s.
This is the first jquery code he gave me.

function streamcheck()
{
$.post(“streamcheck.php”, function(data)
{
if(data == “online”)
{
online();
}
else if(data == “offline”)
{
offline();
}
});
};

function online()
{
$(function(){
$(‘i.fa fa-twitch’).addclass(‘animation pulse’)
});
}

function offline()
{
$(function(){
$(‘i.fa fa-twitch’).removeclass(‘animation pulse’)
});
}

$(document).ready(function()
{
streamcheck();
});

This peice of code runs another file called streamcheck.php located in the same javascript folder.
And here it is.

<?php

$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_URL => ‘https://api.twitch.tv/kraken/streams/zeracheilgames’
));
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
$response = curl_exec($curl);
$checkkey = “language” ;
$position = strpos($response,$checkkey);

curl_close($curl);

if ($position === false)
{
echo “offline”;
}
else
{
echo “online”;
}

?>

But the problem remains, and i get this error in Chrome console.

XMLHttpRequest cannot load file:///C:/Users/Rasmus/Google%20Drive/HTML/Casey/streamcheck.php. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Does anyone know what the error might be?

Thanks again to the user Sjopele who wrote all this and explained it in a way i could understand.

[night]

You don’t need PHP to call Twitch’s API. It can be done completely from JS.

Import jQuery into your page and do the following:

$.getJSON("https://api.twitch.tv/kraken/streams/zeracheilgames?callback=?").done(function(data) {
    if(data.stream) {
        online();
    } else {
        offline();
    }
});

[visceral_]

So if i wanted to check every 30 seconds or so, i would just make what you wrote into a function that is getting called on a timer right?
Or just make it a function and call it whenever the page is loaded?

[livewhiletrue]

Yes, a sort of timer if you want the information to be live. The recommended minimum time difference between API calls is one minute.