- 实现完整的聊天界面UI组件,支持文本、图片、视频、音频、文件等多种消息类型 - 集成IM消息收发功能,实现消息气泡显示和用户头像占位符 - 添加媒体文件选择和拍摄功能,支持相册图片、视频及相机拍照录像 - 实现语音录制和播放功能,包含按住说话交互和权限处理 - 添加群组提及功能,支持@用户和提及候选列表显示 - 实现消息回复和引用功能,支持消息长按回复操作 - 添加本地消息搜索功能,支持搜索当前会话的历史消息 - 实现文件上传下载功能,集成FileSDK进行文件传输管理 - 添加应用更新检查功能,集成UpdateSDK支持版本更新 - 实现消息状态显示,包括发送、送达、已读等状态标识 - 添加群组已读人数统计,显示消息在群聊中的阅读情况 - 实现草稿保存和恢复功能,支持断点续聊体验 - 添加连接状态横幅,实时显示IM服务连接状态 - 实现滚动加载更多历史消息,优化大量消息的性能表现 - 添加多媒体文件下载保存功能,支持保存到应用专属目录
136 行
3.7 KiB
Plaintext
136 行
3.7 KiB
Plaintext
import { XuqmSDK, ImMessage } from '@xuqm/harmony-sdk'
|
|
import type { ImEventDelegate } from '@xuqm/harmony-sdk'
|
|
import promptAction from '@ohos.promptAction'
|
|
|
|
class DemoImDelegate implements ImEventDelegate {
|
|
private readonly onConnectedAction: () => void
|
|
private readonly onDisconnectedAction: (code: number, reason: string) => void
|
|
private readonly onMessageAction: (msg: ImMessage) => void
|
|
private readonly onErrorAction: (message: string) => void
|
|
|
|
constructor(
|
|
onConnectedAction: () => void,
|
|
onDisconnectedAction: (code: number, reason: string) => void,
|
|
onMessageAction: (msg: ImMessage) => void,
|
|
onErrorAction: (message: string) => void,
|
|
) {
|
|
this.onConnectedAction = onConnectedAction
|
|
this.onDisconnectedAction = onDisconnectedAction
|
|
this.onMessageAction = onMessageAction
|
|
this.onErrorAction = onErrorAction
|
|
}
|
|
|
|
onConnected(): void {
|
|
this.onConnectedAction()
|
|
}
|
|
|
|
onDisconnected(code: number, reason: string): void {
|
|
this.onDisconnectedAction(code, reason)
|
|
}
|
|
|
|
onMessage(msg: ImMessage): void {
|
|
this.onMessageAction(msg)
|
|
}
|
|
|
|
onError(message: string): void {
|
|
this.onErrorAction(message)
|
|
}
|
|
}
|
|
|
|
@Entry
|
|
@Component
|
|
struct Index {
|
|
@State messages: ImMessage[] = []
|
|
@State inputText: string = ''
|
|
@State connected: boolean = false
|
|
private toUserId: string = 'user_002'
|
|
|
|
aboutToAppear(): void {
|
|
const im = XuqmSDK.im
|
|
const delegate = new DemoImDelegate(
|
|
() => {
|
|
this.connected = true
|
|
promptAction.showToast({ message: 'IM 已连接' })
|
|
},
|
|
(code: number, reason: string) => {
|
|
this.connected = false
|
|
console.log('IM disconnected: ' + code + ' ' + reason)
|
|
},
|
|
(msg: ImMessage) => {
|
|
this.messages = [...this.messages, msg]
|
|
},
|
|
(err: string) => {
|
|
promptAction.showToast({ message: 'IM 错误: ' + err })
|
|
},
|
|
)
|
|
im.delegate = delegate
|
|
im.connect()
|
|
}
|
|
|
|
aboutToDisappear(): void {
|
|
XuqmSDK.im.disconnect()
|
|
}
|
|
|
|
build() {
|
|
Column({ space: 12 }) {
|
|
Row() {
|
|
Text('XuqmSDK 示例')
|
|
.fontSize(20)
|
|
.fontWeight(FontWeight.Bold)
|
|
Blank()
|
|
Text(this.connected ? '● 已连接' : '○ 未连接')
|
|
.fontSize(14)
|
|
.fontColor(this.connected ? Color.Green : Color.Gray)
|
|
}
|
|
.width('100%')
|
|
.padding({ left: 16, right: 16, top: 16 })
|
|
|
|
List({ space: 8 }) {
|
|
ForEach(this.messages, (msg: ImMessage) => {
|
|
ListItem() {
|
|
Column({ space: 4 }) {
|
|
Text(msg.fromId).fontSize(12).fontColor(Color.Gray)
|
|
Text(msg.content).fontSize(15)
|
|
}
|
|
.alignItems(HorizontalAlign.Start)
|
|
.width('100%')
|
|
.padding(10)
|
|
.backgroundColor('#F5F5F5')
|
|
.borderRadius(8)
|
|
}
|
|
})
|
|
}
|
|
.layoutWeight(1)
|
|
.width('100%')
|
|
.padding({ left: 16, right: 16 })
|
|
|
|
Row({ space: 8 }) {
|
|
TextInput({ placeholder: '输入消息...', text: this.inputText })
|
|
.layoutWeight(1)
|
|
.onChange((val) => { this.inputText = val })
|
|
|
|
Button('发送')
|
|
.onClick(() => {
|
|
if (!this.inputText.trim()) return
|
|
try {
|
|
XuqmSDK.im.send({
|
|
toId: this.toUserId,
|
|
chatType: 'SINGLE',
|
|
msgType: 'TEXT',
|
|
content: this.inputText.trim(),
|
|
})
|
|
this.inputText = ''
|
|
} catch (e) {
|
|
promptAction.showToast({ message: (e as Error).message })
|
|
}
|
|
})
|
|
}
|
|
.width('100%')
|
|
.padding({ left: 16, right: 16, bottom: 16 })
|
|
}
|
|
.width('100%')
|
|
.height('100%')
|
|
.backgroundColor(Color.White)
|
|
}
|
|
}
|