Jetpack Compose를 활용한 채팅방 구현 및 MutableStateFlow 사용법

Jetpack Compose를 활용한 채팅방 구현 및 MutableStateFlow 사용법

개발하고 놀기

 

이번 글에서는 Jetpack Compose를 활용하여 채팅방을 구현하고, MutableStateFlow를 사용하여 메시지를 관리하고 정렬하는 방법을 소개합니다. 이 글은 Kotlin과 Jetpack Compose를 이용하여 실시간 채팅 애플리케이션을 개발하고자 하는 분들을 위한 가이드입니다.

1. 메시지 데이터 클래스 정의

먼저, 메시지 데이터 클래스를 정의하고 타임스탬프 필드를 추가합니다.

import java.util.*

data class ChatMessage(
    val message: String,
    val timestamp: Long = Calendar.getInstance().timeInMillis
)

 

2. ViewModel을 사용한 메시지 관리

ViewModel을 사용하여 MutableStateFlow를 통해 메시지를 관리합니다. 새로운 메시지가 추가될 때 타임스탬프를 설정하고, 타임스탬프를 기준으로 메시지를 정렬합니다.

 

import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.launch

class ChatViewModel : ViewModel() {
    private val _messages = MutableStateFlow<List<ChatMessage>>(emptyList())
    val messages: StateFlow<List<ChatMessage>> = _messages

    fun sendMessage(message: String) {
        viewModelScope.launch {
            val newMessage = ChatMessage(message)
            val updatedMessages = _messages.value + newMessage
            _messages.value = updatedMessages.sortedBy { it.timestamp }
        }
    }
}

 

3. Composable 함수 설정

Jetpack Compose의 Composable 함수를 사용하여 채팅 UI를 구성합니다. 메시지를 정렬하여 표시합니다.

 

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel

@Composable
fun ChatScreen(viewModel: ChatViewModel = viewModel()) {
    val messages by viewModel.messages.collectAsState()
    var message by remember { mutableStateOf("") }

    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        LazyColumn(
            modifier = Modifier.weight(1f),
            reverseLayout = true
        ) {
            items(messages) { msg ->
                Column {
                    Text(text = msg.message, modifier = Modifier.padding(8.dp))
                    Text(text = Date(msg.timestamp).toString(), style = MaterialTheme.typography.bodySmall)
                }
            }
        }
        Row {
            TextField(
                value = message,
                onValueChange = { message = it },
                modifier = Modifier.weight(1f),
                keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Send),
                keyboardActions = KeyboardActions(onSend = {
                    viewModel.sendMessage(message)
                    message = ""
                })
            )
            Button(onClick = {
                viewModel.sendMessage(message)
                message = ""
            }) {
                Text("Send")
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun ChatScreenPreview() {
    ChatScreen()
}

 

4. MainActivity 설정

마지막으로, MainActivity에서 ChatScreen을 설정합니다.

 

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ChatScreen()
        }
    }
}

 

마무리

이로써 Jetpack Compose와 MutableStateFlow를 활용하여 채팅방을 구현하는 방법을 알아보았습니다. 이를 통해 실시간으로 메시지를 관리하고 타임스탬프를 기준으로 정렬하여 사용자에게 부드러운 채팅 경험을 제공할 수 있습니다. 이 예제를 바탕으로 더욱 다양한 기능을 추가해보세요!