-
Clicker
A Twitch Android client built with moderators in mind. Join the subreddit to voice your ideas, questions and concerns. Link to app on Google Play store below. Next update is 2024-05-13 (by thePlebDev)
- Now I would like to point out that with this compose version I was only able to get the audio version working. This is most like do to my lack of experience of working with the
AndroidView
. So if your mind is set on using the compose system, know that you may have to mess around with theAndroidView
a little longer. However, due to the simplicity of itjust working
, I have decided to stick with the simple XML implementation - This is a little trickier, mainly because the documentation tells us that we just need to embed the video and chat together. However, this does not result in the best user experience. Also, the user has to sign in through the WebView to chat(Which is considered an anti practice and a attack vector for hackers)
We can implement Twitch’s IRC service with the help of WebSockets provided to us by the engineering team at square.
Technically the first thing we need to do to get the chat up and running is to authenticate our application and get a
user access token
. You can see how to do that through my previous postOnce you have a user access token, we can move on to implementing a Websocket and connecting to the twitch IRC servers. We need to create a new class and have it implement the WebSocketListener class.
You can check out my github version HERE, although with the current version you have to hard code your
user access token
.
But to get us started, it will look something like this:
- Then we need to override the onOpen() method and send the PASS and NICK messages. Implemented like so:
- Also, we need to log the results:
- Doing everything correctly should give you back a message of:
- Next tutorial I will clean up the code and we will walk through actually joining a chat room. We might even be able to send our first messages through our app!!!!!!!
- Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on Twitter.
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
@Composable fun AnotherTesting(){ val context = LocalContext.current val html = "" AndroidView( factory = { WebView(context).apply { webViewClient = WebViewClient() webChromeClient = WebChromeClient() settings.loadsImagesAutomatically = true settings.javaScriptEnabled = true settings.allowFileAccess = true settings.javaScriptCanOpenWindowsAutomatically = true settings.mediaPlaybackRequiresUserGesture = false settings.domStorageEnabled = true settings.cacheMode = WebSettings.LOAD_NO_CACHE loadDataWithBaseURL("https://player.twitch.tv/", html, "text/html", "UTF-8", null) } } ) }
Enter fullscreen mode Exit fullscreen mode
Embedding the chat
The secret : I believe the secret to creating a better twitch chat experience than the embedded version is to treat our application as a chatbot and to implement Twitch’s IRC service. The downside being that we will have to entirely recreate the Twitch chat experience. However, we will get the freedom to recreate the UI as we see fit. There is another downside of Rate Limits. At this moment I am uncertain if the each individual user would be treated as a separate bot or if all users get treated collectively as one bot. But once I find supporting documentation I will post it here.
class TwitchWebSocket(): WebSocketListener() { val webSocketURL = "wss://irc-ws.chat.twitch.tv:443" init { run() } private fun run() { val client: OkHttpClient = OkHttpClient.Builder() .readTimeout(1000,TimeUnit.MILLISECONDS) .writeTimeout(1000,TimeUnit.MILLISECONDS) .build() val request: Request = Request.Builder() .url(webSocketURL) .build() client.newWebSocket(request, this) // Trigger shutdown of the dispatcher's executor so this process can exit cleanly. client.dispatcher.executorService.shutdown() }
Enter fullscreen mode Exit fullscreen mode
override fun onOpen(webSocket: WebSocket, response: Response) { super.onOpen(webSocket, response) webSocket.send("CAP REQ :twitch.tv/tags twitch.tv/commands"); //todo: add the User access tokens after oauth: webSocket.send("PASS oauth:yourToken"); webSocket.send("NICK username"); }
Enter fullscreen mode Exit fullscreen mode
override fun onMessage(webSocket: WebSocket, text: String) { Log.d("websocketStoof","onMessage: ${text}") }
Enter fullscreen mode Exit fullscreen mode
:tmi.twitch.tv 001 :Welcome, YourUsername! :tmi.twitch.tv 002 :Your host is tmi.twitch.tv :tmi.twitch.tv 003 :This server is rather new :tmi.twitch.tv 004 :- :tmi.twitch.tv 375 :- :tmi.twitch.tv 372 :You are in a maze of twisty passages. :tmi.twitch.tv 376 :> @badge-info=;badges=;color=;display-name=;emote-sets=0,300374282;user-id=12345678;user-type= :tmi.twitch.tv GLOBALUSERSTATE
Enter fullscreen mode Exit fullscreen modeWhat is next?
Conclusion