Twitch overlay extension

I want to create a twitch overlay extension “scoreboard”, which will update the score automatically. I will subscribe to topic/channel on wss://pubsub-edge.twitch.tv to receive the json data from server.

Server will send the data to wss://pubsub-edge.twitch.tv. on a topic/channel

Created an overlay extension from the following

now what?

On your backend server you can use the Send Extension PubSub endpoint https://dev.twitch.tv/docs/extensions/reference#send-extension-pubsub-message to send the score to your clients.

On your frontend you can create a listener with the Extension Helper to listen for the broadcast your server will be sending https://dev.twitch.tv/docs/extensions/reference#helper-extensions

An example of this in action can be seen in the Hello World sample extension, which has an EBS broadcast updates (in the sample it was updating the colour of an element in the frontend, in your case it’d be the same process but just sending the score data) and the frontend listens for that and updates what gets displayed accordingly.

Thank you Dist for quick response!

The APIs you have mentioned above are based on http. can’t we just use websocket based API like wss://pubsub-edge.twitch.tv. to solve my problem?

I will download the “Hello World sample extension” and check it in VS code editor. Is it necessary to use “Twitch developer rig” to test the extension or we can do it in VS code alone?

Your frontend connects to Twitch’s Extension Pubsub using the Javascript Helper, that’s the only way you should be listening for messages on it.

Your backend server shouldn’t be connecting to the Extension Pubsub at all as it doesn’t need to listen for anything (plus the only ones with the ability to send anything on PubSub is your server, and the broadcaster), it’s just broadcasting the scoreboard as needed. When you send the HTTP request, Twitch will handle broadcasting it on PubSub.

You don’t have to use the rig, you can test on Twitch itself if you like as long as you whitelist a test account to install your extension on while it’s in testing.

I did not get “Your backend server shouldn’t be connecting to the Extension Pubsub”

does it mean the server will use following to send messages?

curl -H “Authorization: Bearer REMOVED
-H “Client-Id: pxifeyz7vxk9v6yb202nq4cwsnsp1t”
-H “Content-Type: application/json”
-d '{“content_type”:“application/json”, “message”:”{“foo”:“bar”}", “targets”:[“broadcast”]}’
POST https://api.twitch.tv/extensions/message/27419011

and

“Your frontend connects to Twitch’s Extension Pubsub using the Javascript Helper”

does it mean the client will use following to receive messages?

“wss://pubsub-edge.twitch.tv”

furthermore, can I change the “Hello World sample extension” as per my requirement. like I just want to keep only front-end related files in it and wants to delete all server related stuffs from this example.

Removed your bearer. bearers are like passwords and should not be posted publicly!

Your code for sending appears correct.

Sending to pubsub is documented here

No you don’t connect to pubsub yourself, you receive it in an extension as documented:

For example:

Use broadcast for channel specific messages and global for Extension wide messages. Your sending code above uses the broadcast topic

window.Twitch.ext.listen('broadcast', function (topic, contentType, message) {
    try {
        message = JSON.parse(message);
    } catch (e) {
        // this accounts for JSON parse errors
        // just in case
        return;
    }

    console.log(message);
});

Thank for reminding me about it, but this token was not actual it was just a random string.

Now, I want to break the “Hello World sample extension” example into two parts back-end and front-end

I will change the “Hello World sample extension” as per my requirement. like I just want to keep only front-end related files in it and will delete all back-end related stuffs from this example.

Will move back-end related code in back-end project.

I hope, I will be able to run the front-end only in “Twitch Developer Rig” after this change.

I didn’t take the time to validate it as real, but it matched the right format. It’s bad practice even if it’s invalid.

Downloaded “Hello World sample extension”
I have started Front-end and Back-end both but not able to see the front-end view on twitch developer rig https://www.screencast.com/t/ii2GXLbrU3j

You didn’t create any views

It has default views. Please see here https://www.screencast.com/t/UOBshs7pANUg
Do I need to create other than default ones?

You didn’t create any views in the rig.

Hit create view! Then define the parameters of the view (logged in/logged out etc)

You need to tell the Rig what integration points it needs to display to you to simulate the broadcaster installing and activating your extension.

And means you can easily see the users view as well as the broadcasters config view on one page. If you tell the rig to present those layouts

does client need to be authenticated to receive the messages broadcasted by server?

like
https://id.twitch.tv/oauth2/token’ +
‘?client_id=’ + clientId +
‘&client_secret=’ + clientSecret +
‘&grant_type=client_credentials’

No the Extension “client” is just a webpage with code similar to

window.Twitch.ext.listen('broadcast', function (topic, contentType, message) {
    try {
        message = JSON.parse(message);
    } catch (e) {
        // this accounts for JSON parse errors
        // just in case
        return;
    }

    console.log(message);
});

Present.

The Twitch JS extension helper handles all the relevant authentication needed to operate

ok, actually our server will broadcast the live score to multiple channels. At the same time the clients will check if the score changes are coming to my channel. if yes then it will update the score on overlay.

my question is how score overlay will know where am I running? because this score overlay will be added to multiple channels for live streaming

If the score is the SAME for all channels.

Then broadcast using all and listen on global instead of broadcast

POST https://api.twitch.tv/extensions/message/all

For example JWT:

{
  "exp": 1503343947,
  "user_id": "27419011",
  "role": "external",
  "channel_id": "all",
  "pubsub_perms": {
    "send":[
      "global"
    ]
  }
}

correct, but how the score overlay will know where I am running because the same overlay is added on different channel?

You don’t need to know as if you sent to all it sends to all active channels

The live activated channels endpoint

Will tell you which channels are live streaming with your extension active.

Two different games are being live streamed on two different channels. The score will be different of both games suppose channel 1 (game 1) score is 1:2
while channel 2 (game 2) score is 2:5

we want to update the score channel wise on score overlay.

I hope you got my point.

Then you need a game to streamer Map in your EBS.

And broadcast the data to the Extensions accordingly.

You could use global and include game information in the payload
Or you could broadcast directly to individual channels