Creare una Chat Realtime con WebSockets, Laravel Reverb e SwiftUI: Stato Messaggi e Spunte Blu

Architettura di una Chat Realtime Moderna

Una chat professionale stile Telegram o WhatsApp richiede tre componenti essenziali:

1. Server WebSocket ad alte prestazioni: Gestito in modo nativo con Laravel Reverb o Node.js Socket.io, capace di gestire 50.000+ connessioni simultanee con latenza sub-10ms.
2. Stato dei Messaggi a 3 Livelli: Inviato (1 spunta grigia) -> Consegnato sul dispositivo (2 spunte grigie) -> Letto dall'utente (2 spunte blu).
3. Client SwiftUI Reattivo: Utilizzo di @Observable e stream asincroni per aggiornare la UI istantaneamente a 60fps.

Codice Client: SwiftUI WebSocket Chat Engine

import SwiftUI

enum MessageStatus: String, Codable {
    case sending = "clock"
    case sent = "checkmark"
    case delivered = "checkmark.double"
    case read = "checkmark.double.fill"
}

struct ChatMessage: Identifiable, Codable {
    let id: UUID
    let senderId: String
    let text: String
    let timestamp: Date
    var status: MessageStatus
}

@Observable
final class RealtimeChatViewModel {
    var messages: [ChatMessage] = []
    var isTyping: Bool = false
    private var webSocketTask: URLSessionWebSocketTask?
    
    func connect(roomId: String, authToken: String) {
        let url = URL(string: "wss://chat.diallodev.online/app/reverb?room=\(roomId)&token=\(authToken)")!
        let session = URLSession(configuration: .default)
        webSocketTask = session.webSocketTask(with: url)
        webSocketTask?.resume()
        
        listenForMessages()
    }
    
    func sendMessage(text: String) {
        let newMsg = ChatMessage(
            id: UUID(),
            senderId: "currentUser",
            text: text,
            timestamp: Date(),
            status: .sending
        )
        messages.append(newMsg)
        
        let payload: [String: Any] = [
            "event": "client-message",
            "data": ["id": newMsg.id.uuidString, "text": text]
        ]
        
        if let data = try? JSONSerialization.data(withJSONObject: payload),
           let jsonString = String(data: data, encoding: .utf8) {
            webSocketTask?.send(.string(jsonString)) { [weak self] error in
                if error == nil {
                    DispatchQueue.main.async {
                        if let idx = self?.messages.firstIndex(where: { $0.id == newMsg.id }) {
                            self?.messages[idx].status = .sent
                        }
                    }
                }
            }
        }
    }
    
    private func listenForMessages() {
        webSocketTask?.receive { [weak self] result in
            switch result {
            case .success(let message):
                switch message {
                case .string(let text):
                    self?.handleIncomingJSON(text)
                case .data(let data):
                    break
                @unknown default:
                    break
                }
                self?.listenForMessages()
            case .failure(let error):
                print("WebSocket disconnesso: \(error.localizedDescription)")
            }
        }
    }
    
    private func handleIncomingJSON(_ jsonString: String) {
        // Parsing evento nuovo messaggio o spunta lettura
    }
}

Diallo Yunus

Indie iOS & macOS Developer, Fondatore di DialloDev e autore di 11+ app pubblicate su Apple App Store. Aiuto startup, creator e aziende a costruire prodotti digitali di successo.