Swift

VGChatClient

チャットを開始する前に、Client SDKはVonageサーバーに認証する必要があります。以下の追加が必要です。 ContentView.swift.

ファイルの先頭で VonageClientSDKChat:

import SwiftUI
import VonageClientSDKChat

という名前の新しいクラスをファイルの一番下に作成する。 LoginViewModel:

@MainActor
final class LoginViewModel: ObservableObject {
    @Published var error = ""
    @Published var isError = false
    @Published var isLoggedIn = false
    
    private let aliceJwt = "ALICE_JWT"
    private let bobJwt = "BOB_JWT"
    
    let client = VGChatClient()
    
    func login(_ username: String) async {
        do {
            let jwt = username == "Alice" ? aliceJwt : bobJwt
            try await client.createSession(jwt)
            isLoggedIn = true
        } catch {
            self.error = error.localizedDescription
            self.isError = true
        }
    }
}

このクラスは VGChatClient で、JWTを使ってセッションを作成する。置き換える ALICE_JWT そして BOB_JWT を、先ほど作成したJWTで置き換える。

ボタン操作

ログインボタンを機能させるには、タップされたときに関数を実行するアクションを追加する必要があります。ビューのコードを更新して LoginViewModel オブジェクトを呼び出し login 関数である:

struct ContentView: View {
    @StateObject private var loginModel = LoginViewModel()
    
    var body: some View {
        NavigationStack {
            VStack {
                Button("Login as Alice") {
                    Task {
                        await loginModel.login("Alice")
                    }
                }.buttonStyle(.bordered)
                Button("Login as Bob") {
                    Task {
                        await loginModel.login("Bob")
                    }
                }.buttonStyle(.bordered)
            }
            .padding()
            .navigationDestination(isPresented: $loginModel.isLoggedIn) {
                let chatViewModel = ChatViewModel(client: loginModel.client)
                ChatView(chatViewModel: chatViewModel)
            }
        }.alert(isPresented: $loginModel.isError) {
            Alert(title: Text(loginModel.error))
        }
    }
}

セッション作成時にエラーが発生した場合は Alert というエラーメッセージが表示されます。また navigationDestination デスティネーションは、セッションの作成に成功した場合にチャット画面を開きます。次のステップで作成します。