Swift

Criação da interface de bate-papo

Para poder conversar, você precisará criar uma nova View para a interface de bate-papo. No menu do Xcode, selecione File > New > File.... Escolha um Visualização do SwiftUI, é só dizer ChatView. Isso criará um novo arquivo chamado ChatView.swift, na importação principal VonageClientSDKChat:

import SwiftUI
import VonageClientSDKChat

Em seguida, você criará o ChatViewModel.

ChatViewModel

O ChatViewModel será responsável por gerenciar os eventos de envio e recebimento da conversa. Na parte inferior do ChatView.swift arquivo, crie o modelo de visualização:

@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) {}
}

O modelo de visualização possui propriedades para o ID da conversa, o cliente de chat e o ID do membro. O cliente de chat será passado a partir da tela de login, portanto já estará autenticado. Substitua o CON_ID marcador de posição com o ID da conversa que você criou anteriormente. O VGChatClientDelegate foi adicionado, mas será implementado em uma fase posterior.

Criar interface do usuário

Agora que o esqueleto ChatViewModel for criado, você pode atualizar o ChatView ter um TextField para inserir uma mensagem, um Button para enviar a mensagem e uma lista para exibir as mensagens.

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)
            }
        }
    }
}

Compilar e executar

Execute o projeto novamente (Cmd + R) para abri-lo no simulador. Se você fizer login com um dos usuários, verá a interface de bate-papo

Chat interface