How to get and listen realtime channel events in JavaScript

API
#1

Hello there,

I would like to create a program in HTML/CSS/JS that I can integrate as a Browser Source into OBS Studio.
In this program, I would like to LISTEN & GET multiple events that trigger into my channel when I’m live (follows, subs, messages in the chat, bits, etc).

The idea is to get a JSON response with all the information about the event, that I can manipulate in JavaScript and display it in HTML/CSS.
For example, if someone follows the channel, I would like to get his nickname.
And if someone gives bits, I would like to get his nickname and the amount of bits.
All of those examples could be given by the JSON response of the API.

Is it possible to guide me into the Twitch API documentation with what I’m looking for ? If what I’m looking for is possible of course.

Thank you so much for your help !

Peace :v:

#2

In pure clientside

For pure client side you’d normally use implicit auth https://dev.twitch.tv/docs/authentication/getting-tokens-oauth#oauth-implicit-code-flow

How to connect to the pubsub-javascript-sample
#3

Hi Barry,
Thank you so much for this quick answer, I will check it out and see what I can do with it ! :slight_smile:

#4

Just an other question, how can I listen to events ? Like, when I’m connected with the implicit auth, how can I listen to events ? Is there any function in JavaScript ?

Thank you so much for your help ! :slight_smile:

#5

Connect to pubsub.

PubSub is a websocket protocol, so you can just raise a client side socket connection.

Here is a node equivalent, all of the code can be copied over and used in a browser, just remove the node bits, WS is built into browsers https://github.com/BarryCarlyon/twitch_misc/tree/main/pubsub

TwitchDev itself has a “client side” example here https://github.com/twitchdev/pubsub-javascript-sample

#6

Hey Barry, sorry for the late of my answer.

I will check it out, and see what I can do with it.
I don’t know if it’s to much to ask, and if it is I will understand, but for example can you show me how to listen to someone that just follow the channel ?

Again, if I ask to much, it’s ok I will search myself :slight_smile:

Thanks for your answer ! :slight_smile:

#7

There is no Listen you have to continually poll the Followers Endpoint

And compare the data, you can’t “listen” per sae in Client Side Javascript

#8

Oh okay, so for example I will have to execute like every 5 seconds the call of the URL and watch for every change into the JSON response, is it correct ?

Thank you so much for this fast reactivity ! I apreciate that :slight_smile:

#9

Every 5 seconds is not a good idea due to caching.

For any given endpoint it’s not worth polling quicker than once per minute.

For follow notifications (on overlays and the like), most people don’\t bother since it’s just noise.

But you could wait until EventSub has a socket Transport which then means you can use EventSub for everything

#10

Mmmmh okay, once per minute is, I think, to long for follow notification. I would like it to be just like the regular notification on Streamlabs you know, when someone follow, it appear approximately 5 or 10 seconds after the user has clicked on the button. And so is there anyway to do the same or it’s impossible ?

Just to tell you, I have knowledge in JavaScript just to create website, and maybe I have some lack of knowledge in what you tell me. Maybe I have to learn more about it :slight_smile:

Thanks again, really I truly thank you :smiley:

#11

Fetch queue and spread!

They use EventSub/Webhooks to recieve into their server, then forward those to overlays via WebSockets.

#12

Okay thank you so much for those answers, I think I will build my program and I will probably ask you some help if needed :smiley: