Swift

チャットインターフェースの構築

チャットができるようにするには、チャットインターフェイス用の新しいビューを作成する必要があります。Xcodeのメニューから File > New > File....を選択する。 SwiftUIビュー名前を付けてください ChatView.という名前の新しいファイルが作成されます。 ChatView.swiftトップインポート VonageClientSDKChat:

import SwiftUI
import VonageClientSDKChat

次に ChatViewModel.

`ChatViewModel`

について ChatViewModel はハンドルの送信と会話からのイベントの取得を処理します。の一番下にある ChatView.swift ファイルでビュー・モデルを作成します：

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

ビューモデルには会話ID、チャットクライアント、メンバーIDのプロパティがあります。チャットクライアントはログイン画面から渡されるので、すでに認証されています。ビューモデルを CON_ID プレースホルダに、先ほど作成した会話IDを指定します。この VGChatClientDelegate が追加されたが、後の段階で実装される。

UIの作成

骨格ができた ChatViewModel が作成されたら ChatView を持っている。 TextField メッセージ入力用 Button メッセージを送信するためのリストと、メッセージを表示するためのリスト。

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