Problem accessing Twitch.tv

I’m not getting anywhere on the Twitch.tv project.

On the challenge description page I’ve read about the workaround to avoid exposing a Twitch API key in CodePen, so just to see the API data I used
$.getJSON('https://wind-bow.hyperdev.space/twitch-api/streams/freecodecamp?callback=?', function(data) { console.log (data); });
but it goes into a long wait for a response from wind-bow.hyperdev.space
eventually the console shows:
jquery.min.js:4 GET https://wind-bow.hyperdev.space/twitch-api/streams/freecodecamp?callback=jQuery3100021090263414499155_1476694530123&_=1476694530124 503 (Service Unavailable)

If key https://wind-bow.hyperdev.space directly into the address bar on an empty tab, it also waits for several minutes, then displays
{"status":"Error","statusCode":503,"statusDetail":"Waiting To Serve for wind-bow: No service found running on port"}

I’ve seen comments that this challenge is going to be dropped. Can anyone tell me what its present status is please?

If it still has to be completed, how can I get round this?

Thanks.

Hi,

if you’re talking about the client ID I wouldn’t worry about exposing it.

This is from their website. You only need a client ID, you can forget about the secret.

Once you create a Developer Application, you are assigned a client id. Some authentication flows also require a client secret. You can generate one on the same page as the client ID. Client IDs are public and can be shared (e.g. embedded in the source of a web page), but client secrets are equivalent to a password for your application and must be kept confidential.

And yes it is going to be dropped, or rather become optional. I was going to swerve it myself, but then I thought i needed the practice :slight_smile:

Thanks Mark, will follow up on that.

Info on this challenge is real scattered and a little confusing!

Yes it is, I did alot of googling and read a few sections of those twitch docs over and over but got there in the end.

Interesting. I ended up making a server to store the client-id in .env and perform the api calls, but I guess that was unnecessary. Still good practice though so ¯\_(ツ)_/¯

It looks like wind-bow.hyperdev.space frequently returns errors. Probably overloads on fairly low traffic - it’s free, so I doubt it’s very robust. I wish more API endpoints would provide a free DEMO_KEY, like NASA’s APIs do. They allow the DEMO_KEY plus a specific IP a modest rate limit. That way you can hard-code the DEMO_KEY and not your real one (which is free from NASA, but I don’t think it rate-limits based on IP).

Here’s the error curl gives me:

{
“statusCode” : 503,
“statusDetail” : “GetPort: Application failed to start on container wind-bow”,
“status” : “Error”
}

On the other hand, at the same time, twitchtv user channels are unresponsive if you go directly to them in the browser. So it could be a twitch issue.

Good practice indeed.

I read about that being a solution but I didn’t understand half the acronyms!

Yes, I’ve found Twitch inconsistent in its responses. Clicking a link on https://codepen.io/FreeCodeCamp/full/Myvqmo/ sometimes does nothing, but entering same URL in address bar loads w/o problem.

I’m running into the same problem and it’s very frustrating. The getJSON call to FCC’s twitch API wrapper is spinning forever, then just comes back with error. In chrome dev tools under the network tab it’s showing the call as “Pending”. The same thing is happening on the sample FCC codepen right now https://codepen.io/FreeCodeCamp/full/Myvqmo/.

I had to go back and use the regular twitchtv url/api : https://api.twitch.tv/kraken/streams/

But, I also had to apply for a Client-ID on twitch’s site and hard-code that into the header of the ajax call, like:

var getReq = {
    "headers": {
        "Accept": "application/vnd.twitchtv.v3+json",
        "Client-ID": "YOUR_CLIENT_ID_GOES_HERE"
    },
    "success": function (data) {
     // do something with the data
    },
     "error": function (){
         console.log("could not connect!");         
    }
};

// set your url value here
getReq.url = "https://api.twitch.tv/kraken/streams/" + "THE_STREAM_NAME_HERE";

//Then make the ajax call - I'm using jQuery
$.ajax(getReq);
3 Likes

Thanks that’s very helpful as well. For now I’m following this suggestion: “Instead of using Twitch’s API, we recommend hard-coding this JSON405 into your app as a variable. It is a series of responses for different accounts from Twitch” from http://forum.freecodecamp.com/t/use-the-twitchtv-json-api/19541
but once I have it working with that pseudo-call, merging my code with yours to do a real call should be easy. I already got a client ID.

1 Like

Ah, I see! This solution hard-codes/fakes the response from twitchvt. The weird thing is that using the regular twitch API with their free,public, shareable Client-ID (which means it’s ok to hard-code it into your project), everyone should get the data just fine. My problem is that once you get the data, linking to a twitchtv page from within codepen doesn’t work!

I’ll be interested to know if you hit the same problem!

I used this and it worked. I’m now getting back stuff from twitch :).

One small typo in your code, remove the “var” from this line
// set your url value here getReq.url = "https://api.twitch.tv/kraken/streams/" + "THE_STREAM_NAME_HERE";

2 Likes

Indeed! That’s what I get for typing things out instead of cut-n-paste! :slight_smile: I just fixed it!

Yes, I get this problem even with the sample linked to on the challenge page. Clicking the link to ESL_SC2 just shows a black page. But opening a fresh tab and pasting the same address in works fine. Almost as if twitch.tv is treating requests differently if referrer is codepen.io/FreeCodeCamp/full/Myvqmo/

I’ll see if it also occurs with my own code once complete.

The wrapper didn’t work, but yours worked like a charm. This was a truly confusing API, thank you!

1 Like

You need to link like this:

window.open(URL, '_blank');

Otherwise CodePen tries to load it into their iframe and most sites don’t take too kindly to that. This is the same as, in HTML:

<a href='URL' target='_blank'>Click Me!</a>

EDIT: Should have mentioned, target _blank causes the browser to open in a new tab/window.

I tried using target=“_blank” in my html, but it doesn’t work! Same problem. What browser are you using and on what OS?

As a matter of fact, I just opened your pen on codepen and it’s doing the same thing, at least on my Linux machine in both Chrome and Firefox (all latest). After clicking on one of your “online” links, a new window opens (in a new tab) and the page content just “spins” and never loads. All I see is the twitch side menu. I see the same security issue/errors as on mine and others in the console using Chrome (in Firefox the errors are a little different):

Uncaught DOMException: Failed to set the ‘domain’ property on ‘Document’: Assignment is forbidden for sandboxed iframes.

Do you get a different behavior? Do you get no console errors about “sandboxed iframes”?

1 Like

I just looked at dT-Nick 's page and he avoids the issue with a codepen url that begins with

s.codepen.io

Is that what you are doing too? I can’t get that behavior from my account, or your regular codepen account. Do you know how to get the s.codepen.io link? I can’t find it.

Hi,

thats debug view.

1 Like