Twitch overlay: Integrated with Chat, Events, Camera and Scenes

  • Old showcase

    A old test build I made, which EMULATES a raid happening on stream. This will be changed in the future to be a TOP-DOWN 2D battle instead, and featuring various things depending on the streamers follower amount and host amount. Example 10 followers could be a knight riding a horse instead.

    Enjoy!

    Subscribe to Construct videos now
  • CAPX provided here : https://www.dropbox.com/s/s2gdix8alz8fulj/Websocket%20Twitch%20Chat%20Sample.capx?dl=0

    Using WEBSOCKET to READ/WRITE to Twitch chat

    This took me a little while to understand but it is diffently better then having a 3rd party program that save the chat to a text, which you then could read in construct 2 using AJAX. So it saves me a program, that said I cannot confident says that I understand every aspect of how this actually works, but I would think it a IRC chat that it reads and send back the information.

    https://dev.twitch.tv/docs/irc/guide/

    What you need

    • A twitch channel: We will use USERNAME here (remember to write it in lowercase)
    • A oauth: We will use TOKEN here (Get it- https://twitchapps.com/tmi/)

    What I do

    Twitch server: wss://irc-ws.chat.twitch.tv/

    SUB EVENT: On start of layout

    ACTION: WEBSOCKET, connect to = "wss://irc-ws.chat.twitch.tv/", protocol = ""

    SUB EVENT: WEBSOCKET, On connection opened

    ACTION: WEBSOCKET, send text = "PASS "&"TOKEN" (yes you need the spacing)

    ACTION: WEBSOCKET, send text = "NICK "&"USERNAME" (yes you need the spacing)

    ACTION: WEBSOCKET, send text = "JOIN "&"#"&USERNAME" (yes you need the spacing and #, USERNAME and CHANNEL name would be the same, so we use it here too, but this part is for joining a CHANNEL)

    To send a message

    SUB EVENT: WEBSOCKET, On connection open

    ACTION: WEBSOCKET, send text = "PRIVMSG "&"#"&USERNAME&" "&":HELLO WORLD" (This should work)

    But sending a message will allow you to everything you normallay can do, if the send message is correct

  • I wonder if I can post messages with the current setup I have.

    TheCrudeCastle you interested in sharing details so we can expand upon the Twitch integration?

    I have mine completely controlling my Twitch overlay, even allowing people to cross chat between channels, calling up mini-games to play on screen via the chat and even challenging the streamer :D

  • SUB EVENT: WEBSOCKET, On connection opened

    ACTION: WEBSOCKET, send text = "PASS "&"USERNAME" (yes you need the spacing)

    ACTION: WEBSOCKET, send text = "NICK "&"TOKEN" (yes you need the spacing)

    ACTION: WEBSOCKET, send text = "JOIN "&"#USERNAME" (yes you need the spacing and #)

    Isn't PASS followed by the Oauth token, and the NICK followed by the username???

    From Twitch:

    < PASS oauth:<Twitch OAuth token>

    < NICK <user>

    I can't seem to be able to send messages to my channel. I'd have thought I'd need to actually provide my account's username and password.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • AnD4D

    You are completly correct and this is a typo from my side :D its corrected now. But I dont it care much about what order it gets it in though, not that I have tried a different order.

    And sure im willing to share everything I learn about how to do all these things, for lets be honest twitch isnt really good at explaining how you could do things in their manual ^^ or at least I dont think so, maybe its because I dont really understand the wordings they use :/ but im slowly learning.

    ------

    Uhhh sounds like you can do quite alot of things already in your overlay (saw one of your videoes from a stream) alot of things I havent even considered would be possible hehe like cross chatting :O sounds very neat. Keep up the good work and lets share as much as we can so it will be easier for other people :D

  • Also, just figured out the chatting thing. For me, it's:

    "PRIVMSG #and4d :HELLO WORLD"

    I was missing the : and it's really important. It now works perfectly :D Thanks!

    What is your Twitch username, so I can check out your integration?

  • AnD4D

    Just added a CAPX if you want to look deeper into how I did it all, im sure the coding can be optimized by one with more experience though :D

    and I have the same username there as I have here :) but I dont have my overlay active at the moment so not much to show really, but will have it running soon as a test fase while I rebuild it to what I want to make.

  • Current CAPX is here: https://www.dropbox.com/s/igq0smc4n3j4tlj/Kraken%20Listen%20Sample.capx?dl=0

    Twitch API.v5 (Kraken)

    Official page: https://dev.twitch.tv/docs/v5/

    We can do ALOT of things with the API, and even more with the future [HELIX] but I only explored [KRAKEN] and will simply explain what ive succed in doing thus far, because I still dont truly understand how its works and the documentation is NOT explained well enough (in my opinion)

    But in simple terms as I see it, we send a "GET" request to their "URL" and get a respons from there, that respons is in "JSON", and doing the request from a browser giver you a "JSON" file, you could prob. use that somehow.

    What you need

    Register your APP here: https://glass.twitch.tv/console Which provides us with the following

    • Client_ID
    • Client_SECRET (I havent figured out what this is for)
    • Redirect_URL (This is used when we REQUEST things we wanna get updated on)

    After doing that we can allow the APP to REQUEST event, these are called scopes in the documentation putting together the needed information below.

    • https://id.twitch.tv/oauth2/authorize (The URL)
    • response_type=token (It MUST be token =specific code to authenticate its you)
    • client_id=YourID
    • redirect_uri=YourURL (It MUST be the exact same one here and in APP)
    • scope=YourScopes (See: https://dev.twitch.tv/docs/authentication/#scopes)

    *DEEP BREATH* Now all this allows to send a URL in a browser

    https://id.twitch.tv/oauth2/authorize?response_type=token&client_id=YourID&redirect_uri=YourURL&scope=YourScopes

    (you can add more SCOPES using , after each one : Which provides a code for the scope you want information about)

    What I did

    Now I havent completly figured out this part but I am able to get information about my channel since it only requires a "CLIENT_ID"

    On start of Layout

    Action - AJAX - REQUEST "https://api.twitch.tv/kraken/channels/YOURchannel?client_id=YourID"

    This will provide alot of information about your channel, such as your channel_ID in numbers instead of letters. See: https://dev.twitch.tv/docs/v5/reference/channels/#get-channel

  • The Crude Overlay - 0.0.0.2

    This simple just shows how #WEBSOCKET reads chat, and a event happens on screen, it will be more fancy later on in the process.

    Made with #construct2

  • TheCrudeCastle

    Can I ask how you go about checking for bit donations, follows, subs, etc?

    My current code breaks down each sentence into words and feeds those words into a separate array. It will then look for key words in certain positions in the array to determine what it is doing.

    Also, I know what the secret code is for. It allows you to use a bearer token instead of a client-id. This allows you to run 300 checks a minute instead of just 30.

    I'm currently trying to figure out how to make use of api.twitch.tv/helix/webhooks/hub

    Yeah, I'm using helix for all of my stuff instead of kraken, but I can't figure out what scopes are, nor do I understand webhooks.

    I also use websocket to connect to "wss://irc-ws.chat.twitch.tv:443" as my code requires that I read the chat for key words and commands, however, the Twitch API suggests that I ALSO connect to "wss://pubsub-edge.twitch.tv". I'm not sure I CAN connect to more than one at a time.

    This https://dev.twitch.tv/docs/api/webhooks-reference/ unfortunately means very little to me. You're correct in saying that their documentation is a quite poor.

  • TheCrudeCastle thanks for sharing your c2 code! <3

  • You are most welcome :) huge lack regarding this subject so we might aswell help each other a little. And will continue to provide what I learn :)

    TheCrudeCastle thanks for sharing your c2 code! <3

  • AnD4D

    Sure you can, even though its kinda similar to what you do but it might be a little more simple.

    So we need the following:

    connect with WEBSOCKET [x]

    A GLOBAL text CHAT = ""

    A TextBox (to show the chat message)

    SUB EVENT: Websocket, on message

    -ACTION: System -> Set CHAT -> Replace replace(WebSocket.MessageText,"@","!")

    ^ This simply just replace EVERY "@" received with a "!" , which sounds really odd without a explanation, but it simply lets us seperate the USERNAME from all the rest of the text. Since a normal websocket would looks as the following:

    :crudetower!crudetower@crudetower.tmi.twitch.tv PRIVMSG #thecrudecastle :Hello world

    It will then become the following:

    :crudetower!crudetower!crudetower.tmi.twitch.tv PRIVMSG #thecrudecastle :Hello world

    Which allow us to do this as a complete command:

    SUB EVENT: Websocket, on message

    -ACTION: System -> Set CHAT -> replace(WebSocket.MessageText,"@","!")

    -ACTION: System -> Set text -> tokenat(Chat_Current_Message,1,"!")&newline&tokenat(Chat_Current_Message,1,"#"&USERNAME&" :")

    It first sepate the text at the FIRST apperance of a "! and get the VALUE and stops when the next apperance happens.

    it then makes a NEWLINE

    finally it makes the last seperator which happens at #USERNAME, and this gives us the following message in our CHATBOX:

    "crudetower

    :Hello World"

    Sooo to actually explain your question (after that long ranting) I simply control if the USER is "crudetower" (my bot) and what it says, here its keywords like you do:

    SUB EVENT: System -> Find(Chat_Current_Message,"crudetower") NOT EQUAL -1

    Find(find(Chat_Current_Message,"knight") NOT EQUAL -1

    This is for my followers, So if its anyone ELSE then crudetower that says knight then nothing will happen, but if it is crudetower saying knight the event will trigger.

  • AnD4D

    :D let me know if you have any luck with HELIX, would like to know how its done.

    Cheers

  • I was watching one of your streams back, and noticed that you read what your streamlabs chatbot says (notifications).

    As far as I can tell, we should be able to listen out for subscriptions or cheers without the use of an external program.

    Also, as my code is hosted online, rather than offline, I can't use tmi code.

    Without this, we can't realistically create Twitch games that allow donations and the like.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)