ESFramework Demo －－ 入门Demo鸿蒙版（Harmony）
随着搭配原生鸿蒙（Harmony）系统的电脑和手机越来越普及，ESFramework 通信框架 也推出了原生鸿蒙客户端，鸿蒙端可与现有的 Windows、Linux、Android、iOS、Web 端互通！
现在，我们来实现了 ESFramework 入门Demo 的鸿蒙手机版本。如果您之前已经使用过ESFramework，或者已经阅读过 ESFramework 开发手册 -- Harmony（鸿蒙）版 ，那么本文所实现的Demo鸿蒙版就很容易理解了。
一. 开发环境
开发工具：DevEco Studio 5.1
开发语言：ArkTS
测试手机：华为 Mate 70
二. Demo 实现的功能
本文ESFramework的鸿蒙版Demo演示了以下功能：
（1）客户端用户上下线时，通知其他在线用户。
（2）当客户端与服务端网络断开时，进行自动重连，当网络恢复后，重连成功。
（3）所有在线用户之间可以进行文字聊天。
（4）文件传送。
（5）消息同步调用。
（6）重登陆模式。当同名的用户登陆时，会把前面的用户挤掉。
下面是该Demo运行的效果演示视频：
文末有该Demo鸿蒙端实现的源码，下载源码后，对照着这篇文章看，会更容易理解。
三. Harmony鸿蒙客户端实现说明
源码解压后，在DevEco Studio中打开Demo项目，其结构如下所示：
1. 文件目录结构
2.定义信息类型
在本demo中，我们定义5个信息类型，分别表示文字聊天消息（直接发送给对方），文字聊天消息（由服务端转发），图片消息、撤回消息，以及客户端同步调用服务端。其定义如下:
enum InformationTypes{ /// 文字(表情)聊天信息 TextChat = 0, /// 文字(表情)聊天信息 (由服务端转发给消息接收方) TextChat4Transit = 1, /// 图片聊天信息 ImageChat = 2, /// 收到消息发送者 撤回消息请求 RecallMsg = 3, /// 客户端异步调用服务端 ClientSyncCallServer = 4, }
3.实现自定义信息处理器
客户端的utils里的customizeHandler实现了ICustomizeHandler接口，其主要实现HandleInformation方法，来处理收到的聊天信息。
handleInformation(sourceUserID: string, informationType: number, info: number[]): void{ ...... }
4.index.ets 登录页
登录页的样式如图所示:
输入ip、账号、密码后，点击登录，输入的数据会用于初始化RapidPassiveEngine以登录。代码如下:
//通过@Provide标记engine并定义，可以将engine与后代组件双向同步 @Provide('engine') engine:RapidPassiveEngine|null = null //通过@State将数据设置为响应式的数据 @State ip:string = '192.168.0.244' @State userId:string = '101' @State pwd:string = '12' //点击登录按钮 Button('登录',{ type: ButtonType.Normal }).onClick(()=>{ //新建一个ESFramework引擎 this.engine = new RapidPassiveEngine() //通过initialize方法，将登录的ip账号密码传进ESFramework this.engine.initialize(this.userId, this.pwd ,this.ip, 4530,customizeHandlers,(res)=>{ ...... }) })
5.home.ets 好友/功能页
好友页里实现了好友列表的展示，收到消息后会将消息展示在好友名下方,好友页样式图如下:
当用户登录成功后，便可以从服务器获取所有在线联系人，然后客户端只需要处理这些信息即可渲染页面，处理信息代码如下:
//创建一个User接口 export interface User{ username:string, headImg:string, clientType:ClientType } //在线用户列表 @State userList:Array<User> = [] //登录的时候，直接通过新建的引擎获取服务器里所有的在线成员,res为所有在线成员数组 this.engine.ContactsOutter.getAllOnlineContacts((res:Array<string>)=>{ //在这里添加用户列表 ...... }) //监听联系人上线事件 this.engine.ContactsOutter.event["ContactsDeviceConnected"] =()=>{ //如果有联系人上线，将会进入这个函数 ...... }
用户列表渲染主要代码如下:
Column() { //使用List来渲染用户列表 List() { //通过foreach获取到每一个用户的信息 ForEach(this.userList, (item:User) => { ListItem() { Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center}){ Image(item.headImg)
Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.SpaceBetween}){ Text(`${item.username}`) } } } }) } }
6. chat.ets 聊天页
当有联系人向我发送消息，消息各项信息会进入已经实现的customizeHandler里的handleInformation里，客户端处理这些信息即可渲染画面，聊天页的样式如图所示:
处理相关代码如下:
//在utils.ets文件里的customizeHandler类里,需要设置信息处理回调函数,外部才能通过传一个callback获取到收到消息的信息 private handleInformationCallback ?: Function; //设置信息处理回调函数 setHandleInformationCallback(callback : Function) : void { this.handleInformationCallback = callback; } //处理来自其他用户的信息(包括大数据块信息) handleInformation(sourceUserID: string, informationType: number, info: number[]): void { if (this.handleInformationCallback) { //将收到的信息传递到信息处理回调函数里 this.handleInformationCallback(sourceUserID, informationType,util.getStr(info)) } } //在index.ets里 //设置聊天记录字典，键为用户id,值为聊天记录数组对象,message为聊天记录数据接口。 OrayDic为ESFramework内置的设置字典的方法 @Provide('userMessages') userMessages: OrayDic<string, Array<Message>> = new OrayDic(); //获取自定义消息处理器 const customizeHandlers = new customizeHandler() //设置消息的监听 customizeHandlers.setHandleInformationCallback((sendID:string,informationType:number,chatInfo:string)=>{ //收到的文字图片信息都会进入这里，在这里处理聊天记录 ...... })
聊天记录主要渲染代码如下：
Column(){ //通过List渲染聊天记录 List(){ //通过ForEach来获取每一个聊天信息 ForEach(this.currentUserMessages,(item:Message)=>{ ListItem(){ Column(){ //文字信息 if(item.informationType == InformationTypes.TextChat || item.informationType == InformationTypes.TextChat4Transit){ //对方普通文字消息 if(item.SpeakerID == this.user?.username){ ...... } //我方普通文字信息 else{ ...... } //图片信息 if(item.informationType == InformationTypes.ImageChat) { //对方图片信息 if(item.SpeakerID == this.user?.username) { ...... } //我方图片消息 else{ ...... } //文件信息 if(item.informationType == InformationTypes.File){ //对方文件消息 if(item.SpeakerID == this.user?.username){ ...... } //我方文件信息 else{ ...... } //撤回信息 // if(item.informationType === InformationTypes.RecallMsg) if(item.informationType == InformationTypes.RecallMsg) { //对方撤回消息 if(item.SpeakerID == this.user?.username){ ...... } //我方撤回信息 else{ ...... } } } }) } }
Demo鸿蒙客户端的主要功能代码就是上面这些，代码有较详细的注释，所以，这里就不进一步说明了。
四.服务端说明
为了方便测试，压缩包中，提供了可以直接运行的该Demo的 Windows 服务端和 Windows 客户端程序，服务端运行起来后，界面如下所示：
该Demo 不仅鸿蒙客户端之间可以相互通信，鸿蒙客户端和Windows客户端之间也可以相互通信的。
五.源码下载
Demo 源码：ESFramework-Harmony-Demo.rar
如果还需要其他系统的服务端和客户端程序的源码，可以到这里下载：ESFramework 入门Demo 。
-----------------------------------------------------------------------------------------------------------------------------------------------
Q Q：168757008
