Feedback

iOS(SwiftUI)

本文会引导您集成 TUIKit SwiftUI 成功发送第一条消息。

开发环境要求

Xcode 15 及以上
iOS 15.0 及以上
CocoaPods 1.7.5 及以上

前提条件

开通服务

1. 登录 控制台。如果您已有应用,请记录其 SDKAppIDSDKSecretKey 并直接跳转到下一节。
2. 在概览面板单击创建,开始创建新应用。

3. 在创建应用弹框中填入应用名称,选择产品为 Chat

4. 选择完产品后,会显示出部署区域,请按需选择。

5. 创建完成后,可在控制台概览面板查看新建应用的 SDKAppIDSDKSecretKey,后续运行 Demo 时需要用到这两个信息。

禁止:
请妥善保管 SDKSecretKey,谨防泄露!

创建账号

创建账号的方式主要有 2 种,你可以选择下列任意一种合适的方式。
客户端注册
控制台注册
在下文 登录 TUIKit 中传入一个全新的 UserID 即可,此时 TUIKit 会自动为您注册该 UserID。
步骤如下:
1. 进入 Chat > 账号管理 页面。
2. 点击新建账号,弹出创建账号信息填写框。

3. 如果只是普通成员,选择普通账号即可。我们建议设置昵称。界面上可以通过昵称展示不同用户。

注意:
发消息至少是两个用户之间进行,因此您在此环节至少要创建 2 个账号。请记录下这 2 个账号的 userID,后续步骤会使用到。

生成 UserSig

2. 在签名(UserSig)生成工具区域,选择应用,输入 UserID。单击“生成”即可生成签名,签名有效期默认为180天。单击“复制”即可粘贴保存签名。

说明:
更多 UserSig 相关操作,请参见 UserSig 生成&校验

集成 TUIKit

集成步骤请参考 全功能接入
注意:
1. 如果你新建了一个空 SwiftUI 项目集成 TUIKit SwiftUI,可逐步参考以下步骤实现发送第一条消息。
2. 如果你在已有项目里集成 TUIKit SwiftUI,请保持你的 UI 原代码不变,仅参考下文的登录及消息界面的组装逻辑。

登录 TUIKit

使用 TUIKit SwiftUI 组件里的功能需要调用 LoginStore 的 login API 登录用户账号,分两种情况:
如果你没有事先在控制台创建用户账号,请分别先后调 LoginStore 登录账号 user1 和 user2。最后确保 user1 在线。
如果你事先在控制台创建了 user1 和 user2,仅登录 user1。
说明:
1. 登录 user1 后给 user2 发消息,user2 可以不登录,Chat 默认允许用户和好友、陌生人之间发送单聊消息。
2. 如果你希望 user1 和 user2 能聊天互动,需要用另外一台设备登录 user2 并进入与 user1 的聊天界面。
login 接口定义如下:
// API location: AtomicXCore/LoginStore

/// Login
///
/// - Parameter sdkAppID: SDK application ID.
/// - Parameter userID: User ID.
/// - Parameter userSig: User signature.
/// - Parameter completion: Completion callback.
public func login(sdkAppID: Int32, userID: String, userSig: String, completion: AtomicXCore.CompletionClosure?)
接口调用示例如下:
LoginStore.shared.login(sdkAppID: sdkAppID, userID: userID, userSig: userSig) { result in
switch result {
case .success:
print("Login success, userID: \(userID)")
case .failure(let error):
print("Login failed: \(error.code), \(error.message)")
}
}

加载聊天界面

以 ChatPage 为例,该页面封装了完整的聊天界面,App 启动时在 ContentView 中加载。
注意,如果你直接使用我们的示例代码,需要预填充这几个参数:
sdkAppID,上文获取的 sdkAppID。
senderUserID,发送消息者的 userID(也就是上文的 user1)。
senderUserSig,上文获取到的,发送消息者的 userSig。
receiverUserID,接受消息者的 userID。
示例代码如下:
// ContentView.swift
import SwiftUI

struct ContentView: View {
var body: some View {
// Load ChatPage in ContentView
ChatPage()
}
}

// ChatPage.swift
import AtomicX
import AtomicXCore
import SwiftUI

public struct ChatPage: View {
@StateObject private var themeState = ThemeState.shared
@State private var isLoggedIn = false
@State private var isLoggingIn = true
@State private var loginError: String? = nil

private let sdkAppID: Int32 = 1234567890 // TODO: Fill in the sdkAppID here.
private let senderUserID = "" // TODO: Fill in your userID here, you are the sender.
private let senderUserSig = "" // TODO: Fill in your generated userSig here.
private let receiverUserID = "" // TODO: Fill in the receiver's userID here.

private var conversationID: String {
// C2C conversationID: "c2c_\(userID)", Group conversationID: "group_\(groupID)"
"c2c_\(receiverUserID)"
}

public var body: some View {
Group {
if isLoggedIn {
chatContentView
} else if isLoggingIn {
ProgressView("Logging in...")
} else {
VStack(spacing: 12) {
Image(systemName: "exclamationmark.triangle")
.font(.system(size: 40))
.foregroundColor(.orange)
Text(loginError ?? "Login failed")
.foregroundColor(.secondary)
}
}
}
.environmentObject(themeState)
.onAppear {
login()
}
}

// MARK: - Chat Content

private var chatContentView: some View {
VStack(spacing: 0) {
navigationBarView

Divider()
.background(.gray)

VStack(spacing: 0) {
// Add MessageList to this page.
MessageList(
conversationID: conversationID,
onUserClick: { userID in
print("onUserClick: \(userID)")
}
)
// Add MessageInput to this page.
MessageInput(
conversationID: conversationID
)
}
.ignoresSafeArea(.keyboard)
}
}

// MARK: - Navigation Bar

private var navigationBarView: some View {
HStack {
Image(systemName: "person.circle.fill")
.font(.system(size: 32))
.foregroundColor(.gray)
Text(conversationID)
.font(.system(size: 17, weight: .semibold))
.foregroundColor(themeState.colors.textColorPrimary)
Spacer()
}
.padding(.horizontal, 16)
.frame(height: 44)
}

// MARK: - Login

private func login() {
guard !senderUserSig.isEmpty else {
isLoggingIn = false
loginError = "userSig is empty. Please fill in a valid userSig."
return
}
// Login is required when ChatPage appears.
LoginStore.shared.login(sdkAppID: sdkAppID, userID: senderUserID, userSig: senderUserSig) { result in
switch result {
case .success:
print("Login success, userID: \(senderUserID)")
isLoggedIn = true
isLoggingIn = false
case .failure(let error):
print("Login failed: \(error.code), \(error.message)")
loginError = "Login failed: \(error.code), \(error.message)"
isLoggingIn = false
}
}
}
}


发送第一条消息

操作完上述步骤,启动 App 后会自动登录并加载 ChatPage。手动单击输入框,发送您的第一条消息:


联系我们

如果您在接入或使用过程有任何疑问或者建议,欢迎 联系我们 提交反馈。