[flutter] get_it를 사용하여 플러터 앱에서 실시간 채팅을 어떻게 구현하는가?

30 Nov 2023

flutter

플러터(Flutter)는 Google에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크로, 플러터를 사용하면 Android와 iOS 모두에서 동일한 코드베이스로 앱을 개발할 수 있습니다. 이번 글에서는 get_it 패키지를 사용하여 플러터 앱에서 실시간 채팅을 구현하는 방법을 알아보겠습니다.

1. get_it 패키지 설치하기

get_it 패키지를 사용하려면 먼저 해당 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 get_it 패키지를 추가합니다.

dependencies:
  get_it: ^6.0.0

그리고 터미널에서 다음 명령어를 실행하여 패키지를 가져옵니다.

flutter packages get

2. get_it 서비스 등록하기

get_it을 사용하면 전역적으로 접근 가능한 서비스를 등록하고 관리할 수 있습니다. 이를 ServiceLocator라고 부르며, 실시간 채팅을 위한 서비스를 등록할 수 있습니다.

import 'package:get_it/get_it.dart';

GetIt serviceLocator = GetIt.instance;

void setupServiceLocator() {
  // 실시간 채팅 서비스 등록
  serviceLocator.registerSingleton<ChatService>(ChatService());
}

위의 예제에서는 ChatService라는 클래스를 ChatService라고 등록하고 있습니다. 실제로는 ChatService 클래스를 구현하여 사용해야 합니다.

3. 실시간 채팅 기능 구현하기

실시간 채팅 기능을 구현하기 위해서는 Firebase나 Socket.io와 같은 실시간 통신을 위한 라이브러리를 사용할 수 있습니다. 이 예제에서는 Firebase Cloud Firestore를 사용하여 실시간 채팅을 구현해보겠습니다.

import 'package:cloud_firestore/cloud_firestore.dart';

class ChatService {
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;

  Stream<List<ChatMessage>> getChatMessages() {
    return _firestore
        .collection('chats')
        .orderBy('timestamp', descending: true)
        .snapshots()
        .map((snapshot) {
      List<ChatMessage> messages = [];
      snapshot.docs.forEach((doc) {
        messages.add(ChatMessage.fromDocument(doc));
      });
      return messages;
    });
  }

  Future<void> sendMessage(ChatMessage message) async {
    await _firestore.collection('chats').add(message.toMap());
  }
}

class ChatMessage {
  final String message;
  final String sender;
  final DateTime timestamp;

  ChatMessage({required this.message, required this.sender, required this.timestamp});

  ChatMessage.fromDocument(QueryDocumentSnapshot snapshot)
      : message = snapshot.data()['message'],
        sender = snapshot.data()['sender'],
        timestamp = snapshot.data()['timestamp'].toDate();

  Map<String, dynamic> toMap() {
    return {
      'message': message,
      'sender': sender,
      'timestamp': timestamp,
    };
  }
}

위의 예제에서는 ChatService 클래스를 통해 실시간 채팅 메시지를 가져오고, 새로운 메시지를 전송하는 기능을 구현하였습니다. Firestore의 collection을 사용하여 채팅 메시지를 저장하고 가져옵니다.

4. 실시간 채팅 화면에서 get_it 서비스 사용하기

플러터 앱에서 실시간 채팅 화면을 구현할 때, get_it을 사용하여 등록된 ChatService를 사용할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';

class ChatScreen extends StatelessWidget {
  final ChatService chatService = GetIt.instance.get<ChatService>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat App'),
      ),
      body: StreamBuilder<List<ChatMessage>>(
        stream: chatService.getChatMessages(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Center(
              child: CircularProgressIndicator(),
            );
          } else {
            List<ChatMessage> messages = snapshot.data ?? [];

            return ListView.builder(
              itemCount: messages.length,
              reverse: true,
              itemBuilder: (context, index) {
                ChatMessage message = messages[index];
                return ListTile(
                  title: Text(message.sender),
                  subtitle: Text(message.message),
                );
              },
            );
          }
        },
      ),
    );
  }
}

위의 예제에서는 ChatScreen 위젯에서 GetIt.instance.get<ChatService>()를 사용하여 등록된 ChatService를 가져와서 실시간 채팅 메시지를 가져와 화면에 출력합니다.

결론

get_it 패키지를 사용하여 플러터 앱에서 실시간 채팅을 구현하는 방법을 알아보았습니다. get_it을 사용하면 서비스들을 더욱 쉽게 관리할 수 있으며, 실시간 채팅과 같이 전역적으로 접근해야 하는 기능을 손쉽게 구현할 수 있습니다.

참조: