让我们制作一个Twitch Android应用程序。第2部分。实施聊天的秘诀-DEV365 开发者社区

代码

GitHub

简介

我已经开始了我的下一个应用程序，这是一个Twitch客户端应用。这个系列将是我创建此应用时所面临的所有笔记和问题。

快速免责声明

本教程不是完成和抛光的产品，这只是我说明我目前在实施Twitch视频和聊天方面的进展。我在拥有抛光产品之前写这篇文章，因为我相信有一种更好的方法来实施聊天，而不是最初建议的文档。我想将人们指向我要走的道路，所以他们不会像我一样迷路

嵌入视频

嵌入抽搐视频非常简单。但是，由于Android具有多个设计系统，因此有多种实施方法。这些是主要的两个：

1）WebView：使用WebView是显示用户视频的正确方法。它将允许我们的应用程序直接显示抽搐流。我们可以通过XML或组成解决此问题。

XML非常简单，只需定义一个Web浏览即可，并给予任何必要的约束：

<WebView
     android:id="@+id/webView"
     android:layout_width="match_parent"
     android:layout_height="200dp"
     />

然后，我们需要在onCreateView()方法（我使用的片段）中找到它，并启用JavaScript并加载URL：

val url="https://player.twitch.tv/?channel=$channelName&parent=applicationsName"
val myWebView: WebView = view.findViewById(R.id.webView)
        myWebView.settings.javaScriptEnabled = true
        myWebView.loadUrl(url)

值得指出的是，我们将要警告启用JavaScript。但是，没有它，嵌入式的Twitch流将无法使用。
2）AndroidView：组合版本有点复杂，因为我们需要使用AndroidView类。为了创建一个合成的事情，我们会做这样的事情：

@Composable
fun AnotherTesting(){
    val context = LocalContext.current
    val html = "<iframe src=\"?channel=ChannelYouWantToVisit&parent=NameOfYourApplication\" height=\"360\" width=\"640\" allowfullscreen/>"
    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)

            }
        }
    )
}

现在，我想指出的是，使用此组合版本，我只能使音频版本正常工作。这最像是我缺乏与AndroidView合作的经验。因此，如果您的思想是使用组合系统，请知道您可能必须将AndroidView弄乱。但是，由于IT的简单性just working，我决定坚持使用简单的XML实现

嵌入聊天

这有点棘手，主要是因为documentation告诉我们，我们只需要嵌入视频并聊天。但是，这不会带来最佳的用户体验。此外，用户必须通过WebView登录聊天（这被认为是反练习和黑客攻击向量）

秘密：我相信，与嵌入式版本相比，创建更好的抽搐聊天体验的秘诀是将我们的应用程序视为聊天机器人并实施Twitch’s IRC service。缺点是我们将不得不完全重新创建Twitch聊天体验。但是，我们将自由地自由地重新创建UI，从而使UI合适。 Rate Limits还有另一个缺点。目前，我尚不确定每个用户是否将被视为单独的机器人，或者所有用户是否集体将其视为一个机器人。但是一旦找到支持文档，我将在此处发布。

我们可以在WebSockets的帮助下实施Twitch’s IRC service。
从技术上讲，我们需要做的第一件事是要进行聊天和运行，是对应用程序进行身份验证并获得user access token。您可以通过my previous post
拥有user access token后，我们可以继续实现Websocket并连接到Twitch IRC服务器。我们需要创建一个新类，并让它实现WebSocketListener类。
您可以查看我的GitHub版本HERE，尽管使用当前版本，您必须硬编码您的user access token。
但是要让我们开始，它看起来会这样：

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()
    }

那么，我们需要覆盖onopen（）方法和send the PASS and NICK messages。像这样实施：

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");
    }

另外，我们需要记录结果：

override fun onMessage(webSocket: WebSocket, text: String) {

        Log.d("websocketStoof","onMessage: ${text}")
    }

正确执行所有操作应该给您回馈：

:tmi.twitch.tv 001 <user> :Welcome, YourUsername!
:tmi.twitch.tv 002 <user> :Your host is tmi.twitch.tv
:tmi.twitch.tv 003 <user> :This server is rather new
:tmi.twitch.tv 004 <user> :-
:tmi.twitch.tv 375 <user> :-
:tmi.twitch.tv 372 <user> :You are in a maze of twisty passages.
:tmi.twitch.tv 376 <user> :>
@badge-info=;badges=;color=;display-name=<user>;emote-sets=0,300374282;user-id=12345678;user-type= :tmi.twitch.tv GLOBALUSERSTATE

下一步是什么？

下一个教程，我将清理代码，我们将实际加入聊天室。我们甚至可以通过应用程序发送第一条消息！

结论

感谢您抽出宝贵的时间阅读我的博客文章。如果您有任何疑问或疑虑，请在下面发表评论或在Twitter上与我联系。

目录

代码

简介

快速免责声明

嵌入视频

嵌入聊天

下一步是什么？

结论