快速开始

大约 3 分钟

快速开始

利用 ChatroomUIKit,你可以轻松实现聊天室内的用户交互。本文介绍如何实现在聊天室中发送消息。

前提条件

  • Xcode (推荐最新版本)。
  • 安装 iOS 13.0 或更高版本的 iOS 模拟器或 Apple 设备。
  • 已使用 CocoaPods 添加了 ChatroomUIKit 依赖项。
  • 有效的环信即时通讯 IM 开发者账号和 App Key,详见 环信即时通讯云控制台open in new window
  • 如果你的网络环境部署了防火墙,请联系环信技术支持设置白名单。

创建项目

在 Xcode 中创建一个 iOS 平台下的 Appopen in new window。在 Choose options for your new project 对话框中进行以下设置:

  • Product Name:填入 ChatroomUIKitQuickStart
  • Organization Identifier:设置为你的标识符。
  • User Interface:选择 Storyboard
  • Language:选择你常用的开发语言。

操作流程

第一步 初始化 ChatroomUIKit

你可以在应用加载时或使用 ChatroomUIKit 之前对其进行初始化。

初始化时,需传入 App Key。你可以在环信即时通讯云控制台open in new window应用详情页面查看 App Key。

import ChatroomUIKit
    
@UIApplicationMain
class AppDelegateUIResponderUIApplicationDelegate {
     var window:UIWindowfunc application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
         let error = ChatroomUIKitClient.shared.setup(appKey: "Appkey")
     }
}

第二步 登录 ChatroomUIKit

环信控制台open in new window 创建用户,获取用户 ID 和用户 token 登录 ChatroomUIKit。详见 创建用户文档

提示

若你已集成了 IM SDK,SDK 的所有用户 ID 均可用于登录 ChatroomUIKit。

在生产环境中,为了安全考虑,你需要在你的应用服务器集成 获取 App Token API获取用户 Token API 实现获取 Token 的业务逻辑,使你的用户从你的应用服务器获取 Token。

ChatroomUIKitClient.shared.login(userId: "user id", token: "token", completion: <#T##(ChatError?) -> Void#>)

第三步 创建聊天室视图

创建聊天室视图的步骤如下:

  1. 获取聊天室列表,加入指定的聊天室。除此之外,你还可以在环信控制台上创建聊天室,获取聊天室 ID。

  2. 创建聊天室视图 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")       
  1. 将聊天室视图添加到目标区域。

在调用 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 是可用区域、弹幕区域、底部工具栏区域以及键盘弹起后输入框中事件的响应高度。

img

  1. 添加聊天室成员open in new window

第四步 发送第一条消息

点击屏幕下方的 说点什么 按钮唤起键盘,输入消息内容,点击 发送 按钮,发送消息。

img

上图为聊天室 Demo 显示的内容,如果要实现类似的样式,可以点击这里open in new window