Swift

Construir la interfaz de chat

Para poder chatear, tendrás que crear una nueva Vista para la interfaz de chat. En el menú de Xcode, seleccione File > New > File.... Elige un Vista SwiftUINombre ChatView. Esto creará un nuevo archivo llamado ChatView.swiften la parte superior importar VonageClientSDKChat:

import SwiftUI
import VonageClientSDKChat

A continuación, creará el ChatViewModel.

ChatViewModel

El ChatViewModel se encargará de enviar y recuperar eventos de la conversación. En la parte inferior del ChatView.swift archivo, crea el modelo de vista:

@MainActor
final class ChatViewModel: NSObject, ObservableObject {
    private let conversationID = "CON_ID"
    
    private var client: VGChatClient
    private var memberID: String?
    
    @Published var events: [VGPersistentConversationEvent] = []
    
    init(client: VGChatClient) {
        self.client = client
        super.init()
        client.delegate = self
    }   
}

extension ChatViewModel: VGChatClientDelegate {
    nonisolated func chatClient(_ client: VGChatClient, didReceiveConversationEvent event: VGConversationEvent) {}
    
    nonisolated func client(_ client: VGBaseClient, didReceiveSessionErrorWith reason: VGSessionErrorReason) {}
}

El modelo de vista tiene propiedades para el ID de la conversación, el cliente de chat y el ID de miembro. El cliente de chat se pasará desde la pantalla de inicio de sesión, por lo que ya estará autenticado. Sustituye el CON_ID con el ID de conversación que creó anteriormente. La dirección VGChatClientDelegate Se ha añadido, pero se implementará en una fase posterior.

Crear IU

Ahora que el esqueleto ChatViewModel una vez creada, puedes actualizar la ChatView tener un TextField para introducir un mensaje, un Button para enviar el mensaje y una lista para mostrar los mensajes.

struct ChatView: View {
    @StateObject var chatViewModel: ChatViewModel
    @State private var message: String = ""
    
    var body: some View {
        VStack {
            VStack {
                List {
                    ForEach(chatViewModel.events, id: \.id) { event in
                        switch event.kind {
                        default:
                            EmptyView()
                        }
                    }.listRowSeparator(.hidden)
                }.listStyle(.plain)
                
                Spacer()
                
                HStack {
                    TextField("Message", text: $message)
                    Button("Send") {
                        Task {
                            
                        }
                    }.buttonStyle(.bordered)
                }.padding(8)
            }
        }
    }
}

Construir y ejecutar

Vuelve a ejecutar el proyecto (Cmd + R) para iniciarlo en el simulador. Si te conectas con uno de los usuarios verás la interfaz de chat

Chat interface