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
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.
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.
“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.
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
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
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.