Colin's Blog
[swift] Swift Presentr와 함께 사용하는 실시간 채팅 기능 구현 방법

목차

소개

실시간 채팅 기능은 현대 앱 개발에서 매우 중요한 기능 중 하나입니다. 이번 튜토리얼에서는 Swift Presentr로 모달창을 구현하고, Firebase를 사용하여 실시간 채팅 기능을 구현하는 방법을 알아보겠습니다.

사전 준비

이 튜토리얼을 따라하기 전에 다음 사항들이 준비되어야 합니다:

채팅 기능 구현

Firebase 설정

  1. Firebase 콘솔에 접속하여 새 프로젝트를 생성합니다.
  2. 생성된 프로젝트에서 “채팅”과 같은 이름의 새로운 Realtime Database를 추가합니다.
  3. 앱에 필요한 Firebase SDK를 설치하고 초기화하는 방법은 Firebase 공식 문서를 참조해주세요.

메시지 송신

송신자가 메시지를 작성하고 전송하기 위해 다음 단계를 따릅니다:

  1. Presentr을 사용하여 모달창을 엽니다. 모달창에는 채팅 입력란과 “전송” 버튼이 포함되어야 합니다.
  2. “전송” 버튼을 누르면 작성된 메시지를 Firebase에 저장합니다.
  3. Firebase 이벤트 핸들러를 활용하여 메시지 송신을 감지합니다.
  4. 송신자의 채팅 화면에 메시지를 표시합니다.
import Presentr
import Firebase

class ChatViewController: UIViewController {
    // 모달창을 구현할 때 사용할 Presentr 객체
    var presentr: Presentr {
        let width = ModalSize.full
        let height = ModalSize.fluid(percentage: 0.8)
        let center = ModalCenterPosition.center
        let customType = PresentationType.custom(width: width, height: height, center: center)
        let presentr = Presentr(presentationType: customType)
        return presentr
    }
    
    // Firebase Realtime Database 참조
    let ref = Database.database().reference()
    
    @IBAction func openChatModalButtonPressed(_ sender: UIButton) {
        let chatModal = ChatModalViewController()
        customPresentViewController(presentr, viewController: chatModal, animated: true, completion: nil)
    }
    
    func sendMessage(_ message: String) {
        // Firebase에 메시지 저장
        ref.child("messages").childByAutoId().setValue(message)
    }
    
    // Firebase 이벤트 핸들러를 통해 메시지 감지 및 화면에 표시
    func observeMessages() {
        ref.child("messages").observe(.childAdded) { (snapshot) in
            if let message = snapshot.value as? String {
                print("New message: \(message)")
            }
        }
    }
}

메시지 수신

수신자가 메시지를 수신하기 위해 다음 단계를 따릅니다:

  1. Firebase 이벤트 핸들러를 활용하여 메시지 수신을 감지합니다.
  2. 수신된 메시지를 채팅 화면에 표시합니다. 채팅 화면은 UITableView를 사용해 구현할 수 있습니다.
import Firebase

class ChatViewController: UIViewController, UITableViewDataSource {
    // Firebase Realtime Database 참조
    let ref = Database.database().reference()
    // 메시지를 저장할 배열
    var messages: [String] = []
    
    // UITableView 데이터 소스 메서드 구현
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return messages.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "MessageCell", for: indexPath)
        cell.textLabel?.text = messages[indexPath.row]
        return cell
    }
    
    // Firebase 이벤트 핸들러를 통해 메시지 감지 및 화면에 표시
    func observeMessages() {
        ref.child("messages").observe(.childAdded) { [weak self] (snapshot) in
            if let message = snapshot.value as? String {
                self?.messages.append(message)
                self?.tableView.reloadData()
            }
        }
    }
}

결론

이번 튜토리얼에서는 Swift Presentr와 Firebase를 사용하여 실시간 채팅 기능을 구현하는 방법을 살펴보았습니다. Presentr을 사용하여 모달창을 열고, Firebase를 사용하여 메시지를 송신 및 수신할 수 있습니다. 이러한 구현을 통해 애플리케이션에 실시간 채팅 기능을 추가할 수 있습니다.

© 2018 Colin. All rights reserved.