前端 如何实现跨设备的双向连接? Labo 涂鸦鸿蒙亲子版分布式开发技术分享

yuanguanhua(智能互联) · 2021年07月02日 · 8 次阅读

近期,首届 HarmonyOS 开发者创新大赛正式落下帷幕。大赛共历时 5 个月,超过 3000 支队伍的 10000 多名选手参赛,25000 多位开发者参与了大赛学习,最终 23 支参赛队伍斩获奖项,产出了多款有创新、有创意、有价值的优秀作品。其中由 “Labo Lado 儿童艺术创想” 团队打造的《Labo 涂鸦鸿蒙亲子版》就是其中之一,其创造性地通过 HarmonyOS 分布式技术,实现了多设备下的亲子互动涂鸦功能,最终摘得大赛一等奖。

在很早以前,“Labo Lado 儿童艺术创想” 团队就做过一款涂鸦游戏的应用,该应用可以让孩子和父母在一个平板或者手机上进行绘画比赛,比赛的方式就是屏幕一分为二,两人各在设备的一边进行涂鸦。这种方式虽然有趣,但是对于绘画而言,屏幕尺寸限制了用户的发挥和操作。因此团队希望这类玩法能通过多个设备完成,于是他们研究了 ZeroConf、iOS 的 Multipeer Connectivity、Google Nearby 等近距离互联的技术, 结果发现这些技术在设备发现和应用拉起方面实现的都不理想,尤其是当目标用户是儿童的情况下,操作起来不够简便也不易上手。

HarmonyOS 的出现给团队带来了希望。他们发现 HarmonyOS 的分布式技术有着很大的应用潜力,这项技术让设备的发现和应用拉起变的非常的简单自然,互联的过程也很流畅,很好地解决了单机操作的限制,让跨设备联机功能能够非常容易地实现。此外,HarmonyOS 的开发也给团队留下了很深刻的印象,以往繁琐的开发步骤,在 HarmonyOS 中仅需几个配置、几行代码即可完成,无需花费太多精力。在《Labo 涂鸦鸿蒙亲子版》里面的 5 个分布式玩法的开发只用了团队一名开发者不到两个月的时间,其中还包括了学习上手、解决文档不全和各种疑难问题的过程。

以下是 “Labo Lado 儿童艺术创想” 团队基于 HarmonyOS 的分布式开发关键技术的简单分享:

一、分布式技术实践

HarmonyOS 的分布式能力是在系统层面实现的,在设备双方同属一个局域网的情况下,设备都可以快速的发现和进行流畅的通讯。下面将从 HarmonyOS 设备的发现、应用的拉起、应用通讯和双向通讯几个部分来进行分享。

1、设备的发现

假设设备 A 想要邀请另外一个设备 B 加入,AB 任何一方都无需启动特别的广播服务,只要发起方设备 A 在应用内调用设备发现代码,就可以列出附近符合条件可用的的设备。

以下是获取设备列表的示例代码:

public static List getRemoteDevice() {

List deviceInfoList = DeviceManager.getDeviceList(DeviceInfo.FLAG_GET_ONLINE_DEVICE);

return deviceInfoList;

}

列出设备之后,用户就可以通过设备名选择想要邀请的设备了。

(左侧设备 A 发现右侧名为 “ye” 的设备 B 的界面展示)

2、应用的拉起

设备 A 邀请了设备 B 之后,如果设备 B 上应用没启动,设备 A 可直接通过调用 startAbility 方法来拉起设备 B 上的应用。双方应用都启动了之后,就可以进行 RPC 通讯了。如果需要事先检查设备 B 上的应用是否已经启动或者是否在后台,可通过在应用中增加一个 PA 来实现。在拉起之前,设备 A 先连接设备 B 的应用中的 PA 可以实现更复杂精准的远程应用启动控制。

3、应用通讯

在应用中启动一个 PA,专门用作通讯的服务器端。当设备 B 的应用被拉起之后,设备 A 就会通过 connectAbility 与设备 B 的 PA 进行连接,通讯采用 RPC 方式实现,并使用 IDL 定义通讯接口。

4、双向通讯

RPC 的通讯方式使用简单,但是只能支持单向通讯。为了实现双向通讯,可在设备 A 与设备 B 发起建立连接成功之后,再让设备 B 与设备 A 发起建立一个连接,用两个连接实现了双向通讯。下面是这两个连接建立过程的示意时序图:

在设备 A 与设备 B 建立连接的时候,设备 A 必须将自己的 DeviceId 发送给设备 B,然后设备 B 才可以主动发起一个与设备 A 的连接,获取当前设备的 DeviceId 方法如下:

KvManagerFactory.getInstance().createKvManager(new KvManagerConfig(this)).getLocalDeviceInfo().getId()

应用中,FA 主要实现了界面层逻辑,PA 部分用做数据通讯的服务端。为了防止拉起应用导致用户当前面的操作被中断,可通过 PA 来查询当前 FA 的状态,如果 FA 已经启动了,就跳过拉起,直接进行下一步操作即可。

二、数据接口与数据结构定义

使用了 IDL 定义了两个通用的接口,分别用来进行异步和同步调用:

int sendSyncCommand([in] int command, [in] String params);

void sendAsyncCommand([in] int command, [in] String params, [in] byte[] content);

大部分情况下,远程调用大部分都通过同步的方式进行,用户之间的绘画数据通过异步接口传输,数据在用户绘制的时候采集,每 50ms 左右发送一次,这个频率可以大概保证用户视觉上没有卡顿,而又不至于因为接口过度调用导致卡顿或者耗电量过大。采集的绘画数据的数据结构大致如下:

enum action //动作,表示落笔、移动、提笔等动作

int tagId //多点触摸识别标记

int x //x 坐标

int y //y 坐标

enum brushType //笔刷类型

int brushSize //笔刷大小

enum brushColor //笔刷颜色

int layer //图层

这款应用是支持多点触摸的,所以每个触摸点在落笔的的时候,都使用了 tagId 进行标记。这些数据除了通讯外,还会完整地保存在文件中,这样用户就可以通过应用内的播放功能播放该数据,回看绘画的整个过程。

三、教程录制与曲线平滑

1、教程制作

这款产品的特色之一是教程是动态的,用户可以自己拼装或者通过游戏生成教程角色。目前应用内置六种教程。这些教程预先由设计师在 photoshop 中画好并标记各个部位,然后再通过专门的 photoshop 脚本导出到教程录制应用中,再由设计师按部位逐个进行临摹绘制,绘制完成,应用会将设计师的绘制过程数据保存为 json 文件,通过将这些 json 的文件里的部位互换,我们就实现了用户自己拼装教程的功能了。

2、曲线平滑

绘制过程,为了让用户绘制的曲线更加平滑,采用二次贝塞尔曲线算法进行差值(Quadratic Bezier Curve),该算法简单效率也非常不错:

public Point quadraticBezier(Point p0, Point p1, Point p2, float t) {

Point pFinal = new Point();

pFinal.x = (float) (Math.pow(1 - t, 2) * p0.x + (1 - t) * 2 * t * p1.x + t * t * p2.x);

pFinal.y = (float) (Math.pow(1 - t, 2) * p0.y + (1 - t) * 2 * t * p1.y + t * t * p2.y);

return pFinal;

}

基于 HarmonyOS 的分布式特性,《Labo 涂鸦鸿蒙亲子版》完成了一次已有应用的自我尝试和突破,大大的增加了用户在使用过程中的乐趣,为用户带来了全新的跨设备亲子交互体验,“Labo Lado 儿童艺术创想” 团队在未来将与更多的 HarmonyOS 开发者一起,为用户创作出更多更有趣的儿童创造类应用。

近一段时间以来,HarmonyOS 2 的发布吸引了广大开发者的关注。作为一款面向万物互联时代的智能终端操作系统,HarmonyOS 2 带来了诸多新特性、新功能和新玩法,等待开发者去探索、去学习、去实践。也欢迎广大开发者继续发挥创造力和想象力,基于 HarmonyOS 开发出更多有创新、有创意、有价值的作品,打造出专属于万物互联时代的创新产品。

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请 注册新账号