Swift

Construire l'interface de chat

Pour pouvoir discuter, vous devez créer une nouvelle vue pour l'interface de discussion. Dans le menu Xcode, sélectionnez File > New > File.... Choisir un Vue SwiftUINommez-le ChatView. Cela créera un nouveau fichier appelé ChatView.swift, à l'importation supérieure VonageClientSDKChat:

import SwiftUI
import VonageClientSDKChat

Ensuite, vous allez créer le fichier ChatViewModel.

`ChatViewModel`

Les ChatViewModel s'occupera de l'envoi et de la récupération des événements de la conversation. Au bas de la page ChatView.swift créer le modèle de vue :

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

Le modèle de vue possède des propriétés pour l'identifiant de la conversation, le client de chat et l'identifiant du membre. Le client de chat sera transmis à partir de l'écran de connexion, il sera donc déjà authentifié. Remplacez la propriété CON_ID avec l'identifiant de conversation que vous avez créé précédemment. Le VGChatClientDelegate est ajoutée mais sera mise en œuvre ultérieurement.

Créer une interface utilisateur

Maintenant que le squelette ChatViewModel est créé, vous pouvez mettre à jour le ChatView d'avoir une TextField pour saisir un message, un Button pour l'envoi du message et une liste pour l'affichage des messages.

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

Construire et faire fonctionner

Exécutez à nouveau le projet (Cmd + R) pour le lancer dans le simulateur. Si vous vous connectez avec l'un des utilisateurs, vous verrez l'interface de chat