XuqmGroup-HarmonySDK/entry/src/main/ets/pages/Index.ets
XuqmGroup d7f156f160 feat(chat): 添加聊天界面和文件更新SDK功能
- 实现完整的聊天界面UI组件,支持文本、图片、视频、音频、文件等多种消息类型
- 集成IM消息收发功能,实现消息气泡显示和用户头像占位符
- 添加媒体文件选择和拍摄功能,支持相册图片、视频及相机拍照录像
- 实现语音录制和播放功能,包含按住说话交互和权限处理
- 添加群组提及功能,支持@用户和提及候选列表显示
- 实现消息回复和引用功能,支持消息长按回复操作
- 添加本地消息搜索功能,支持搜索当前会话的历史消息
- 实现文件上传下载功能,集成FileSDK进行文件传输管理
- 添加应用更新检查功能,集成UpdateSDK支持版本更新
- 实现消息状态显示,包括发送、送达、已读等状态标识
- 添加群组已读人数统计,显示消息在群聊中的阅读情况
- 实现草稿保存和恢复功能,支持断点续聊体验
- 添加连接状态横幅,实时显示IM服务连接状态
- 实现滚动加载更多历史消息,优化大量消息的性能表现
- 添加多媒体文件下载保存功能,支持保存到应用专属目录
2026-04-28 20:11:37 +08:00

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)
}
}