本地收发消息实践，谁有好的方案？

本地收发消息实践

HarmonyOS

踮脚在树梢上

2024-06-11 20:36:00

浏览

回答 1

按赞同

按时间

NGKSWCIDT

1.功能介绍

通讯录

联系人列表以及头像
应用使用用户（admin）可以点击联系人列表任意一位联系人发起会话，发送消息
发送消息后消息页面会新建会话

消息

展示所有使用用户（admin）发起的会话
消息如果未读，会展示未读条数角标，点击此会话后未读角标消失
会话支持滑动后点击删除

通知

使用用户（admin）发起会话后会有横幅通知

2.相关概念及实现细节

布局

Demo中使用的布局

线性布局（Row/Column）
弹性布局（Flex）
创建列表（List）

通讯录布局组件层级树

消息页面布局组件层级树

声明式UI（ArkTS以声明方式组合和扩展组件来描述应用程序的UI，同时还提供了基本的属性、事件和子组件配置方法。）

Demo中具体使用声明方式来组合和扩展组件

联系人头像和联系人姓名
单条消息头像以及消息内容
底部图标与文字等

// 示例 
Column() { 
  Image('') 
  Text('姓名') 
} 
Row() { 
  Image('') 
  Text('消息') 
}1.
2.
3.
4.
5.
6.
7.
8.
9.

未读消息角标

Badge({ 
  count: this.sessionItem.unReadMsg, 
  position: BadgePosition.RightTop, 
  style: { badgeSize: 18, badgeColor: '#FA2A2D' } 
}) { 
  Image($rawfile(this.sessionItem.headImg)) 
    .width('100%') 
    .height('100%') 
    .borderRadius(5) 
    .width('70%') 
    .height('70%') 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

应用组件及其生命周期

应用组件及其生命周期

UIAbility组件生命周期

Demo在UIAbility的onCreate的回调中初始化了消息以及会话的数据库：

import UIAbility from '@ohos.app.ability.UIAbility'; 
import Window from '@ohos.window'; 
export default class EntryAbility extends UIAbility { 
  onCreate(want, launchParam) { 
    // 应用初始化 
    // 初始化数据库 
  } 
  // ... 
}1.
2.
3.
4.
5.
6.
7.
8.
9.

自定义组件生命周期

Demo在会话组件中的aboutToAppear中获取了数据库的会话数据：

aboutToAppear(){ 
  this.getSession(); 
}1.
2.
3.

组件状态管理

@State装饰器：组件内状态

Demo中选项卡点击后下标的改变：

@Entry 
@Component 
struct Index { 
  @State index: number = 0 
}1.
2.
3.
4.
5.

@Prop装饰器：父子单向同步

@Link装饰器：父子双向同步

Demo中消息详情与底部输入框组件（发送消息后消息页面要及时感知刷新列表）:

@Entry 
@Component 
struct Message { 
  @State msgItems: MessageData[] = [] // 聊天记录 
} 
@Component 
export struct MessageBottom { 
  @Link msgItems: MessageData[]; 
}1.
2.
3.
4.
5.
6.
7.
8.
9.

1. 通知

Demo中admin发送后基础通知的发布

基础类型通知主要应用于发送短信息、提示信息、广告推送等，支持普通文本类型、长文本类型、多行文本类型和图片类型。

import NotificationManager from '@ohos.notificationManager'; 
let notificationRequest = {} 
NotificationManager.publish(notificationRequest, (err) => {}）1.
2.
3.

2. 为通知行为添加意图

WantAgent提供了封装行为意图的能力，通过构建WantAgent在用户点击通知后完成WantAgent中的意图行为。

页面路由

Router模块，通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。

Demo中用户从会话列表点击对应的会话跳转到具体的消息详情页面

import router from '@ohos.router'; 
router.pushUrl({url:'page/message',param{xx:xx}}）1.
2.

线程模型

使用Emitter进行线程间通信

§ 在新消息发送后，需要主会话页面更新最近的会话列表内容

会话主界面等待接受消息发送事件，并在callback中获取最新的会话列表

let receivedListener: InnerEvent.InnerEvent = { 
  eventId: 1 
} 
let callback = (eventData) => { 
  console.info("message event callback") 
  this.getSession(); 
}; 
emitter.on(receivedListener, callback);1.
2.
3.
4.
5.
6.
7.
8.

消息详情页面发送消息成功后，发布新增消息事件

sendNewMessageEvent() { 
  let event = { 
    eventId: 1, 
    priority: emitter.EventPriority.IMMEDIATE 
  }; 
  let eventData = { 
    data: { 
      "content": this.inputValue, 
      "id": 1, 
      "isEmpty": false, 
    } 
  }; 
  emitter.emit(event, eventData);1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

1. 数据库

通过关系型数据库实现数据持久化

import relationalStore from '@ohos.data.relationalStore'; // 导入模块 
// 新增消息 
async addMessage(context: Context, message: MessageData): Promise<number> { 
  const STORE_CONFIG = { 
    name: 'xChat.db', 
    securityLevel: relationalStore.SecurityLevel.S1 // 数据库安全级别 
  }; 
  let store = await relationalStore.getRdbStore(context, STORE_CONFIG); 
  const valueBucket = { 
    'mid': this.guid(), 
    'wid': message.wid, 
    'io': message.io, 
    'context': message.context, 
    'type': 'text', 
    'time': Date.now(), 
  }; 
  return await store.insert('messages', valueBucket) 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

2024-06-12 17:36:29

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

本地收发消息实践，谁有好的方案？

订阅鸿蒙技术特刊，精选内容抢先看