Kotlin Multiplatform项目探索之KMChat

最新推荐文章于 2024-08-21 10:17:51 发布

锐湃

最新推荐文章于 2024-08-21 10:17:51 发布

阅读量269

点赞数

分类专栏： jetpack 程序设计文章标签： kotlin 开发语言 android

原文链接：https://mp.weixin.qq.com/s/Sl2PEl9YdAvyT2g21y4YlA

版权

程序设计同时被 2 个专栏收录

320 篇文章 5 订阅

订阅专栏

jetpack

184 篇文章 15 订阅

订阅专栏

这是当前在 Kotlin Multiplatform 官方文档中提议的用例结构。Kotlin Multiplatform 中包含的许多子组件已经发布了稳定版本，即使目前不稳定的组件也在迅速更新。

本文中的演示项目包括 Compose Multiplatform - Web (Experimental)、iOS (Alpha) 和 Kotlin Multiplatform - Kotlin/Native (Beta)。在进行产品项目开发时，使用这种方法可能会导致一些问题。

通用代码随处可见

在开发软件时，各个平台上都存在重复的实现，被称为通用代码。这项任务不仅需要开发成本，还包含了许多开销，比如通信成本。JetBrains 提议使用 Kotlin Multiplatform，可以将通用代码开发为单个代码库，有效地解决了这些问题。

KMChat

这是我实现的一个聊天应用项目，旨在更好地理解官方文档中提出的用例。通过这个项目，我将学习如何使用Kotlin Multiplatform编写通用代码，并将其应用于所有平台。

我还使用Compose Multiplatform实现了所有平台的用户界面。

预览结果

• 创建房间 → 加入房间 → 设置用户名

这是仅实现了聊天服务的最少功能的客户端的结果。您可以通过使用Compose多平台实现UI在所有平台上的结果。

Github

• https://github.com/ColaGom/km-chat-common
• https://github.com/ColaGom/km-chat-backend
• https://github.com/ColaGom/km-chat-client

工程结构

常用存储库由客户端和后端存储库中的子模块导入。

Common

• 它包括聊天服务中使用的共同代码。
• 我决定将演示项目的共同代码中包括DTO类和用例，这些类和用例同样包含在客户端和后端的业务逻辑中。

DTO

data class Chat
data class ChatMessage
data class ChatRoom
data class ChatUser

data class SendChat
data class CreateChatRoom
data class DeleteChatRoom

UseCase

interface UseCase<INPUT, OUTPUT> {
    suspend fun execute(input: INPUT): OUTPUT
}

interface CreateChatRoomUseCase : UseCase<CreateChatRoom, ChatRoom>
interface GetAllChatRoomUseCase : VoidUseCase<List<ChatRoom>>
interface GetChatRoomUseCase : UseCase<Long, ChatRoom?>

OverView common

后端和客户端项目均使用UseCaseImpl实现业务逻辑。

后端 — ktor

• 实现了聊天室和与用户相关的API功能。
• 使用WebSocket实现了聊天功能。
• 存储库采用内存方式实现存储所有数据。

客户端 — Compose Multiplatform

• 支持AOS、iOS、Web和桌面平台。
• 使用Kotlin Multiplatform实现了所有平台的客户端逻辑。
• 使用Compose Multiplatform实现了所有平台的用户界面。

我尝试了两种使用Compose Multiplatform的方式。

1. 使用Compose multiplatform实现整个屏幕 (Web, Desktop)。

//in shared common
@Composable
fun ChatApp() {
    var selectedRoom by remember {
        mutableStateOf<ChatRoom?>(null)
    }

    Theme {
        Surface {
            Column(modifier = Modifier.fillMaxSize()) {
                val room = selectedRoom
                if (room != null) {
                    ChatScreen(room.id)
                    DisposableEffect(room) {
                        onDispose {
                            selectedRoom = null
                        }
                    }
                } else {
                    ChatRoomListScreen {
                        selectedRoom = it
                    }
                }
            }
        }
    }
}

1. 在本地 UI（AOS、iOS）中实现复合 UI。

class MainActivity : ComponentActivity() {
    private val chatLauncher = registerForActivityResult(ChatActivity.Contract()) { }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ChatRoomListScreen(
                onClickRoom = { room ->
                    chatLauncher.launch(room.id)
                }
            )
        }
    }
}

@main
struct iOSApp: App {
    var body: some Scene {
        WindowGroup {
            MainView()
        }
    }
}

protocol ListViewListener : AnyObject {
    func clickRoom(room: Km_chat_commonChatRoom)
}

class MainViewModel: ObservableObject, ListViewListener {
    @Published var selectedRoom: Km_chat_commonChatRoom?
    
    var roomId: Int64 { ... }
    var entered: Bool { ... }
    
    func clickRoom(room: Km_chat_commonChatRoom) {
        selectedRoom = room
    }
}

struct MainView: View{
    @StateObject private var viewModel = MainViewModel()
    
    var body: some View {
        ListView(listener: viewModel)
            .sheet(isPresented: $viewModel.entered, content: { ChatView(roomId: viewModel.roomId) })
    }
}

struct ChatView: UIViewControllerRepresentable {
    var roomId: Int64
    
    func makeUIViewController(context: Context) -> UIViewController {
        return ControllersKt.ChatController(roomId: roomId)
    }
    
    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
    }
}

struct ListView: UIViewControllerRepresentable { ... }