Blog

Cómo integrar chat en una app SwiftUI con Firebase

10 Nov 2025

Tabla de Contenidos

Por qué usar Firebase para añadir chat en tu app iOS

Cuando desarrollamos una aplicación móvil con SwiftUI, integrar un sistema de mensajería puede parecer complejo: sincronización, almacenamiento, usuarios, notificaciones… Firebase simplifica todo esto.

Su ecosistema (Authentication, Firestore, Storage y Cloud Messaging) cubre el 90 % de los requisitos técnicos sin necesidad de montar servidores propios.

Saber cómo integrar chat en una app SwiftUI con Firebase es esencial para crear productos escalables: desde apps sociales hasta herramientas internas o servicios de soporte en tiempo real.

Cómo integrar chat en una app SwiftUI con Firebase | 5

Requisitos previos antes de empezar

Antes de ver cómo integrar chat en una app SwiftUI con Firebase, asegúrate de cumplir con los siguientes puntos:

Xcode actualizado (versión 26 o superior).
Proyecto SwiftUI ya creado.
Cuenta en Firebase y acceso a la consola.
Conocimientos básicos de Swift y arquitectura MVVM.
Swift Package o CocoaPods Manager configurado.

Una vez listo, pasamos al desarrollo.

Paso 1: configurar Firebase y Firestore

El primer paso en cómo integrar chat en una app SwiftUI con Firebase es conectar tu app con el backend.

Accede a console.firebase.google.com y crea un nuevo proyecto.
Añade una app iOS y descarga el archivo GoogleService-Info.plist.
Arrastra ese archivo al proyecto en Xcode.
Instala Firebase usando Swift Package Manager o CocoaPods:

pod 'FirebaseFirestore'
pod 'FirebaseAuth'
pod 'FirebaseStorage'

Inicializa Firebase en tu App principal:

import SwiftUI
import Firebase

@main
struct ChatApp: App {
    init() {
        FirebaseApp.configure()
    }
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

A partir de aquí, tu app está conectada al backend.

Paso 2: crear los modelos de usuario, mensaje y conversación

Saber cómo integrar chat en una app SwiftUI con Firebase implica estructurar bien los datos.
Trabajaremos con tres entidades principales:

Modelo de usuario

struct User: Identifiable, Codable {
    var id: String
    var name: String
    var email: String
    var avatarURL: String?
}

Modelo de mensaje

struct Message: Identifiable, Codable {
    var id: String
    var senderId: String
    var text: String
    var timestamp: Date
    var imageURL: String?
}

Modelo de conversación

struct Conversation: Identifiable, Codable {
    var id: String
    var participants: [String]
    var lastMessage: String
    var updatedAt: Date
}

Estos modelos representan la base de datos que Firestore almacenará.

Paso 3: conectar la base de datos con tu app

Crear la estructura de Firestore es el siguiente paso para dominar cómo integrar chat en una app SwiftUI con Firebase.

Estructura recomendada:

/users/{userId}
/conversations/{conversationId}/messages/{messageId}

Después, añadimos un ChatService que gestione la conexión:

import FirebaseFirestore
import FirebaseFirestoreSwift

class ChatService {
    private let db = Firestore.firestore()

    func sendMessage(_ message: Message, to conversationId: String) async throws {
        try db.collection("conversations")
            .document(conversationId)
            .collection("messages")
            .document(message.id)
            .setData(from: message)
    }

    func fetchMessages(for conversationId: String) async throws -> [Message] {
        let snapshot = try await db.collection("conversations")
            .document(conversationId)
            .collection("messages")
            .order(by: "timestamp", descending: false)
            .getDocuments()
        return snapshot.documents.compactMap { try? $0.data(as: Message.self) }
    }
}

Cómo integrar chat en una app SwiftUI con Firebase | 6

Paso 4: suscribirse a actualizaciones en tiempo real

Una de las razones para usar Firebase es su capacidad de sincronización instantánea.
Para aprender cómo integrar chat en una app SwiftUI con Firebase, necesitas escuchar los cambios en tiempo real:

func observeMessages(conversationId: String, completion: @escaping ([Message]) -> Void) {
    db.collection("conversations")
        .document(conversationId)
        .collection("messages")
        .order(by: "timestamp")
        .addSnapshotListener { snapshot, error in
            guard let documents = snapshot?.documents else { return }
            let messages = documents.compactMap { try? $0.data(as: Message.self) }
            completion(messages)
        }
}

Cada vez que un usuario envíe o reciba un mensaje, Firestore notificará al listener y SwiftUI actualizará la interfaz automáticamente.

Paso 5: construir la interfaz con SwiftUI

La interfaz es la parte visible de cómo integrar chat en una app SwiftUI con Firebase.
Un diseño típico incluye una lista de mensajes y una barra de envío.

struct ChatView: View {
    @ObservedObject var viewModel: ChatViewModel
    @State private var text = ""

    var body: some View {
        VStack {
            ScrollViewReader { proxy in
                ScrollView {
                    ForEach(viewModel.messages) { message in
                        MessageBubble(message: message,
                                      isCurrentUser: message.senderId == viewModel.currentUserId)
                    }
                }
                .onChange(of: viewModel.messages.count) { _ in
                    if let lastId = viewModel.messages.last?.id {
                        proxy.scrollTo(lastId, anchor: .bottom)
                    }
                }
            }
            HStack {
                TextField("Escribe un mensaje...", text: $text)
                    .textFieldStyle(.roundedBorder)
                Button("Enviar") {
                    Task { await viewModel.send(text) }
                    text = ""
                }
            }
            .padding()
        }
    }
}

Cada mensaje se muestra en una burbuja simple que puedes personalizar con colores, sombras o animaciones.

paso 6: enviar, recibir y almacenar mensajes

Ahora implementamos la lógica de envío, esencial para entender cómo integrar chat en una app SwiftUI con Firebase:

@MainActor
class ChatViewModel: ObservableObject {
    @Published var messages: [Message] = []
    let chatService = ChatService()
    let currentUserId: String
    let conversationId: String

    init(conversationId: String, currentUserId: String) {
        self.conversationId = conversationId
        self.currentUserId = currentUserId
        observeMessages()
    }

    func send(_ text: String) async {
        let message = Message(id: UUID().uuidString,
                              senderId: currentUserId,
                              text: text,
                              timestamp: Date())
        do {
            try await chatService.sendMessage(message, to: conversationId)
        } catch {
            print("Error al enviar: \(error.localizedDescription)")
        }
    }

    private func observeMessages() {
        chatService.observeMessages(conversationId: conversationId) { [weak self] msgs in
            self?.messages = msgs
        }
    }
}

Con este bloque, el chat ya funciona: envía, recibe y sincroniza mensajes al instante.

Cómo integrar chat en una app SwiftUI con Firebase | 7 — Imagen de Apple

paso 7: subir archivos y medios

Para completar cómo integrar chat en una app SwiftUI con Firebase, añadimos soporte de imágenes o archivos.

Firebase Storage gestiona fácilmente este tipo de datos:

import FirebaseStorage

func uploadImage(_ image: UIImage, completion: @escaping (String?) -> Void) {
    let ref = Storage.storage().reference().child("images/\(UUID().uuidString).jpg")
    guard let data = image.jpegData(compressionQuality: 0.8) else {
        completion(nil); return
    }
    ref.putData(data) { _, error in
        if error == nil {
            ref.downloadURL { url, _ in
                completion(url?.absoluteString)
            }
        } else {
            completion(nil)
        }
    }
}

Luego solo hay que incluir la URL en el modelo Message y mostrar la imagen en la interfaz.

Cómo personalizar el diseño del chat

Una parte clave de cómo integrar chat en una app SwiftUI con Firebase es adaptar la interfaz a la identidad visual de la app.

Ideas de personalización:

Colores de burbujas según el remitente.
Avatares para los usuarios.
Animaciones suaves con .transition(.slide) o .spring().
Temas oscuros y claros con el uso de @Environment(\.colorScheme).
Indicadores de escritura (typing indicators) actualizados en Firestore.
Notificaciones push con Firebase Cloud Messaging para mensajes nuevos.

Estos detalles marcan la diferencia entre un chat funcional y una experiencia de conversación pulida.

Errores comunes y cómo evitarlos

No usar índices en Firestore. Si filtras o ordenas colecciones sin definir índices, las consultas fallarán en producción.
Descargar imágenes sin caché. Usa AsyncImage o frameworks de caching.
Listeners duplicados. Asegúrate de cancelar los SnapshotListener cuando el usuario abandone el chat.
Falta de control de permisos. Aplica reglas de seguridad para evitar lectura/escritura no autorizada.
Ignorar rendimiento. Firestore cobra por lectura; optimiza consultas y limita el número de mensajes cargados inicialmente.

Dominar cómo integrar chat en una app SwiftUI con Firebase también implica aprender a evitar estos errores de base.