[swift] Swift FirebaseUI를 사용하여 실시간 채팅 구현하기

16 Nov 2023

swift

FirebaseUI는 Firebase 서비스를 Swift 애플리케이션에 쉽게 통합할 수 있는 라이브러리입니다. 이번 포스트에서는 FirebaseUI를 사용하여 실시간 채팅을 구현하는 방법을 알아보겠습니다.

1. Firebase 프로젝트 설정

먼저, Firebase 콘솔에서 새 프로젝트를 생성하고, Realtime Database를 활성화해야 합니다. Firebase 콘솔에서 “프로젝트 설정”으로 이동하여 프로젝트의 Firebase 설정 파일(GoogleService-Info.plist)을 다운로드하고 프로젝트에 추가합니다.

2. FirebaseUI 설치

FirebaseUI를 사용하기 위해 FirebaseUI 패키지를 설치해야 합니다. 이를 위해 Podfile에 FirebaseUI를 추가하고 pod install 명령을 실행합니다.

platform :ios, '12.0'

target 'YourApp' do
  use_frameworks!
  
  pod 'FirebaseUI', '~> 10.0'
end

3. FirebaseUI 채팅 뷰컨트롤러 구현

FirebaseUI는 채팅 앱에 사용할 수 있는 FUIFirestoreCollectionViewDataSource와 FUIFirestoreTableViewDataSource를 제공합니다. 이를 사용하여 채팅 화면을 구성할 수 있습니다.

import UIKit
import Firebase
import FirebaseUI

class ChatViewController: UIViewController {
    
    @IBOutlet weak var chatCollectionView: UICollectionView!
    @IBOutlet weak var messageTextField: UITextField!
    
    var dataSource: FUIFirestoreCollectionViewDataSource!
    var firestore: Firestore!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        configureFirebase()
        configureDataSource()
    }
    
    func configureFirebase() {
        FirebaseApp.configure()
        firestore = Firestore.firestore()
    }
    
    func configureDataSource() {
        let query = firestore.collection("messages").order(by: "timestamp")
        let collectionView = chatCollectionView!
        
        let options = FUIFirestoreCollectionViewDataSourceOptions()
        options.paginationLimit = 50
        
        dataSource = FUIFirestoreCollectionViewDataSource(query: query, collectionView: collectionView, populateCell: { (collectionView, indexPath, snapshot) -> UICollectionViewCell in
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ChatCell", for: indexPath) as! ChatCell
            // 셀 설정
            
            return cell
        })
        
        dataSource.bind(to: collectionView)
    }
    
    @IBAction func sendMessage(_ sender: UIButton) {
        guard let message = messageTextField.text, !message.isEmpty else {
            return
        }
        
        firestore.collection("messages").addDocument(data: [
            "text": message,
            "timestamp": Date().timeIntervalSince1970
        ]) { error in
            if let error = error {
                print("Error sending message: \(error.localizedDescription)")
            } else {
                self.messageTextField.text = ""
            }
        }
    }
    
}

4. 채팅 화면 구성

ChatViewController는 UICollectionViewDelegateFlowLayout 프로토콜을 따르고 있으므로, 채팅 화면에 맞게 셀 크기와 여백을 조정할 수 있습니다. 또한, Firestore 데이터베이스에서 메시지를 읽고 쓰기 위해 configureDataSource() 메소드를 구현하였습니다.

5. 채팅 화면과 데이터 연동하기

FirebaseUI의 FUIFirestoreCollectionViewDataSource는 Firestore 쿼리 결과를 수신하고, 데이터 변경이 감지되면 화면을 업데이트합니다. configureDataSource()에서는 FUIFirestoreCollectionViewDataSource 인스턴스를 생성하고 이를 채팅 화면의 chatCollectionView에 연결하였습니다.

마무리

이렇게 FirebaseUI를 사용하여 Swift 애플리케이션에 실시간 채팅을 구현할 수 있습니다. FirebaseUI는 다양한 기능과 UI 컴포넌트를 제공하므로, 필요한 기능에 맞게 활용할 수 있습니다.

참고 자료

FirebaseUI 실시간 채팅 공식 문서