Kotlin Multiplatform项目探索之KMChat

kotlin-multiplatform-use-cases
这是当前在 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

工程结构

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

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

overview dependency or data flow
后端和客户端项目均使用UseCaseImpl实现业务逻辑。

后端 — ktor

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

客户端 — Compose Multiplatform

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

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

使用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
                    }
                }
            }
        }
    }
}

在本地 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 { ... }