[swift] 스택 뷰를 활용한 실시간 채팅 애플리케이션 구현하기

01 Dec 2023

swift

이번 블로그에서는 Swift를 사용하여 실시간 채팅 애플리케이션을 구현하는 방법에 대해 알아보겠습니다. 이 애플리케이션에서는 스택 뷰를 활용하여 메시지를 표시하고 사용자 간의 실시간 대화를 할 수 있습니다.

시작하기 전에

이 튜토리얼을 따라하기 위해선 Xcode가 설치되어 있어야 합니다. 또한, Firebase를 사용하여 실시간 메시지 전송 및 저장을 구현할 것이므로 Firebase 프로젝트가 미리 생성되어 있어야 합니다.

프로젝트 설정

Xcode에서 새로운 프로젝트를 생성합니다.
Firebase 콘솔로 이동하여 새 프로젝트를 생성하고 iOS 앱을 추가합니다.
Firebase 콘솔에서 제공하는 GoogleService-Info.plist 파일을 프로젝트 폴더에 추가합니다.
Xcode에서 Firebase SDK를 설치하고 프로젝트에 추가합니다.

인터페이스 구성

Main.storyboard 파일을 엽니다.
새로운 뷰 컨트롤러를 추가하고 해당 뷰 컨트롤러와 Swift 파일을 연결합니다.
뷰 컨트롤러에 스택 뷰를 추가합니다. 스택 뷰는 채팅 메시지를 표시하는 역할을 합니다.
텍스트 필드와 전송 버튼을 스택 뷰에 추가하고 알맞은 제약 조건을 설정합니다.

데이터베이스 설정

Firebase 콘솔에서 데이터베이스 탭으로 이동합니다.
Realtime Database를 선택하고 규칙 탭에서 읽기 및 쓰기 권한을 설정합니다.
```
{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}
```

코드 구현

ChatViewController.swift 파일을 엽니다.
필요한 import 문을 추가합니다.
```
import UIKit
import Firebase
```

ChatViewController 클래스에 필요한 IBOutlet을 추가합니다.

@IBOutlet weak var stackView: UIStackView!
@IBOutlet weak var messageTextField: UITextField!
@IBOutlet weak var sendButton: UIButton!

viewDidLoad() 함수에서 Firebase 데이터베이스에 연결합니다.

override func viewDidLoad() {
    super.viewDidLoad()
    // Firebase 데이터베이스에 연결
    Database.database().isPersistenceEnabled = true
}

sendMessage() 함수를 추가하여 메시지를 전송하는 기능을 구현합니다.

@IBAction func sendMessage(_ sender: Any) {
    guard let message = messageTextField.text, message.trimmingCharacters(in: .whitespacesAndNewlines) != "" else {
        return
    }

    // 메시지 정보를 Firebase 데이터베이스에 추가
    let messagesRef = Database.database().reference().child("messages")
    let messageData = [
        "sender": Auth.auth().currentUser?.uid,
        "message": message
    ]
    messagesRef.childByAutoId().setValue(messageData)

    // 텍스트 필드 초기화
    messageTextField.text = ""
}

observeMessages() 함수를 추가하여 실시간으로 메시지를 업데이트하는 기능을 구현합니다.

func observeMessages() {
    let messagesRef = Database.database().reference().child("messages")
    messagesRef.observe(.childAdded) { (snapshot) in
        if let messageData = snapshot.value as? [String: Any], let sender = messageData["sender"] as? String, let message = messageData["message"] as? String {
            let messageLabel = UILabel()
            messageLabel.text = "\(sender): \(message)"
            self.stackView.addArrangedSubview(messageLabel)
        }
    }
}

viewWillAppear() 함수에서 observeMessages() 함수를 호출합니다.

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    // 메시지 업데이트를 위해 observeMessages() 함수 호출
    observeMessages()
}

실행

앱을 실행하고 메시지를 입력하고 전송 버튼을 눌러보세요. 스택 뷰에 새로운 메시지가 추가되어 실시간으로 채팅이 이루어지는 것을 확인할 수 있습니다.

결론

이번 블로그에서는 Swift와 스택 뷰를 활용하여 실시간 채팅 애플리케이션을 구현하는 방법에 대해 알아보았습니다. Firebase를 사용하여 실시간 메시지 전송 및 저장을 구현하였습니다. 이를 바탕으로 원하는 기능을 추가하고 UI를 개선하여 완성도 있는 채팅 애플리케이션을 만들어보세요.

시작하기 전에

프로젝트 설정

인터페이스 구성

데이터베이스 설정

코드 구현

실행

결론

참고 자료