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

Posted 2021-07-26 科技观察

近期，首届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开发出更多有创新、有创意、有价值的作品，打造出专属于万物互联时代的创新产品。