Back View all Articles

Twitch Notifications (Part Two): How to Send Notifications When Your Twitch Stream Goes Live

Posted by Aydrian Howard on January 28th, 2021

In this series, I explain how to use Twitch EventSub and Courier to automatically send notifications to multiple destinations – Slack, Discord, and more – when your Twitch stream goes live. 

In part one, we built a Node.js app using Express.js to accept events from Twitch EventSub. Now, in part two, we’re going to listen for our event and trigger a notification using Courier. 

Follow along with the series: 

Need help getting started with sending notifications about your Twitch stream? Join our community on Discord – we’re happy to chat!

How to send notifications when your Twitch stream goes live

In this tutorial, I’ll show you how to take the Node.js and Express app that we built in part one and use it to listen for our events. From there, we’ll create and trigger a notification in Courier. I’ll demo sending an SMS notification with Twilio, but you can use Courier to send notifications to any channel, including popular chat apps like Discord and Facebook Messenger.  

Prerequisites

To complete this tutorial, you'll need a few things:

  1. Node.js and Express.js app from part one

  2. Twitch Developer account

  3. Twitch CLI

  4. Courier account – it’s free to sign up and includes 10,000 notifications per month

  5. Twilio account configured for SMS

If you’re using the Node.js and Express.js app we created in part one, it should either be deployed somewhere publicly accessible that supports HTTPS and port 443, or be running locally using ngrok

We'll use a new or existing Twitch application from your Developer Console along with the Twitch CLI to subscribe to the `stream.online` event and point it to the `/webhooks/callback` route on our server. Then, we'll update our server code to capture that event and send it to Courier to create and send the notification.

Keep in mind that there could be around a 45 second delay before Twitch triggers the event from the time your stream goes online.

Step one: Subscribe to the Twitch EventSub online event

To begin receiving requests from Twitch EventSub, we first need to create a subscription. We'll use the Twitch CLI to create a Stream Online subscription type and give it the callback URL from our Node.js application. It's important that the application is running and publicly available because EventSub will attempt to validate the callback URL when creating the subscription.

Configure the Twitch CLI

First, we need to configure the Twitch CLI using a new or existing Twitch application. If you have already configured your Twitch CLI, you can skip this step.

Navigate to the Twitch Developer Console and create a new by clicking “Register Your Application” or open an existing application. Add `http://localhost:3000` as an OAuth Redirect URL.

Take note of the Client ID, as we'll be using this shortly. You'll also need to generate a new Client Secret by clicking on the “New Secret” button. Be sure to save this somewhere safe because it won't be shown again. If you have an existing Client Secret for this application, you can use it. Generating a new secret will invalidate any existing secret.

Now, let's use these values to configure the Twitch CLI. In a terminal, run the following command:

Configure the Twitch CLI

You will be prompted to enter your Client ID and Secret. To fetch an access token, run the following command:

Fetch an access token with the Twitch CLI

You're now ready to start making Twitch API calls using the Twitch CLI.

Subscribe to the Stream Online Event

To create our Stream Online subscription, we'll use the Twitch CLI to POST to the EventSub Subscriptions endpoint.  You'll need to provide the full URL for your webhook callback, the secret value set in the `TWITCH_SIGNING_SECRET` environment variable of your Node.js application, and your Twitch broadcaster user ID.

To find your broadcaster user ID, run the following command replacing `trycourier` with your Twitch login ID:

Get a user by login with the Twitch CLI

This will output your Twitch user object in JSON format. Your broadcaster user ID will be the ID.

Now let's create the subscription. Run the following command with the needed substitutions:

Create a subscription using the Twitch CLI

You should see "Verification successful" in the console of your running application. Every time you go online, your application will now receive a POST with a payload similar to the following:

POST payload for Twitch stream.online event

Now we can update our application to accept and process this event.

Step two: Capture the event and send it to Courier

Now that we’ve created our Stream Online subscription, the next step is to send it to Courier, which we’ll use to create and deliver notifications about our Twitch stream. To do this, we need to add a call to Courier's Send API when a `stream.online` event comes in. We'll use the Courier Node.js SDK to do this. We'll also use the Twitch.js library to query the Twitch API to grab more details about the stream that we can send to Courier.

First, let's add these npm packages and configure the necessary environment variables.

Gather your environment variables

We've reached a point where we are using enough environment variables that we should use a better method of loading them. Let's create a `.env` file and use the dotenv package to load them when the application starts.

Create a .env file with the following:

Contents of .env file

Use the Twitch values from step one of our tutorial. You can find your Courier Auth Token in Settings > API Keys in your Courier account. Use the Published Production Key.

Now let's install the dotenv package, along with the other packages mentioned above:

Install dotenv, Courier, and Twitch npm packages

And add the following line to the top of your index.js:

Require and configure dotenv

Now when you run your application, these values will be loaded and ready for your application to use.

Process the `stream.online` event

Let's continue updating our application by running a function when the type of the event is `stream.online`.

Just below the `console.log` in the `/webhooks/callback` handler, add the following:

Handle the stream.online event

Next, let's create `sendOnline` as an async function. This function will handle grabbing any additional information about the Twitch stream and sending it to Courier.

Add the following to the top of index.js with the rest of the require statements:

Create the Courier and Twitch clients

This will create the Courier and Twitch clients we'll use in the sendOnline function. Add the following function to your application:

The sendOnline function

This function will use the Twitch client to grab information about the stream such as the title and game info and then pass it to the call to Courier's Send API so it can be used in the creation of your notification. You'll also want to update the recipientId to a unique string – I used my name and zip in all caps without spaces: AYDRIAN10036 –  and the  `phone_number` with your phone number. You’ll need both of these in order to receive the notification we create in Courier. 

The next time you go online, the `stream.online` event will flow into Courier. Next, we'll use the stream information to create a notification using Courier's template builder.

Step three: Create your notification in Courier

For this tutorial, we'll be creating a text notification for our Twitch stream. We'll explore other notification channels in the third part of this series.

Configure Twilio as your SMS provider

Let's start by configuring the Twilio integration in Courier. This will require you to enter details about your Twilio account. Check out our Getting Started with Twilio guide for more details.

Design your SMS notification

Now it's time to design the notification in Courier. Navigate to the Notification Designer and select “Create Notification.” Click “Untitled Notification” on the top left to give your notification a descriptive name – in this case, I’ve named mine "Twitch Online Alert.”

Now let's add SMS as a channel for our notification by selecting SMS and choosing Twilio from the dropdown. We can now select SMS under Channels to the left and start designing our notification.

We'll design a simple SMS notification. First, we'll use a text block – click the “T” on the toolbar – and add the following text: "{stream._data.user_name} is playing {game._data.name} on Twitch." Next, we'll add another text block with the following text: "{stream._data.title}.” And we'll add one more text block with the following text: "https://twitch.tv/{stream._data.user_name}". We’re personalizing the SMS using the stream information, which we passed to the notification in the data object as part of calling the Courier API.

This is enough for now, but feel free to add more content blocks and continue designing the SMS message. When you’re finished, click “Publish Changes” in the upper righthand corner.

If you’d like, you can preview the email using the Preview tab and ensure your variables are templated properly. You'll be prompted to Create a Test Event and then you'll want to update the JSON object with the following example, replacing the phone_number with your own:

Example stream.online Test Event

Once you save your test event, you should see the name variable populate in the Preview tab with whatever value you’ve set.

Map your notification to the event specified in your Send call

The last thing we want to do is to map the event we specified earlier in the Courier Send call to this notification. Next to the notification name, click the gear icon to launch the Notification Settings. Select Events from the left menu and enter “TWITCH_ONLINE” in the Events box. 

Close the dialog and your notification is ready to send. If you don't want to wait for the next time you go online, you can test your notification using the Send Tab.

Putting it all together: Full application code

With all the new updates, your finished application should look like the following.

Full updated application for Part 2

Our application will now process `stream.online` events and pass them to Courier along with additional stream data. Courier will then create an SMS notification and send it. 

So, what's next?

In the next post, we'll explore other types of notifications and how to use Courier to send to them all at the same time. In the meantime, take a look at the different integrations available in Courier and see if you can update your application to support a new one. Join our Discord community and let me know which one you're most interested in!

-Aydrian

Author
Aydrian Howard

Courier
GitHubtwitterLinkedInFacebookInstagram