一、前置思考多端协同是鸿蒙18N战略的核心——手机编辑平板预览PC完成复杂操作智慧屏展示最终成果。但协同≠投影真正的多端协同要求各端拥有自己的UI适配屏幕大小但共享同一份业务逻辑和数据状态。本文聚焦跨设备UI状态同步的架构选择集中式 vs 对等式 vs 混合分布式事件总线实现跨设备UI事件传递分布式ViewModel一套业务逻辑多端UI共享协同编辑的锁机制与操作队列真实痛点场景状态不同步手机端修改了数据平板端屏幕显示的还是旧数据协同冲突两端同时修改导致数据被覆盖UI不匹配手机和平板的UI完全不同但业务逻辑共享操作乱序手机端先操作但网络延迟平板收消息顺序错误二、核心原理2.1 多端协同架构对比┌──────────────────────────────────────────────────────┐ │ 方案A: 集中式 (Star Topology) │ │ │ │ ┌─────────┐ │ │ │ Host设备 │ ← 中心节点持有ViewModel │ │ └────┬────┘ │ │ ┌────────┼────────┐ │ │ ┌─────┴────┐ ┌─┴──────┐ ┌─────┴────┐ │ │ │ 手机UI │ │平板UI │ │ PC UI │ │ │ └──────────┘ └────────┘ └──────────┘ │ │ │ │ 优点: 一致性强 缺点: Host离线全挂 │ ├──────────────────────────────────────────────────────┤ │ 方案B: 对等式 (P2P) │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 手机VM │◄──►│ 平板VM │◄──►│ PC VM │ │ │ │ UI │ │ UI │ │ UI │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ 优点: 无单点故障 缺点: 一致性冲突多 │ ├──────────────────────────────────────────────────────┤ │ 方案C: 混合式 (Hybrid) ◄── 鸿蒙推荐 │ │ │ │ 本地优先 CRDT同步 版本向量冲突解决 │ │ distributedKVStore (数据) EventBus (事件) │ └──────────────────────────────────────────────────────┘2.2 分布式ViewModel设计// 分布式 ViewModel 基类abstractclassDistributedViewModel{protectedkvStore:distributedKVStore.SingleKVStore|nullnull;protectedisPrimary:booleanfalse;protecteddeviceId:string;// 初始化分布式状态asyncinit(deviceId:string,storeName:string):Promisevoid{this.deviceIddeviceId;constkvManager:distributedKVStore.KVManagerdistributedKVStore.createKVManager({bundleName:com.example.app});this.kvStoreawaitkvManager.getKVStore(storeName,{createIfMissing:true,encrypt:true,kvStoreType:distributedKVStore.KVStoreType.DEVICE_COLLABORATION,securityLevel:distributedKVStore.SecurityLevel.S2});// 监听远端状态变化this.kvStore.on(dataChange,distributedKVStore.SubscribeType.SUBSCRIBE_TYPE_ALL,(data:distributedKVStore.ChangeNotification){this.onRemoteStateChanged(data);});}// 子类实现远端状态变化时的UI更新逻辑abstractonRemoteStateChanged(data:distributedKVStore.ChangeNotification):void;// 更新状态并同步asyncupdateAndSync(key:string,value:string):Promisevoid{if(this.kvStorenull)return;// 本地原子更新awaitthis.kvStore.put(key,value);// 触发增量同步awaitthis.kvStore.sync([],distributedKVStore.SyncMode.PUSH_PULL);}}// 具体ViewModel示例协同文档编辑器classCollaborativeDocViewModelextendsDistributedViewModel{privatecontent:string;privatecursorPosition:number0;privatecollaborators:Mapstring,CursorInfonewMap();// 本地修改文档asynceditContent(newContent:string,cursorPos:number):Promisevoid{this.contentnewContent;this.cursorPositioncursorPos;// 将变更同步到其他设备awaitthis.updateAndSync(doc:content,newContent);awaitthis.updateAndSync(doc:cursor:this.deviceId,this.serializeCursor(cursorPos));}// 远端状态变化回调onRemoteStateChanged(data:distributedKVStore.ChangeNotification):void{constupdateEntries:distributedKVStore.Entry[]data.updateEntriesasdistributedKVStore.Entry[];for(leti:number0;iupdateEntries.length;i){constentry:distributedKVStore.EntryupdateEntries[i];if(entry.keydoc:content){this.contententry.value.valueasstring;this.triggerUICallback(onContentChanged,this.content);}elseif((entry.keyasstring).startsWith(doc:cursor:)){constdeviceId:string(entry.keyasstring).slice(doc:cursor:.length);constcursorInfo:CursorInfothis.deserializeCursor(entry.value.valueasstring);this.collaborators.set(deviceId,cursorInfo);this.triggerUICallback(onRemoteCursorMoved,deviceId,cursorInfo);}}}privateserializeCursor(pos:number):string{returnJSON.stringify({position:pos,timestamp:Date.now()});}privatedeserializeCursor(json:string):CursorInfo{constobj:Recordstring,numberJSON.parse(json)asRecordstring,number;return{position:obj[position],timestamp:obj[timestamp]};}}interfaceCursorInfo{position:number;timestamp:number;}2.3 分布式事件总线// 跨设备事件总线classDistributedEventBus{privatestaticinstance:DistributedEventBus;privatelisteners:Mapstring,EventCallback[]newMap();privatekvStore:distributedKVStore.SingleKVStore|nullnull;staticgetInstance():DistributedEventBus{if(DistributedEventBus.instanceundefined){DistributedEventBus.instancenewDistributedEventBus();}returnDistributedEventBus.instance;}asyncinit(kvStore:distributedKVStore.SingleKVStore):Promisevoid{this.kvStorekvStore;// 监听事件通道this.kvStore.on(dataChange,distributedKVStore.SubscribeType.SUBSCRIBE_TYPE_REMOTE,(data:distributedKVStore.ChangeNotification){constinsertEntries:distributedKVStore.Entry[]data.insertEntriesasdistributedKVStore.Entry[];for(leti:number0;iinsertEntries.length;i){constentry:distributedKVStore.EntryinsertEntries[i];if((entry.keyasstring).startsWith(event:)){this.dispatchEvent(entry.keyasstring,entry.value.valueasstring);}}});}// 发送跨设备事件asyncemit(eventName:string,payload:string):Promisevoid{if(this.kvStorenull)return;consteventKey:stringevent:eventName:Date.now();awaitthis.kvStore.put(eventKey,payload);awaitthis.kvStore.sync([],distributedKVStore.SyncMode.PUSH_PULL);// 清理事件5秒后自动删除setTimeout(async(){if(this.kvStore!null){awaitthis.kvStore.delete(eventKey);}},5000);}// 订阅事件on(eventName:string,callback:EventCallback):void{letcallbacks:EventCallback[]|undefinedthis.listeners.get(eventName);if(callbacksundefined){callbacks[];this.listeners.set(eventName,callbacks);}callbacks.push(callback);}privatedispatchEvent(key:string,payload:string):void{// 解析事件名: event:click:timestampconstparts:string[]key.split(:);consteventName:stringparts[1];constcallbacks:EventCallback[]|undefinedthis.listeners.get(eventName);if(callbacks!undefined){for(leti:number0;icallbacks.length;i){callbacks[i](eventName,payload);}}}}typeEventCallback(eventName:string,payload:string)void;三、协同编辑锁机制classCollaborativeLockManager{privatereadonlyLOCK_TIMEOUT_MS:number30000;// 锁过期30秒privatecurrentLock:LockInfo|nullnull;privatelockQueue:LockRequest[][];// 请求编辑锁asyncacquireLock(sectionId:string,deviceId:string):Promiseboolean{// 检查是否有人持有锁constlockKey:stringlock:sectionId;constexistingLock:LockInfo|nullawaitthis.getExistingLock(lockKey);if(existingLock!null){// 锁过期if(Date.now()-existingLock.timestampthis.LOCK_TIMEOUT_MS){awaitthis.releaseForce(lockKey);}else{// 排队等待returnnewPromiseboolean((resolve){this.lockQueue.push({sectionId:sectionId,deviceId:deviceId,resolve:resolve});});}}// 获取锁this.currentLock{sectionId:sectionId,deviceId:deviceId,timestamp:Date.now()};awaitthis.setLock(lockKey,this.currentLock);returntrue;}// 释放锁asyncreleaseLock(sectionId:string):Promisevoid{constlockKey:stringlock:sectionId;awaitthis.deleteLock(lockKey);this.currentLocknull;// 通知队列中的下一个等待者if(this.lockQueue.length0){constnext:LockRequest|undefinedthis.lockQueue.shift();if(next!undefined){next.resolve(true);}}}}interfaceLockInfo{sectionId:string;deviceId:string;timestamp:number;}interfaceLockRequest{sectionId:string;deviceId:string;resolve:(value:boolean)void;}四、避坑速查坑现象原因解决事件延迟大操作后2-3秒其他端才响应KVStore同步有最小间隔高频事件走软总线消息通道而非KVStore事件风暴快速连续操作导致内存溢出每次操作产生新key且未删除事件添加TTL过期自动删除合并短时间重复事件锁未释放其他端永远无法编辑应用崩溃时锁未释放锁带过期时间30s心跳续期ViewModel泄露页面关闭后数据仍在同步未取消KVStore订阅onDestroy中unsubscribe close kvStore不同端UI错乱平板显示手机端UI未做设备类型适配ViewModel返回设备无关数据UI层自行适配操作回退编辑文本5秒后回退两端的CRDT合并使用了旧时间戳确保所有设备时钟同步NTP误差100ms连接数上限第7个设备连不进来单组协同上限6设备拆分为子组每组6人以内五、总结多端协同的架构核心是**“数据统一、UI独立”**分布式ViewModel状态用KVStore同步各端独立UI渲染事件总线KVStore的event:前缀做通道5秒TTL防泄漏协同锁30秒过期心跳续期防止死锁
鸿蒙多端协同高级架构设计：跨设备UI状态同步/事件总线/分布式ViewModel/MVVM协同模式
一、前置思考多端协同是鸿蒙18N战略的核心——手机编辑平板预览PC完成复杂操作智慧屏展示最终成果。但协同≠投影真正的多端协同要求各端拥有自己的UI适配屏幕大小但共享同一份业务逻辑和数据状态。本文聚焦跨设备UI状态同步的架构选择集中式 vs 对等式 vs 混合分布式事件总线实现跨设备UI事件传递分布式ViewModel一套业务逻辑多端UI共享协同编辑的锁机制与操作队列真实痛点场景状态不同步手机端修改了数据平板端屏幕显示的还是旧数据协同冲突两端同时修改导致数据被覆盖UI不匹配手机和平板的UI完全不同但业务逻辑共享操作乱序手机端先操作但网络延迟平板收消息顺序错误二、核心原理2.1 多端协同架构对比┌──────────────────────────────────────────────────────┐ │ 方案A: 集中式 (Star Topology) │ │ │ │ ┌─────────┐ │ │ │ Host设备 │ ← 中心节点持有ViewModel │ │ └────┬────┘ │ │ ┌────────┼────────┐ │ │ ┌─────┴────┐ ┌─┴──────┐ ┌─────┴────┐ │ │ │ 手机UI │ │平板UI │ │ PC UI │ │ │ └──────────┘ └────────┘ └──────────┘ │ │ │ │ 优点: 一致性强 缺点: Host离线全挂 │ ├──────────────────────────────────────────────────────┤ │ 方案B: 对等式 (P2P) │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 手机VM │◄──►│ 平板VM │◄──►│ PC VM │ │ │ │ UI │ │ UI │ │ UI │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ 优点: 无单点故障 缺点: 一致性冲突多 │ ├──────────────────────────────────────────────────────┤ │ 方案C: 混合式 (Hybrid) ◄── 鸿蒙推荐 │ │ │ │ 本地优先 CRDT同步 版本向量冲突解决 │ │ distributedKVStore (数据) EventBus (事件) │ └──────────────────────────────────────────────────────┘2.2 分布式ViewModel设计// 分布式 ViewModel 基类abstractclassDistributedViewModel{protectedkvStore:distributedKVStore.SingleKVStore|nullnull;protectedisPrimary:booleanfalse;protecteddeviceId:string;// 初始化分布式状态asyncinit(deviceId:string,storeName:string):Promisevoid{this.deviceIddeviceId;constkvManager:distributedKVStore.KVManagerdistributedKVStore.createKVManager({bundleName:com.example.app});this.kvStoreawaitkvManager.getKVStore(storeName,{createIfMissing:true,encrypt:true,kvStoreType:distributedKVStore.KVStoreType.DEVICE_COLLABORATION,securityLevel:distributedKVStore.SecurityLevel.S2});// 监听远端状态变化this.kvStore.on(dataChange,distributedKVStore.SubscribeType.SUBSCRIBE_TYPE_ALL,(data:distributedKVStore.ChangeNotification){this.onRemoteStateChanged(data);});}// 子类实现远端状态变化时的UI更新逻辑abstractonRemoteStateChanged(data:distributedKVStore.ChangeNotification):void;// 更新状态并同步asyncupdateAndSync(key:string,value:string):Promisevoid{if(this.kvStorenull)return;// 本地原子更新awaitthis.kvStore.put(key,value);// 触发增量同步awaitthis.kvStore.sync([],distributedKVStore.SyncMode.PUSH_PULL);}}// 具体ViewModel示例协同文档编辑器classCollaborativeDocViewModelextendsDistributedViewModel{privatecontent:string;privatecursorPosition:number0;privatecollaborators:Mapstring,CursorInfonewMap();// 本地修改文档asynceditContent(newContent:string,cursorPos:number):Promisevoid{this.contentnewContent;this.cursorPositioncursorPos;// 将变更同步到其他设备awaitthis.updateAndSync(doc:content,newContent);awaitthis.updateAndSync(doc:cursor:this.deviceId,this.serializeCursor(cursorPos));}// 远端状态变化回调onRemoteStateChanged(data:distributedKVStore.ChangeNotification):void{constupdateEntries:distributedKVStore.Entry[]data.updateEntriesasdistributedKVStore.Entry[];for(leti:number0;iupdateEntries.length;i){constentry:distributedKVStore.EntryupdateEntries[i];if(entry.keydoc:content){this.contententry.value.valueasstring;this.triggerUICallback(onContentChanged,this.content);}elseif((entry.keyasstring).startsWith(doc:cursor:)){constdeviceId:string(entry.keyasstring).slice(doc:cursor:.length);constcursorInfo:CursorInfothis.deserializeCursor(entry.value.valueasstring);this.collaborators.set(deviceId,cursorInfo);this.triggerUICallback(onRemoteCursorMoved,deviceId,cursorInfo);}}}privateserializeCursor(pos:number):string{returnJSON.stringify({position:pos,timestamp:Date.now()});}privatedeserializeCursor(json:string):CursorInfo{constobj:Recordstring,numberJSON.parse(json)asRecordstring,number;return{position:obj[position],timestamp:obj[timestamp]};}}interfaceCursorInfo{position:number;timestamp:number;}2.3 分布式事件总线// 跨设备事件总线classDistributedEventBus{privatestaticinstance:DistributedEventBus;privatelisteners:Mapstring,EventCallback[]newMap();privatekvStore:distributedKVStore.SingleKVStore|nullnull;staticgetInstance():DistributedEventBus{if(DistributedEventBus.instanceundefined){DistributedEventBus.instancenewDistributedEventBus();}returnDistributedEventBus.instance;}asyncinit(kvStore:distributedKVStore.SingleKVStore):Promisevoid{this.kvStorekvStore;// 监听事件通道this.kvStore.on(dataChange,distributedKVStore.SubscribeType.SUBSCRIBE_TYPE_REMOTE,(data:distributedKVStore.ChangeNotification){constinsertEntries:distributedKVStore.Entry[]data.insertEntriesasdistributedKVStore.Entry[];for(leti:number0;iinsertEntries.length;i){constentry:distributedKVStore.EntryinsertEntries[i];if((entry.keyasstring).startsWith(event:)){this.dispatchEvent(entry.keyasstring,entry.value.valueasstring);}}});}// 发送跨设备事件asyncemit(eventName:string,payload:string):Promisevoid{if(this.kvStorenull)return;consteventKey:stringevent:eventName:Date.now();awaitthis.kvStore.put(eventKey,payload);awaitthis.kvStore.sync([],distributedKVStore.SyncMode.PUSH_PULL);// 清理事件5秒后自动删除setTimeout(async(){if(this.kvStore!null){awaitthis.kvStore.delete(eventKey);}},5000);}// 订阅事件on(eventName:string,callback:EventCallback):void{letcallbacks:EventCallback[]|undefinedthis.listeners.get(eventName);if(callbacksundefined){callbacks[];this.listeners.set(eventName,callbacks);}callbacks.push(callback);}privatedispatchEvent(key:string,payload:string):void{// 解析事件名: event:click:timestampconstparts:string[]key.split(:);consteventName:stringparts[1];constcallbacks:EventCallback[]|undefinedthis.listeners.get(eventName);if(callbacks!undefined){for(leti:number0;icallbacks.length;i){callbacks[i](eventName,payload);}}}}typeEventCallback(eventName:string,payload:string)void;三、协同编辑锁机制classCollaborativeLockManager{privatereadonlyLOCK_TIMEOUT_MS:number30000;// 锁过期30秒privatecurrentLock:LockInfo|nullnull;privatelockQueue:LockRequest[][];// 请求编辑锁asyncacquireLock(sectionId:string,deviceId:string):Promiseboolean{// 检查是否有人持有锁constlockKey:stringlock:sectionId;constexistingLock:LockInfo|nullawaitthis.getExistingLock(lockKey);if(existingLock!null){// 锁过期if(Date.now()-existingLock.timestampthis.LOCK_TIMEOUT_MS){awaitthis.releaseForce(lockKey);}else{// 排队等待returnnewPromiseboolean((resolve){this.lockQueue.push({sectionId:sectionId,deviceId:deviceId,resolve:resolve});});}}// 获取锁this.currentLock{sectionId:sectionId,deviceId:deviceId,timestamp:Date.now()};awaitthis.setLock(lockKey,this.currentLock);returntrue;}// 释放锁asyncreleaseLock(sectionId:string):Promisevoid{constlockKey:stringlock:sectionId;awaitthis.deleteLock(lockKey);this.currentLocknull;// 通知队列中的下一个等待者if(this.lockQueue.length0){constnext:LockRequest|undefinedthis.lockQueue.shift();if(next!undefined){next.resolve(true);}}}}interfaceLockInfo{sectionId:string;deviceId:string;timestamp:number;}interfaceLockRequest{sectionId:string;deviceId:string;resolve:(value:boolean)void;}四、避坑速查坑现象原因解决事件延迟大操作后2-3秒其他端才响应KVStore同步有最小间隔高频事件走软总线消息通道而非KVStore事件风暴快速连续操作导致内存溢出每次操作产生新key且未删除事件添加TTL过期自动删除合并短时间重复事件锁未释放其他端永远无法编辑应用崩溃时锁未释放锁带过期时间30s心跳续期ViewModel泄露页面关闭后数据仍在同步未取消KVStore订阅onDestroy中unsubscribe close kvStore不同端UI错乱平板显示手机端UI未做设备类型适配ViewModel返回设备无关数据UI层自行适配操作回退编辑文本5秒后回退两端的CRDT合并使用了旧时间戳确保所有设备时钟同步NTP误差100ms连接数上限第7个设备连不进来单组协同上限6设备拆分为子组每组6人以内五、总结多端协同的架构核心是**“数据统一、UI独立”**分布式ViewModel状态用KVStore同步各端独立UI渲染事件总线KVStore的event:前缀做通道5秒TTL防泄漏协同锁30秒过期心跳续期防止死锁
