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

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

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?

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

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.