Real Time Notifications With the Twitch API

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

Jason: Hello, everybody. And welcome to another episode of Learn With Jason. Today on the show, we're bringing back Prince Wilson. How you doing, Prince?

Prince: I'm doing amazing. Thank you, Jason.

Jason: Thank you for the sub, Ben. So Prince, I have said this many times before. I'm going to say it again. You are one of my all-time favorite people. Every time I hang out with you, I feel like I leave with a bigger smile than I walked in with. And I am just super excited to be hanging out with you again on the show. For those of us who are not familiar with you, can you give us a little bit of a background?

Prince: Yeah. I am a web application developer at a company where we help students from grades 3 through 12 be able to read articles about current events. So things happening in the world, things -- anything from the latest news to also things about like how is video game shaping our interactions while we're in the pandemic, which is definitely a topic that kids really like to know about, to know how video games work, which is very fun. They very much like video games.

Jason: Yeah, yeah. Well, and so you also stream, right?

Prince: Yes.

Jason: Yes, let's do the -- oh, I have a shout out command, and it sometimes works. Let's try it. What is your --

Prince: MaxcellW.

Jason: Why isn't that showing up in my thing? It was not giving me the -- whatever. Usually it auto completes. Nicky, I see what you're doing. Let's not troll Jason, Agatha wink. It's all hurtful. You hurt me, chat. Okay. So one of the things you've been doing while streaming -- I mean, you're kind of all over the place. You've been doing -- you work in web dev during the day. You've been streaming a lot of Rust stuff. You were on the show before to teach us Rust, which was an absolute blast. What else have you been working on lately? I feel like that's relevant to today.

Prince: Yeah, so recently, or I guess like in the last bit ago, I was working on some interactions with my lights. So I have these nano leaf lights behind me. On my Twitch chat when I have people spend channel points or they do any subscriptions, the lights actually change. So that was a big part of what I was doing back in January, just learning how networks work and also how does the Twitch API work. Man, is it ever changing.

Jason: So hold on. That means if I -- wait, does it work now?

Prince: It doesn't work now.

Jason: I was going to go start changing your lights.

Prince: I wanted to make sure. So one of the big things is like I realized after the fact when I figured out how to get it all working is I didn't have a mechanism to stop it from working. For instance, when I'm not streaming, I don't want y'all to turn on my lights. So I figured out that part. So that way no one can turn on my lights when I'm not streaming.

Jason: Oh, yeah. Some day I'm going to have to learn from you about setting boundaries. (Laughter) So today, we're going to play with some of the similar APIs, specifically we were going to look at the event sub API. So can you talk about what that API is and how it works?

Prince: Yeah, so I think to kind of give some background for everyone, the Twitch API primarily like works similar to what you've been using before, which is you make a request to a particular service of Twitch's, and it says, cool, give me some data back directly then and there. Whereas something like the event sub is more so I'm saying whenever an event fires inside of Twitch, send some sort of event to this particular location, and I will have some end point that's going to be listening for that data to come through. So like that's kind of like the difference between everything, as opposed to I'm requesting data, it's actually sending me data.

Jason: Mm, that's really nice. And the event model is one of my favorites because I love this idea of being able to not have to like actively go out and seek things. It always feels really wasteful if I'm running something on a loop and 99% of the time it's like, no, nothing happened.

Prince: Exactly.

Jason: I like that idea of kind of on-demand work. Also, Ben, I see what you're doing. Real-time boundary setting for people who are very online with Prince Wilson. That's exactly what's happening today. And thank you very much for the sub. I want to say this with an Italian accent. Is that a problem?

Prince: Let's just not. (Laughter)

Jason: Thank you very much for the sub. I very much appreciate it. And today is going to be a fun day to sub because once we get this working, you will be able to trigger thingies on the screen. We're not sure what those are yet, but we're really excited about them. So this is kind of a cool -- so the event sub, it works for more than just subscriptions, right? The sub is not like Twitch subscriptions. It's like a subscription to events, and those events can be multiple types, right?

Prince: Yes, exactly. We're not just talking about Twitch subscription. We're talking about listening for specific events. These can be things from subscriptions. These can be people following, hype trains, raids, any kinds of events that Twitch affords you or has the ability to share with you. That's almost their entire API of like things that you're already doing on Twitch. That's used to power a lot of the interactions you're already doing.

Jason: Nice. That's really great. And it should make things easier. Before what I was doing for subscriptions is parsing the IRC stream. You can do that, it's fine, but this should make my life a lot easier because it doesn't have to be hard.

Prince: Yes, exactly.

Jason: Maybe that's the mantra for today. It doesn't have to be hard.

Prince: And that's the beauty of our programming. The goal of programming is not to just leave everything convoluted, make it very rubber band and tape put together. It's to make it so that way you have things you can do for later on. The event sub is like a second iteration of their process with regards to being able to say like, cool, we don't want to use just web hooks. We want you to determine like whatever kind of model you want to have. So that also affords you the ability to do things like pub sub events. If you're like, I don't want to do web hooks, you can do other types of things, like subscriptions.

Jason: That's really fun. Okay. So maybe this is a good time to switch over. We can actually start looking at some things. So let me flip us over into programming view. And before we get too deep in, a couple quick reminders. First and foremost, if your not following Prince already, go follow him now. If you're not following Prince by the end of this episode, I will find you. In addition to that, we have a new -- we've got live captioning today. And we have -- oh, no. Okay. So we've live captioning today. We have Rachel with us today doing live captioning. Thank you so much, Rachel, for being here and making this show more accessible for everybody. That means a lot. That comes from White Coat Captioning. White Coat Captioning is here with us every week. That is made possible through the generous support of our sponsors. Netlify, Fauna, Auth0, and Hasura all kick in to make this show more accessible. That's a very nice thing. I like that a lot.

Prince: Shout out to all them.

Jason: So make sure you go over to the home page. Follow the home page. (Laughter) James, that's not the intended -- I didn't follow Prince so you'll show up at my house. That's not how this works. But head over to the home page. That's where the live captioning is. You can also -- any of these links are clickable so you can jump over and check out those sponsors. So with that, Prince, if we want to get started, where is the best place to get started?

Prince: Let's go into the event sub documentation first. So that way we kind of see like, cool, these are the things we can do. And then go from there.

Jason: I have a confession to make. I don't know if y'all noticed this. I switched to Edge yesterday. I don't even know how I feel about it. Like, I feel weird. Did something just go like super weird with my overlays? Did y'all see that?

Prince: I think something with the submarine. I think the submarine may have caused some issues. I don't know what that was. But for some reason, there was a big old party Corgi.

Jason: Maybe it just wasn't loading. Okay. Everything seems to be working. Sound is back. That was broken on Tuesday. I didn't do anything, I just waited. But yeah, do I feel on the edge? I do feel on the edge. So the side tabs, here's what I've decided. The top tabs are great. They're not bad. But here's what I like about this. I like that they're mostly out of the way, and I really like the sleeping tabs. That is very nice. Yeah, yeah. Okay.

Prince: This is going to feel like the time when people were like, wait, why is your file explorer on the right-hand side as opposed to the left-hand side? This is what it's going to come down to.

Jason: That's really where I'm at, right. I know people don't like my file explorer on the right-hand side, but I swear by it. Being able to open and close that drawer without changing the code around, game changer. So back to the scheduled program. Here's the event sub. (Laughter) So looking at this, we've got -- let's see, long term, our plan is -- so Twitch got a little feedback. This does not inspire confidence. Okay. So let me tell you what was supposed to happen. (Laughter)

Prince: Sorry. We're just two people who like to laugh a lot. This is not -- oh.

Jason: Okay, all right. All right. Here we go. I'm paying attention now. (Laughter) I'm ready and paying attention to you. What should I do next?

Prince: Okay. (Laughter) So, sorry. (Laughter) I'm a contagious laugher. Once you started, I'm not able to stop.

Jason: Sorry. I just remembered, we have a new sound effect. It was maybe Linda.

I think we need adult supervision.

Jason: I think I need to merge it. Hold, please. What's the website? This is my website. I have a pull request for new commands from Linda. Thank you, Linda.

Prince: Amazing. I love that. We're here for it.

Jason: We're going to confirm that squash and merge. So give that a couple minutes, and then you're going to be able to run jackstack and youmatter.

Prince: Wait, can it do it live while we're on the show?

Jason: It honestly should be as soon as this finishes building. So if we go to app.netlify.com. Also, did y'all see Netlify stories yet?

Prince: Oh, my god. I am here for it. Noodle is my favorite.

Jason: Noodle is pretty great. Here, let me move the sound over so y'all can hear this. And we'll listen to one of these because I think this is going to be a strong feature. I hope y'all are getting ready to make your own Netlify stories. Here's Noodle. Anyway, these are great. You should definitely check out Netlify stories. It is the hot new feature from Netlify. Let me drop a link. Y'all go check this out. But okay, cool. So go check that out. That's fun. But let's look at Learn With Jason here. It's building. So as soon as this finishes building, which should be any second now -- uh-oh, that looks like an error. Is that an error?

Prince: It looks like a warning. Just a suggestion.

Jason: That's fine. That's fine. We're okay with that. Oh, this is the lighthouse stuff. Is my site still fast? Oh, shoot. What did I do? I did something bad. I'll go fix that later.

Prince: Ouch.

Jason: But in the meantime, that's now merged, so you should, without any changes, somebody run jamstack. Linda, you want to do the honors? Oh, Nicky's got it. Did it work? Is it going to do it? I shouldn't have to reload. It should just work. Come on. Come on. Do the thing.

You hackers. You dirty hackers.

Jason: Oh, no. Maybe I have to -- but it's live now. It's live. I said do the thing. Turn it off and on again.

Prince: Is this where we're going?

Jason: We shouldn't have to turn it off and on again, but I guess we can. Let's reload the thing. I want this to work. I'm really excited about it.

Prince: I'm here for it. This is all connected, right? It's all about Twitch stuff. So I'm here for it.

Jason: Exactly. Somebody try it again. Give me a jamstack. No, why are you like this? Do I need to reload in Stream Blitz or something? Let's see. Streamblitz.com. Does this website still work? Let's find out. Oh, god.

Prince: Let's throw that somewhere else.

Jason: Yeah, let me get this off screen, then we're going to do that. Oh, geez. Oh, geez. Get out of here. Killing me. All right. Okay. Maybe this isn't the best use of our time. Maybe I should fix this on my own time.

Prince: We can come back to it.

Jason: Yeah, let's come back to it. I'm not going to do this right now. At some point in the future, we should be able to get that working. It'll happen eventually, some day.

Prince: We're here for it still.

Jason: But yeah, so I did just refresh the overlays, and that doesn't appear to be working. So my assumption is I broke something. Which seems to be the most likely outcome of what's going on here. But I am very excited about it because these are very funny. Like, this is just -- I'm ready. I'm ready for these.

Prince: Oh, my god. I'm so ready.

Jason: So looking at event sub, it's a subscription, and these are the events we can subscribe to now.

Prince: Yes.

Jason: Okay. So gone online. Oh, that's a useful one because right now I just run it on a timer. Probably make that better. New follower, new subscriber, cheers, and channel points. Channel points is exciting. I don't use channel points right now, and I really need to. Because I just haven't even looked at them yet.

Prince: There's such a slew of different things you could be doing as far as the Twitch API. If you go to the left-hand side, you'll see it says event sub, guide, and also subscription types. So we can take a look specifically into the subscription types we're doing. This is the entire list of all things that you can use right now with the event sub model.

Jason: We got raids, bans, un-bans. This is not funny, but there's a part of my that wants a ban subscription so like a hammer just ban hammer and pow! Whenever you ban somebody from the channel. I won't do that. We don't need to give those trolls any attention.

Prince: True.

Jason: Moderators. Okay. So any one of these things I can get notified when they happen to any service of my choosing.

Prince: Yes.

Jason: Oh, that's exciting. That's really exciting. Okay. So let's do this. Let's figure out how we want to build one of these. So what do you think is the easiest way? If we just want to get the proof of concept in here. Like, how -- should I just stand up an HTML page? What do you think the easiest way is?

Prince: I think a basic HTML page would be fine. We can even take it a step like back. So one thing to note is we're listening for web hooks. We're going to have to have something that's going to be listening for events coming to us at some point as well. So in the case of let's say we have a subscription, we need something to be able to be listening for requests, something like -- you can make a Netlify function that can take in the data. Then you can do anything with it. Does that make sense?

Jason: Yeah, something to take in the data, and then we can do anything with it. So it needs to be able to listen. And then to get it to a front end, we need some kind of a transport layer for that. So what would the easiest thing to do here be? I feel like maybe -- is there a service that does this? Because a Netlify function would listen, but then we'd have to -- the front end would still have to pull to get whether or not data came in. So we need like a web sockets or GraphQL subscription or something like that.

Prince: Maybe we just do something with a Netlify function so we can at least say we get the data. Then we can go from there. That would probably be the easiest.

Jason: That makes sense. Let's do that. So here's what I will do. I will npm init yes. Then I can open this thing up. And where's my code editor going to go? Hello? Here you are. So in here we have just the package.json. There's not anything in it. So we can leave that. I'm going to use the new Netlify functions. Let's call this Twitch subscription.js. This is what it will be called. Then I'm going to export handler. That will be an async function. Or I don't even need to do that. I can just do it this way, and we'll get the -- right now we won't do anything. We'll just do status code of 200 and a body of ok so we can check whether or not this is working.

Prince: Perfect. This is like my exact process of things. Just make it work first then take it steps further from there.

Jason: This is kind of like -- I just have to work this way because otherwise I'm like, okay, we just did eight things. Which one of them broke?

Prince: Exactly.

Jason: So I should be able to go to Netlify functions and Twitch subscription, and it says okay. Perfect. So a couple things just happened that may have seemed like magic because I went very fast. So to just call those out, I set up a new package.json using a CLI command. I ran npm init-y. That means it just accepts all the defaulted, which is like the folder name and version 1.0 and stuff like that. Then I used VS code's built-in code command. Then I ran Netlify dev. So this is the Netlify CLI. That opens up Netlify dev. Because I have a folder called -- or I guess two folders, Netlify functions, and inside I had a function. It knew to pick that up and run it. So you don't have to configure that anymore. You can just drop them in and they work. That lets us run this local.

Prince: Very neat.

Jason: So that is -- what was that, one minute to serverless functions local dev? Now I'm ready. I'm ready to gon to the next thing. Because so far we haven't done anything with Twitch yet. We've just set up a little basic friend.

Prince: Excuse me. So one of the things we could be doing from this point forward is then being able to say like inside of the event -- we're going to be structuring what happens when we receive an event from Twitch. So inside of here, we're going to know if we're receiving something from Twitch because there would be a few headers coming our way. Specifically, there's one that's going to be the Twitch-eventsub-message-type. Woo! So many things.

Jason: Okay. So headers, Twitch-eventsub-message-type.

Prince: One thing I notice with at least Netlify, and I don't know if this is true, you can correct me, is even though I expected them to be like capital case, they all came out lower case. I don't know if that's a Netlify thing or it messes with like the casing.

Jason: I wonder if it does. We do a little bit of processing, so we might do that in the name of normalization. So let me --

Prince: Yeah, so we'll just do all lower case. Do you have a fancy thing to just -- what?

Jason: It's built into VS code. You can do -- I just did command-shift-P to open this command panel. You can do lower case, upper case, and title case.

Prince: Wow. I had no idea that was a thing. That definitely is very neat.

Jason: Aydrian in the chat is saying it's an AWS thing.

Prince: Interesting. I had no idea. But today we learned. So the thing that it's going to be doing specifically is we're going to get the message type. It's going to be equal to our notification, meaning that we've received something from Twitch as opposed to it doing something like checking whether or not our hook is available. So like there's kind of two steps that happen. One is check does this Twitch hook actually exist. The second step is now that we know that it exists, also make sure it like is valid, like a correct notification being sent. That's what we're going to be doing. So we'll make a little check and basically is it notifications.

Jason: Okay. So I'm doing a little bit of defaulting here so if we run this locally -- because it's still running locally, right? If I go out here and refresh, it won't fail now if we don't actually have a type.

Prince: Oh! I like that.

Jason: Only for the sake of -- like honestly, if we don't get a type, we probably want to throw an error. For the sake of development, I want to make sure we don't get failure. So this is nullish coalescing, is what this feature is called. It's a double ASCII boy.

Prince: I have so many questions, Jason. I always come up with more things of how it happens. But we're going to make it happen.

Jason: Yeah, I find that's most people's experience with me. They meet me and as our relationship grows, they're just like, I have more questions. Will that work with Netlify functions? Yes, if I update to the right node version. So which node version am I in? I'm running 14, which is working. In order to make this work, what I'll have to do is node v into nvmrc. And now Netlify will pick this up.

Prince: I'm learning all kinds of things.

Jason: Would a logical work? I mean, yeah, you could do this as a turner, as an AFL. There's a million ways. I'm using the new hotness because they're very --

Prince: We're here for it.

Jason: Yeah, when I do get to talk about nullish coalescing except if I'm in a room full of nerds, huh? Yes, functions should pick up.

Prince: Wait, can we just like -- oh, wait. Now we're just doing things that I'm like, oh, I don't know if this can actually work!

Jason: I don't know. Let's find out. Let's set this up and deploy it. No, I will connect this with -- okay. So GitHub repo create, Learn With Jason, Twitch event sub. It's going to be public. Yes. Okay, so then I can git push. I need to add everything, don't I? Git add everything. Then I can git commit am, pushing buttons to see if it works. Okay. Then, thanks to this handy little shortcut that I believe Chris Biscardi showed me, now I can click that and that'll -- oh, it opened up in the wrong window. I'll just copy/paste it.

Prince: Oh, because it's GitHub.com.

Jason: It's an alias. We're going with power workflows.

Prince: Just efficiency. Truly.

Jason: So that's all working. Then I can -- or let me drop this in the chat for y'all. And then I can Netlify init. And we will create a new site, put it on my team. We'll call this Twitch event sub. Hopefully that's not taken. It's not, perfect. I don't have a build command, so I'll leave that blank. My Netlify functions folder is there. And let's just not have a -- yeah, we're happy. Look at it go. So here we go with our function all set up now. And it should be deploying. So if I go out here, we should see this thing built in a few seconds here. Okay. So it's built. So now let's go see if we're right and then VMRC does what I want. So that doesn't work because there's no homepage. But we'll go to Netlify functions.

Prince: I don't remember. Twitch subscription?

Jason: No! You were right, it doesn't support that version. Womp-womp.

Prince: At least we figured it out now as opposed to having written all the code.

Jason: So let's do this. We'll do it this way, and then we can do like -- actually, can I just -- I can just do this.

Prince: Yes, you could do something like that. I think that would be all right.

Jason: This one? Okay. So that still works, and that'll deploy, I think.

Prince: Yeah, someone in the chat had suggested that is also like an alternative. That's totally valid, but I'm also here for whatever the word is.

Jason: Nullish coalescing.

Prince: I love it.

Jason: Yeah, so Chris, that's a good point. AWS does support node 14. So we just need to figure out -- and honestly, it might be one of those things where it does work and I'm holding it wrong. That is a very --

Prince: Environment variables. Could be all sorts of things.

Jason: There we go. It's doing the thing, y'all. So we have a deployed function. We could drop this in now as an event sub, and it would get fired. It wouldn't do anything because it's not detecting stuff, but it would tell us our event type, theoretically.

Prince: We could do that. That is true.

Jason: If you were going to do this, how would you start? Would you go straight to Twitch, or is there a way to do it locally? How do you kind of work this flow?

Prince: I think for me, I try to do as much as I can locally. So Aydrian actually mentioned it in the chat, which is what I was going to go towards. That's going to use the Twitch CLI. So not only are we going to have local development where we're going to be able to do our local tests, we can actually say like, cool, let's use the Twitch CLI to actually do all this for us. Such as like mocking events that are going to be sent to us.

Jason: Okay. So I think --

Prince: Ah, forgot, I should have told you. No, that's my fault. I forgot, you know, installation step.

Jason: Oh, what is that? Don't yell at me.

Prince: We're just going to let it happen.

Jason: Okay. Well, if this doesn't work, we might just have to do it the hard way. Let's find out. Let's do Twitch.

You can do it. Come on, little compooper.

Jason: Hey, it did it. It did the thing. Okay, I'm ready. So then I probably need to configure.

Prince: Yes.

Jason: This is cool. This is cool.

Prince: Yes, you can go to the configure. It's going to take things like a client ID and client secret. So in the Twitch --

Jason: Is it Twitch developers?

Prince: Dev.Twitch.

Jason: I'm going to do this off screen just in case.

Prince: We don't need to do the trigger.

Jason: Oh, you don't need them?

Prince: Specifically for the trigger event.

Jason: Oh, okay.

Prince: I'm trying to remember. There is like a case where I needed to have done a specific step. It'll be fine. It'll be all right. This is fine. This is fine. We're going to try to just do the event subscription trigger event. So here you can say like specify what is the web server you want to be going to, which you already found. Pass in the forwarding address. We'll also just need to --

Jason: Okay. So if I take this and come back to this Twitch CLI, so I should be able to run Twitch event and then one of these commands -F and our function.

Prince: Yes, a long thing to write out, but we'll do things.

Jason: Okay. So let's try it. Twitch event subscribe F. There.

Prince: Yes. I don't know if we'll see it directly inside of your browser or if we need to do something like --

Jason: Oh, I wonder if I have to run this in the opposite order.

Prince: One second. Pulling it over on my side too.

Jason: Unknown shorthand. Am I using the wrong version? Maybe I just need to use full forward address. Event? Whoops. So it should be Twitch event subscribe, and then let's try the full one. Oh, oh. I didn't call trigger.

Prince: Oh. Mmm-hmmm.

Jason: Is there an example command in here?

Prince: There is. It's event trigger subscription and then the flag. Yes, we missed the trigger there.

Jason: Okay, okay. Request sent. And I sent all of these details.

Prince: Yeah, so we can actually see this particular thing. We did the subscription. Here's the web hook we were making our call back to.

Jason: I did this on the -- I don't know why I did this on the live site. That'll do what we want. And now we should see here in a second. That is where I ran it, right? Yes, I ran it against this, so we should get -- do I need to run you again? I probably need to run this in two windows and let's do it locally instead. So let's run Netlify dev.

Prince: Yeah, seeing the value come through, I assume with the data, it would have also output in Netlify logs. Like, we sent this request back through.

Jason: Yeah, so I'm going to copy this, and then we're going to go in here and change this one out to local host.

Prince: Yes. 888.

Jason: So running that should execute down here. Responds with 200. Oh, I know why. We're not logging anything.

Prince: Okay. I thought that it would output the output of this thing, but that makes sense. So let's just, I guess --

Jason: Maybe there's a flag. Does it say what the result is? From user transport to user. Nah.

Prince: We could just say the message from the event. So like the body from the event, and we could output all that.

Jason: Yeah, let's do that. So let's do a console log body. Let's try that one more time.

Prince: Maybe also do the headers.

Jason: Okay. So here's our body. Let's get our headers.

Prince: At least we know it came through.

Jason: Yeah, I mean, that's the big thing. We've got local debugging working.

Prince: Perfect. We love to see it.

Jason: So here's our headers, and we have all this Twitch stuff. So the type is channel subscribe. Event sub message type is notification. So this is cool. Retries, also cool.

Prince: So these are a lot of great things to be looking at when you're doing the development process. You mentioned before the subscription type. We can see we're doing it specifically for the channel subscribe event. So that's like one way to indicate if you want, you know, one hook or like one Netlify function that just does a bunch of different types of stuff for you, you can make it so it's listening for these different types of events directly. Would I suggest that? Probably not. But the possibilities are endless.

Jason: Yeah. Yeah, I mean, this is really exciting. What this means is that any time somebody -- well, once we set up the subscription, like right now it wouldn't work, but any time somebody subscribes, I will get this object to a serverless function, and from there I can update a database. Like somebody asked earlier. I don't know where it was in the chat scroll. Somebody asked, could you use this to hook up to an external site? So for example, you can make it so that only Twitch subscribers could access a Discord by having the subscribe and unsubscribe events activate or deactivate their access to things. Like change their role so they could only see certain channels, right. And so that -- like, you can see how this really starts to drive a lot of big potential.

Prince: I love that so much.

Jason: Yeah, there's some real fun that could be had here, I think. And along with practical uses, you could use it to show goofy things on screen or stuff like that. I've had all these ideas for things that would be fun to do as part of the overlay. Like we've got this overlay that I keep meaning to make work, and I intend to make this what the event sub triggers. I want it to be when somebody triggers, I want this to happen and to show their name and say that somebody just subscribed, right. I think that'll be really fun. But I haven't been able to get subs working cleanly enough to feel confident turning it on. So this is what I hope we do today, is we get events sub working cleanly enough that I'm like, perfect, we can turn this on now.

Prince: We can make it happen.

Jason: You could see a 45-second or more delivery on webhook. Okay. I mean, that's mostly okay. There are places where I could see that being a challenge, but for the vast majority of cases, like even a sub. If you sub and the pop-up comes a minute later, like, that's -- it would be cool if it happened faster, but it's not the end of the world if it's a little slow, right? I think that seems reasonable.

Prince: And you're already doing a lot of work with regards to queueing stuff. So I feel like kind of your processes around how you want to be managing events already kind of talks to like I'm not taking direct event, and then also -- so that goes this way.

Jason: Really still doesn't work. I think I need to clear a cache somewhere. Dang it. Okay. So yeah, now we've got local debugging, and if I'm looking in here, we have a user log-in, who sent it. There's some good info in here. So we can put quite a bit out. So what if we do -- well, actually, what should we do next? Because I'm going to fall down a rabbit hole if I'm left unattended.

Prince: So what I was mentioning before is the first thing we're probably going to want to do is make sure that we're testing that the type that we're receiving is going to be the type notification. That's going to actually tell us whether or not we have received that particular event and it's that notification event. There are other types of events that get sent to you, such as like the verification process, which is just to make sure that the event hook is properly managed and whatnot, as well as basically they'd be like, hey, I noticed you have this subscription thing. Let's make sure you still have this end point.

Jason: Okay. So what I'm doing here is I'm just -- it's basically going to know op if you don't send in notification. I don't want errors if somebody tries to spam or something. So this will just -- okay, yeah, you can call this as many times as you want. I don't care. (Laughter)

Prince: Let's just make sure that works.

Jason: Okay. So let's do that. Then I can send a different type of event, and that event would be --

Prince: Oh, wait, so this specific thing is only testing if we're getting an event from Twitch -- well, I guess this test would still work regardless. We're stilling any event could still come through, but then we'll do it even more so we can say like this particular event will only handle this particular action.

Jason: Oh, right, yeah. Because in addition to the message type, we also need to get the --

Prince: The subscription type. And we can do that too.

Jason: The subscription type. And the subscription type -- so this is confusing wording because the subscription type, that's not talking about Twitch subscriptions. That's talking about the event which we have subscribed to. So this one says channel subscribe, but if I change this out for -- what's another one? Let's do raid. So we're going to do a raid. Then it still comes through, but the subscription type is raid. So it's not like -- this isn't like subscription type like prime or tier one. This is the event that fired.

Prince: Exactly.

Jason: So I can check this then. So we'll head over and say the event type is headers or event type does not equal channel subscribe. Is that what that was?

Prince: Exactly. That's why I mentioned going to the docs. They're going to say like what are the actually key values that you're going to be seeing inside of the subscription type, the event subscription type. That way you can be like, cool, I only want to handle these particular actions, as well as the docs will tell us what is the expected data you're going to be seeing.

Jason: Okay. So now, knowing that's what in place, what should happen is we should see that one come through. So let's run it. Here's our subscription. Now I'm going to run the raid again. This should just say got a function, responded with 200, ok.

Prince: Yes. I don't know if we're console logging that value, so it might still output everything.

Jason: Oh, you're right. We're console logging after. So we would want to put this down here to make sure that it's doing --

Prince: Yeah, yeah.

Jason: So let's try that one more time.

Prince: This is still going to console log everything, I think.

Jason: Nope, because we returned up here.

Prince: You got me. You're right. Woo!

Jason: So now we know it is short circuiting where we want it to short circuit.

Prince: Perfect.

Jason: So if it's not a channel subscription notification, it will not do anything other than say ok. Good, all right. So now we can do subscription things. Is there more to do locally, or is it time to start looking at how we get these out of the actual channel?

Prince: I think for the most part, everything locally is done here. For instance, and you mentioned before, like how would I do kind of these nice interactions with regards to Discord or for instance how I do my lights. All of the logic that I do with regards to my subscriptions happens in this if condition where we basically say we've done the check to whether or not we have the correct subscription, we've done the work to know we're doing a notification. Now is the time that we have the data of the request and we can do whatever other requests we want to be doing later on.

Jason: Okay. So let's do this. As a proof of concept, since I don't have anything to actually integrate with at the moment, let's start by just getting out like somebody's name. So we will -- we'll build like a subscription message. So in our subscription, we have the subscription itself.

Prince: Yes.

Jason: Then here's what I'm going to do. I'm going to take this, and I'm going to put it into a document so that I can make it into JSON. Then I can format it.

Prince: Do you ever pronounce your name as JSON?

Jason: No and the reason I pronounce JSON that way is so it doesn't sound like I'm talking about myself in third person. This is some really important Jason here. (Laughter) So we get the subscription type. Broadcaster, user ID. This seems useful because I would have my broadcaster and theoretically speaking somebody could spam this with a spoofed event. If they didn't have my user ID -- which granted, they could figure this out. This is not rocket science. But it gives me that little extra something-something of like, all right, I am me. I can show this. This seems useful. Then we get their user log-in and username. Do these differ?

Prince: I actually don't know if user log-in and username tend to differ. I actually don't have a good answer for that. I think that I normally use the user name for things and not the user log-in. But the difference between these two blocks is that one is to this broadcaster, from this particular other place. Does that make sense? One is the group broadcaster ID, like Jason, and the other is from this Twitch user.

Jason: Oh, so the from is who subscribed.

Prince: Yes.

Jason: Oh, and I can tell that by looking at these user IDs.

Prince: That's why I wanted to make sure that was clarified. There's like three line, but one is like, oh, to this person, whereas one is from this person.

Jason: Okay. So let's do this with -- like I'm going to subscribe to -- I'm going to subscribe to your channel.

Prince: Oh, I don't even know if it takes my handle. This will be interesting.

Jason: Oh, does it have to be an ID?

Prince: I don't know.

Jason: Twid?

Prince: That sounds like Twitch user ID to me.

Jason: That's how you should say it, Twid. So the ID is the wrong thing to use, but it did come through. So we can see that the -- oh, did I do it as a raid? I did it as a raid. Let me send that one more time so we can see what came through. So if I subscribe, then it's going to show I've got -- I'll just format this up a little so it's easier to read. So I used the wrong thing. This would break horribly, but we can see that the user ID -- why is that different this time? Broadcaster user ID. This is easier to read.

Prince: Hmm.

Jason: Because the broadcaster, that's who's getting the sub. Is that because I ran a raid? Like, was the last thing I copy/pasted raid? It was! That's why. The from broadcaster is who started the raid because they were broadcasting. Okay. All right. So that's my bad. My apologies for getting the wrong thing. This is much clearer. So this is the person who subscribed, and we get their user name. Then they subscribe to this channel, which will be the broadcaster user name. Perfect. That is exactly what we want. Then we've got a tier. Let's not stress about that right now.

Prince: We'll come back to it. But it's cool. It also tells you if it's a gift.

Jason: Yes, the gift part is really nice. Does it say -- I wonder if we can figure out who the gift is from? I've always missed that part of gifting subs. If you do it anonymously, cool. We want to keep you anonymous. But if somebody gifts ten subs, it would be kind of cool to be like, holy crap, thank you. Chris has done that a couple times. Thank you, Chris Biscardi, for gifting ten subs. That would be a cool thing to show on screen. So I should look and see how that works. But what we get here is we've got event body. This is gross. Username. I don't love that as a general format here. Event body, event user name.

Prince: I think we need event body subscription event.

Jason: Oh. So we're going to trust that works. I know that's not the right idea. Chris!

Prince: Wholesome.

Jason: Thank you, Chris. You're the best. Welcome to all the new subscribers. Please spam the hell out of that boop now that you've got it. I don't think Cassidy was here today, which means I would say your odds of actually burying us in boops are low. Just saying.

Prince: Oh, bold claim. Why do you do this, Jason? Why do you do it?

Jason: Sometimes you got to remind the chat. You know, they get a little cocky. If they don't have an assist from somebody like Cassidy, are they really -- like, are you getting carried by Cassidy, chat? That's what I'm asking.

Prince: Oh, shots fired today.

Jason: Okay. So here -- oh, my goodness. If I can spell it.

Prince: Eventually this text editor is going to get a little buried.

Jason: So what I'm doing here is we'll say the user just subscribed. So I pulled the user out of there. That means if I run this again, it's going to say test user just subscribed.

Prince: That's what we like to see.

Jason: Oh, I got a 500. Did it stop? Cannot read property event of undefined. Oh, oh, oh. I know what I did wrong. I forgot to JSON parse.

Prince: I had it right in my noggin as soon as you said it. Brain moments happen there where we're just like, ah, we forgot to do the most important part, which is the json.parse.

Jason: So now that we've parsed that payload, we can pull out the subscription. This actually looks a lot less terrible. This is okay. So let's try that one more time. It should be reloaded. So I'm going to run this again. It ran through. This, I think, worked. No, cannot read property user name of undefined.

Prince: Let's go back to the format. Subscriptions.

Jason: Oh, so subscription and event are separate things. Fine, fine, that's fine. So we just need to get this -- oh, that's not going to work.

Prince: Why not?

Jason: Because it would duplicate the name event. So I'm going to call this --

Prince: Wait, we can just say event:whatever.

Jason: You're right, we can.

Prince: Oh, Cassidy showed up. Oh, no.

Jason: Oh, no. Well, here's the thing, though. Does it really count? This is a little bit of -- chat is really struggling to get above a third, and then Cassidy just rains from the sky with boops. Oh, geez, here it comes though. (Laughter) All right. Okay. So here's what we ended up doing.

Prince: You're gone, Jason. I can't see you. I need to help you out there.

Jason: See if you can get the submarine up above the boops before it's too late.

Prince: Someone help!

Jason: Yep, this is I guess the death I deserved.

Prince: Boop by death.

Jason: Oh, there goes the dumpster.

Prince: So when we think about Twitch subscriptions, this is like what we're trying to make sure to take care of. (Laughter)

Jason: I guess I should have learned my lesson. Adding more opportunities for the chat to troll me is probably the wrong idea. Oh, thank you for the cheers. I appreciate that. Chance, thank you for the sub. Very much appreciated. We've got a hype train. We're up to level four. Oh, dang.

Prince: Hype trains also in the event sub.

Jason: With ten subs, it happens real fast. Just a second here.

Prince: We're here for this. We're here for all of this. All of these events are Twitch events you can be listening for.

Jason: So many boops. So many. Today we stress my GPU. Yeah, I can hear the fans taking off. Thank you for the sub, Nicky. Very much appreciated. Oh, oh. Here we go. Oh, geez. (Laughter) Is that Adryian gifting subs?

Prince: Wait. Oh, we haven't -- oh, we haven't even hooked it up. No. We can't even see the logs of all the subscriptions. No!

Jason: Hello? I'm here. Hello, I'm here! I'm not a cat. Is that too late? Is that joke dead? That one has passed into the --

Prince: So now it's just Learn with Prince. That's the April Fool's joke.

Jason: I don't know if Ben is on the chat right now, but I'm trying an experiment with Ben where I want to be able to take a vacation, but I don't want to show to stop. So we're going to switch it over. For a week at the end of April, it's going to be Learn With Ben. I'm really, really excited about it. It's something I hope goes well, because it's something I very much want to continue. We're going to do Learn With Ben. It's going to be amazing.

Prince: That's amazing. I'm here for it.

Jason: Go have a nap, Cassidy. You nailed it. Tetris evolution boop extreme. Okay, everybody good? I've riled the chat. We paid the price. Y'all happy? Y'all tired? Everybody got a beverage? Hydrate after an effort like that. Should we focus up? Should we write some code? Yeah, we probably should. Let's do exactly that. So now that we know we can show somebody subscribed, I'm going to -- I should probably deploy this.

Prince: Yeah, let's deploy it. We can do it like -- I think that's enough to be able to be deployed. Then what we'll need to do is make --

Jason: Oh. Sorry, I'm going to log this as well so that we can see it in the Netlify function log since we're not sending it anywhere.

Prince: True. And just to confirm, we're still like making sure that this is happening in the if, right? Like that's still happening there.

Jason: We short circuit right at the top if it's not a subscribe notification. Everything will only happen if it's a subscription.

Prince: Aydrian makes a great point. With this particular way, let's not return anything for the body just because it's already -- like, there's some mechanism already that's going to happen where it's not going to expect a body.

Jason: Is it going to break? Because I don't know if I can do that with Netlify. I might need to return an empty string as a body. I hope it doesn't break. Let's find out. Because if you don't set a body, then Netlify yells at you.

Prince: Hmmm. We'll just try it. We'll just make it happen. Let's just see what happens. I think empty should be fine.

Jason: So let's hope for the best. So I'm going to show chose subscriptions, and we're going to push that to get it deployed. That should deploy in a couple seconds. Let's head over and just watch.

Prince: So once we do this, then we're going to need to make sure to actually register our web hook. So that's like the actual step that makes getting the thing live. Like the web hook is now on so the internets. But we'll also need to say, Twitch, hey, this is one you need to be looking for.

Jason: Okay. So give me a second to get logged in over here. I need to fix this thing because it keeps -- it won't remember who I am, and that makes me really sad. Do you have a security code? I do have a security code. It is -- we're almost there, everybody. And I'm going to remember to check that box to remember this computer. So I'm authorizing. I'm in Twitch dev. Now I go to, I assume, my console. (Elevator music)

Prince: I think --

Jason: That's right, Xander. It is the Prince Wilson in the house today.

Prince: We are here. We're out here enjoying it. I think what we'll need to do -- and I'm pulling up the event sub Twitch once again. So we're going to need to just create the actual subscription through the -- where are you? I think what we actually want to do is we can do this through the API. We're going to need to do a few steps. One step is we're going to need to go to the dev.Twitch.com because we need to get that client ID.

Jason: So I need to create an application?

Prince: Yes. A few parts of this need to happen. We'll just register application. We'll make it go in there. I have no good names. Oh, look at you already having the good names.

Jason: We'll try, right? Do I need a redirect URL?

Prince: Later on, I would recommend having just the HTTP local host 3000. The reason for that is because you might do something where you need to get your auth token, and it's automatically wired so when you need to get that, it'll look for that and just do it for you. So my recommendation is for your auth redirect URL.

Jason: Oh, my god. This is a hard one. What do you think, chat? Is that a fire hydrant? I'm going to say no.

Prince: What if you're wrong?

Jason: Well, if I can't tell, that's over for us. Are you done? That's a fire hydrant. This is a hard game.

Prince: Oh, is it one of those where you have to click verify when none are left? Those are the worst.

Jason: I don't think I've ever seen that before. Okay, other details. Do I need other things?

Prince: The only other thing is in the o-auth redirect URLs, you want the local host 3000 at least.

Jason: So let's just start there. That should be fine.

Prince: Wait, I want specifically local host 3000.

Jason: 3000.

Prince: Yes.

Jason: Okay.

Prince: The reason for that is specifically for like when they do the configuration, there's like one step inside of there.

Jason: What don't you like? Hello? I'm not a robot. Order details?

Prince: Maybe just write something. Oh, interesting!

Jason: Oh, this is very good. Watch.

Prince: Oh, you chose category.

Jason: Got to contextually group. No! Oh, no. They're on to me. I'm a robot. Okay. Anybody see any fire hydrants I don't see?

Prince: Yes, the one in the center.

Jason: Oh, my god. (Laughter)

And that's just not something I'm willing to do. (Laughter)

Jason: Oh, boy.

Prince: So, Jason, are you a robot?

Jason: Apparently. I'm clicking that button before it goes. No, no! No! My email is verified. What does that mean?

Prince: Are you logged in under Learn With Jason?

Jason: No, I'm logged in as me. Don't give me that. Come on, y'all. How do I -- switch organization? Am I under a different -- okay, so that's Stream Blitz. I don't want to put it under Stream Blitz. How do I get back?

Prince: Back button?

Jason: Console, register. This is hurting. What about this? Can I just use this one because it works?

Prince: Yeah, let's just like -- that's fine.

Jason: Don't make me do stuff.

Prince: We don't need anything. We just need a client ID, I think.

Jason: We just need the client ID?

Prince: Yes.

Jason: Okay, let's go back over here and figure out access token. Okay. When creating a subscription, you must specify a secret. Create a subscription.

Prince: Yes, so the secret -- this is what I was mentioning before about the verification process. If you're like a viewer who's been watching, we haven't done everything you need to be doing with regard to Twitch event subs in terms of security. There's two kind of things you want to be thinking about. One is are we actually receiving it from Twitch. You need to make sure, hey, this thing is actually from Twitch. So you'll have a secret that you will agree upon with regards to the verification text. So that way when you're getting any kind of event, you'll notice like, hey, this is actually coming from Twitch, not somebody who's spoofing as Twitch.

Jason: Okay, that make sense. So to create a subscription, I'm going to run a post. Oh, so now I can look at the CLI and figure out how we do that.

Prince: Yes, you can do that. I think they have API and you use the slashes. So you'd do something like Twitch API post, and then like event/this, and you'll send over the JSON body.

Jason: Whoa, that is a lot.

Prince: If you want, you can use like a request or something.

Jason: They should be able to figure this out. Let's look at what the arguments are here. I think I can do this.

Prince: Okay.

Jason: Well, we'll find out.

Prince: All right. Let's make it -- we'll be all right.

Jason: I'm going to try it. I'm going to try it and see if I can make it work. So requires a logged in token from the token command. If I run token, is it going to show it on the terminal?

Prince: I think so.

Jason: Okay. Let me try this off screen then to verify. So I'm going to go out here and run --

Prince: And it might ask you for client ID and secret. Then we're probably going to need that client ID, client secret for later on.

Jason: Okay. Client ID, whether or not to fetch a user token. Is that what I needed? User requires log-in token. No, it's an app token.

Prince: Yes, it's just an app token.

Jason: So I need to get Twitch token.

Prince: Yeah, it should just be Twitch token.

Jason: So I'm going to run this. I'm going to run it off screen, and we're going to find out what happens.

Prince: Yes. And I already know what you're saying here, Aydrian. This is why I was like, oh, we're going to do some steps here. But we need the token-token for the request. The user token specifically is for allowing subscription notifications. That's what I messed up on my stream. I already got all those steps. You're already out there.

Jason: This is going to break my website, isn't it? Crap, it is. How do I get -- I need a new one. But let me --

Prince: Let's just try it one more time. Let's see what happens. Let's do not category, other.

Jason: So we need HTTP, local host. I'm going to leave the port off.

Prince: Yeah, we can try that. Can we add one with the port on?

Jason: Add one with the port on?

Prince: Like the local host 3000.

Jason: Yes, I think. I was looking at the other one, and it didn't have --

Prince: Yeah, I don't know why that one didn't. Can you add a slash at the end of it?

Jason: Slash?

Prince: I don't think it'll matter.

Jason: Okay. So I'm going to start there. Organization, none.

Prince: Here we go.

Jason: Okay. Bus, bus, bus. Buses are easy. Buses are way easier than fire hydrants.

Prince: Specifically the reason why we wanted to do the 3000 is for when the client does a thing --

Jason: Why don't you think my email is verified? What is up with that? I'm looking at my email. There is no --

Prince: Peculiar.

Jason: Come on, y'all.

Prince: It might not be in the stars.

Jason: This is -- okay. So let me try this, I guess. Let's look at -- wait. I'm logged in over here. Maybe I can try to verify my email address on this side.

Prince: Okay.

Jason: Let's see if I can figure literally anything out. Let's try. Verify, check your inbox. Oh, so they just invalidated my email at some point. That's fun. Okay. So I'm going to enter this verification code. Where is that? That's clearly not what it is. Okay. So that is now verified. What is that sound?

Prince: Is that Twitch dashboard?

What are you doing, computer? Why? Why are you like this?

Jason: That was not what I expected. That should be fine. Oh, bicycles. This is hard.

Prince: Even worse.

Jason: Oh, boy. Bike, bike. Bicycle. There's just never going to let me out. Ha-ha-ha. Thank you. So now I'm going to pull this off screen because I believe it has the secret in it the first time I look.

Prince: Yes.

Jason: Okay. So now I have a client ID over here. I'm going to end this, run Twitch token again.

Prince: And it should prompt you.

Jason: I need Twitch config. I put in the wrong client ID now. So I have to -- there we go.

Prince: So what Jason is going to be doing is doing like Twitch config, which is inside of the Twitch CLI. That's basically going to take in his client ID, his client secret, and when we run the Twitch token, that will give him an app access token. That's what we're going to need to send a request so that we can do the actual like here is integration with our own web hook. Now a point was brought up by Aydrian earlier, which is we needed to do some user token as well. The reason for that is there's an authorization process by which Twitch does -- depending on the different types of events that you do. So the reason why we did the HTTP local host 3000 is specifically when you try to request the user app token in the Twitch CLI, it's actually going to use that redirect URL so that way you can get the correct scopes you need to. So we're going to need to say get these particular scopes.

Jason: Okay, okay. So I need to use the event sub here. Let's see. I have this. This one is emptied. Do these not combine anymore? Help. No, it's fine. So then I need to run -- like, I need to get a Twitch user token.

Prince: Yes. So this is the user app token. If you go back to the docs of that Twitch CLI, we had here where it says user token -- so by default what it's going to do is it's going to assume you want the app token. So we put in this flag for user token, and we're also going to pass in different scopes for that user token. So that -- I think the scope we need to do is channel read subscription. I'm going to look for that. Information is everywhere. That's why we're going to make sure. Oh, I ended up and wrote Twitch scope inside of Google. There is apparently a scope channel. So that is not what we're looking for. Not quite.

Jason: They don't just say in order to create a scope, you need to have this -- cool. It's fine.

Prince: So this is one of those things I learned live where I was like, I don't know why it's doing these things. So there's a page for authentication. So authentication has all of the scopes that you're doing inside of there. So you can go to dev.twitch.TV/docs/authentication, and that's actually what will have it. But I'm just looking for it now, and I'm looking for subscriptions. Yeah, that's the one. No, that's not the one.

Prince: Oh, there it is. It said channel read subscriptions.

Jason: So channel read subscriptions, like that?

Prince: Perfect.

Jason: I'm going to run this off screen so it doesn't --

Prince: It might need to do it in strings for the scopes.

Jason: It needs a redirect URI to do the token.

Prince: Let's go back to your dev platform again, just to make sure that we put in the local host 3000 in there. Maybe let's put that first instead. Because this is what I was mentioning before. It's probably going to ask you to do it. Oh, this is just click on it once. Perfect.

Jason: Maybe they learned like, please, help, anyone.

Prince: So this is the redirect part of it.

Jason: So let's try this one more time. Going to run the subscriptions.

Prince: And this is what I was mentioning before. The Twitch CLI is configured to already be your redirect URI. So it's going to say like, cool, we need this particular authorization. It doesn't even actually consume this token. It just needs to be given permission that you can do these things. That's the reason why.

Jason: Got it, got it.

Prince: And that's only specifically because we're not using the user app token for anything beyond just like we're giving it permissions. This application has permissions to do these things.

Jason: Okay, but it didn't do -- like, it's still sitting. Was it supposed to finish?

Prince: And you pressed continue already?

Jason: Yeah. Let's try it again. Okay. So it opens up this window here. Hit continue. Oh, wait. Error redirect mismatch. URI does not match registered URI. What?

Prince: Hmmm. Local host 3000. It has this. That should have worked.

Jason: That should have worked. So maybe it needs --

Prince: Just so you know, we're also seeing your stream manager, in case you don't want that.

Jason: Oh, I don't mind. But that also probably shouldn't be -- that's not the one we want over here.

Prince: We did the save.

Jason: Yeah, so this is saved.

Prince: Random test, god forbid, let's remove the slash. At the end. God forbid.

Jason: So excited to do another one of these. Oh, good. It's my favorite. (Laughter) I think so? I don't know why I'm so bad at these. All right. One more time. One more time we're trying this.

Prince: Fingers crossed.

Jason: Twitch token. That's the one we need. That's the one we need. Okay. So I'm going to authorize it.

Prince: Yeah, the add button is deceptive. It makes it sound like you're adding that particular URL, but in fact, what it's doing is saying add another one.

Jason: Okay. So now that I've done that, I have a user token. I'm going to close this browser window, and we are now ready to do the next thing, which is make this request.

Prince: Yes. I'm going to remind you that we might want -- we should maybe put it somewhere just in case we need it.

Jason: I have it off screen here.

Prince: Cool, cool, cool. So we'll need that to have happened. Let's use the application, the app token instead. So we'll just say Twitch token, and we'll use that value when it says bearer token.

Jason: Okay. So in the interest of doing this quickly, I'm going to use Postman. I think Postman will let me hide these values, which will mean I can do it on screen, I think.

Prince: I know it lets you fill it in. I don't know if you can have different windows that basically say here's the value.

Jason: Okay. So to get our subscription, I need to post -- can I do authorization -- no, not now. Can I make you secret? That's the part I'm curious about. So if I go authorization and then the value here is bearer -- you won't make this into -- no? What is happening? No, I want you to be a password, though, like a secret. No? No way to do that?

Prince: What about at the top right where you have the little eyeball. Right there, yeah. What does that do? Oh, that's just -- oh, your database.

Jason: I think my computer just ran out of memory.

Prince: The GPU is coming through.

Jason: Here we go. Global variables, environment variables. I don't know how to do these, though. We're out of time. Okay, how about this. I'm going to run this off screen instead.

Prince: Let's just make that happen.

Jason: So I'm going to get all the things I need except for the access token, and we'll figure the rest out.

You can do it. Come on, little compooper.

Jason: So here's our authentication. I need to go back to --

Prince: So we're going to look for that post request. We're going to make a post to, I think -- not that. Wait, this one. Right there, yeah. That's the one.

Jason: So we're going to post to this one. So I'm over here. I'm starting out by posting there. I need to send in a client ID.

Prince: Yep.

Jason: My client ID matches my Twitch thingy here, right?

Prince: Correct, exactly. That one is the clearest one. It is the one that we want there.

Jason: I need authorization. I've got a bearer, and I'm going to drop in that app token. I have content type, which is not in here yet.

Prince: I would add that, yeah.

Jason: So we'll say content type.

Prince: Perfect.

Jason: We'll do application JSON. So I'm going to move this off screen.

Prince: You'll have the example here that says type, for the channel, follow for the version. You can basically do almost all of these things. If we're doing these for the subscription type, we're going to need a different object for what we send to make the request.

Jason: Okay. My computer has decided it's going to make me force quit some things, so I'm doing that really quickly.

Prince: Go for it. While you do that, I'm just hanging out. You know.

Jason: I'm going to send this. Did I get a response?

Prince: It should send a response back to you saying it has done this thing. So when you send over the request, it's going to -- it's supposed to be like, boom, you have done this thing. It should be verified for you.

Jason: Okay. I am -- okay. What is up? Why are you like this? I'm pulling all this stuff. So the authorization header is down there. I'm just hiding it.

Prince: Perfect. So then in our body, we have to send data.

Jason: In our body we have to spend data.

Prince: Yes, yes. That's what I was mentioning before.

Jason: Oh, that's just me messing up.

Prince: You're fine. Can I send you something? Can I send you a link?

Jason: Yeah, throw it into Discord chat. That's the easiest place for me to copy/paste.

Prince: Perfect. Boop, boop. Hopefully that is working. My Discord is loading.

Jason: Okay. So I'm looking at -- here we go.

Prince: And this is free. You can share that kind of link. This particular link I just sent to Jason is what we're looking at specifically for the channel subscription. So --

Prince: Oh, that says follow on your side. I don't know why. It should be further down. So channel subscription web hook example. Just subscription is the one that's not going to be good.

Jason: Here.

Prince: Yes, exactly. So that's the JSON body we're going to send. The type is going to be fine. The only thing we need to change are the conditions because we need to use your user ID. Then the method. Sorry, the callback is what we'll change as well. So you'll use the production link there.

Jason: All right. And my user ID is -- I know this from somewhere. My user ID -- in the CLI, I can probably get this.

Prince: I think so.

Jason: Probably an easy way to do this. Yes, this is the one I want. So if I just go to here -- oh, for crimeny's sake.

Prince: Let's do API Twitch get user, and I think we can do it that way.

Jason: Just Twitch API get user.

Prince: Yes. We just need to be able to figure out how to pass in your user log-in there.

Jason: Not found? I exist.

Prince: It's going to need to -- I think it's probably like a flag. So let's say -- let's do query string. So let's do users-q and say -- or just login equals Jason Lengstorf.

Jason: Is it a capital Q?

Prince: No, it should be lower case. And the login and equals need to be together.

Jason: That's the one. So here's our user ID.

Prince: Boom.

Jason: So I'm going to broadcast our ID. Okay. I'm going to send it. Why don't you want to send this event? Like, it's a good event. Hello?

Prince: I don't know if it's responding. Because it's not --

Jason: Yeah, it's not like sending it is the problem that I'm having. Let me pull this off and look at the headers one more time. Oh, get the content link out of there, get the host out of there, get the user agent connection. Get all those out of there. That makes no difference whatsoever. It's like Postman has just straight up rebelled on me.

Prince: Dang, we're like right there.

Jason: Okay.

Prince: I know that we can also use things like the CLI, but sometimes the formatting is really challenging to use, specifically live. So sometimes it's easier to use something like Postman.

Jason: Yeah, that's why I was hoping to use not this, but we're just going to make that work so it's all one line. I'm going to throw that in here. Then I need to send in headers. So my first header is -- (Barking)

Prince: An ending stampede.

Jason: Let's go. All right. So the first header is going to be client. Is this going to work? I hope this works. Client ID, and we're going to drop in this value. Then I need content type application JSON. Then the last one will be authorization, and we're going to send in bearer and a value that I'm going to copy/paste off screen. So let's try this, get it in there.

Prince: If not, we have one more suggestion that we have from the chat, and we can take it from there.

Jason: Okay. We may not have time for any more suggestions.

Prince: That's fine.

Jason: Secret must be between 10 and 100 characters.

Prince: I think in the object, you have like secret as a key there. Let's just make it a bunch of characters. Like we don't even need to have that value yet. But when you're making the actual secret happen with regards to Twitch, you need to know what this value is so that way it's between a certain length. They specifically make sure you don't just copy/paste their example directly in.

Jason: I have done something wrong here. There's a typo somewhere in here that's causing issues, and it's not accepting this request. And we are out of time. So here's what I'm going to do. I don't even know what I'm going to do. I'm just sad. I just wanted this to work.

Prince: I don't think you should be sad whatsoever. We already confirmed that our hook already works. We made sure to do it tested locally with Netlify, which is amazing, right? We did that with a Netlify dev server. We also did that using the Twitch CLI. And the only thing we need to be able to do is make sure our subscription is there. It's pretty much doing the one step there. You know, all the other steps before that were so important.

Jason: And the step that's really -- like, if we fire that command and get it to execute -- so I don't know why the world was conspireing against us being able to actually run that command, but once we run that command, we'll get back and like you have an active event sub. Then from that point, any time it runs, that function gets called.

Prince: Yep, exactly. And we've confirmed every other step of the way this works. To be honest, that part is incredibly challenging. Doing this part is like the last 10%.

Jason: Yeah. So with that being said, make sure you go and follow Prince. We'll get this running and you'll be able to see the working code. Remember, we've had live captioning this whole time. We've had Rachel hanging out with us from White Coat. Thank you so much, Rachel. And that's made possible by Netlify, Fauna, Auth0, and Hasura, who all pitch in to make this show more accessible for more people. Prince, is there anywhere else people should go?

Prince: The things you've shown with regards to Twitter. I also do Twitch streaming, where I do a bunch of stuff like that. Prince.dev/Twitch. Makes it much easier. You already showed that. So yeah, that's where I'm at.

Jason: Let's get in there. Everybody go follow Prince. Make sure you get in on those streams. Also, if you want to hang out with us, a good place to go is the Party Corgi Discord. Let me drop a link to that. It's a great place to come hang out, a really supportive community of people who are just doing fun stuff together. Thank you all so much for hanging out with us today. We're going to go find somebody to raid. Prince, thank you so much for hanging out with us today. This was an absolute blast. We will see you next time, y'all.

Prince: Bye!