快速开始
快速开始
利用 ChatroomUIKit，你可以轻松实现聊天室内的用户交互。本文介绍如何实现在聊天室中发送消息。
前提条件
- Xcode (推荐最新版本)。
- 安装 iOS 13.0 或更高版本的 iOS 模拟器或 Apple 设备。
- 已使用 CocoaPods 添加了 ChatroomUIKit 依赖项。
- 有效的环信即时通讯 IM 开发者账号和 App Key，详见 环信即时通讯云控制台。
- 如果你的网络环境部署了防火墙，请联系环信技术支持设置白名单。
创建项目
在 Xcode 中创建一个 iOS 平台下的 App。在 Choose options for your new project 对话框中进行以下设置：
- Product Name：填入 ChatroomUIKitQuickStart。
- Organization Identifier：设置为你的标识符。
- User Interface：选择 Storyboard。
- Language：选择你常用的开发语言。
操作流程
第一步 初始化 ChatroomUIKit
你可以在应用加载时或使用 ChatroomUIKit 之前对其进行初始化。
初始化时，需传入 App Key。你可以在环信即时通讯云控制台的应用详情页面查看 App Key。
import ChatroomUIKit
@UIApplicationMain
class AppDelegate：UIResponder，UIApplicationDelegate {
var window：UIWindow？
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
let error = ChatroomUIKitClient.shared.setup(appKey: "Appkey")
}
}
第二步 登录 ChatroomUIKit
使用用户 ID 和用户 Token 登录 ChatroomUIKit。
提示
若你已集成了 IM SDK，SDK 的所有用户 ID 均可用于登录 ChatroomUIKit。
为了方便快速体验，你可以在环信即时通讯云控制台的应用概览 > 用户认证页面创建用户并查看用户 token。用户认证页面中的用户仅用于快速体验或调试目的。
在开发环境中，你需要在环信控制台创建 IM 用户，从你的 App Server 获取用户 token，详见使用环信用户 token 鉴权 。
ChatroomUIKitClient.shared.login(userId: "user id", token: "token", completion: <#T##(ChatError?) -> Void#>)
第三步 创建聊天室视图
创建聊天室视图的步骤如下：
获取聊天室列表，加入指定的聊天室。除此之外，你还可以在环信控制台上创建聊天室，获取聊天室 ID。
创建聊天室视图
ChatroomView，传入的参数包括聊天室 ID、布局参数和聊天室所有者的用户 ID。
提示
- 建议 ChatroomView 的宽度初始化为屏幕的宽度，高度不小于以下算式的值：屏幕高度 x 1/5 + 礼物气泡行高 x 2 + 54（底部工具栏的高度）。
- 对于有刘海屏的机型，ChatroomView 的高度为以上算式的值加上底部安全区域的高度。
let roomView = ChatroomUIKitClient.shared.launchRoomView(roomId: "Chat room ID",frame: CGRect, ownerId: "Chatroom owner ID")
- 将聊天室视图添加到目标区域。
在调用 ChatroomUIKitClient.shared.launchRoomView(roomId: self.roomId, frame: CGRect(x: 0, y: ScreenHeight/2.0, width: ScreenWidth, height: ScreenHeight/2.0), ownerId: "当前聊天室的主播用户ID") 时，记得将 ChatroomView 添加到现有视图之上，以方便拦截和透传点击事件。例如，如果你有一个播放视频流的视图，请添加到视频视图的上方，ChatroomView 实质上是全屏覆盖的，传入的 frame 是可用区域、弹幕区域、底部工具栏区域以及键盘弹起后输入框中事件的响应高度。
第四步 发送第一条消息
点击屏幕下方的 说点什么 按钮唤起键盘，输入消息内容，点击 发送 按钮，发送消息。
上图为聊天室 Demo 显示的内容，如果要实现类似的样式，可以点击这里。