没有合适的资源?快使用搜索试试~ 我知道了~
7670液体用户体验API0Andrea Gallidabino软件研究所,USI卢加诺信息学院,瑞士andrea.gallidabino@gmail.com0Cesare Pautasso软件研究所,USI卢加诺信息学院,瑞士c.pautasso@ieee.org0摘要0在过去的几年里,每个用户拥有的Web设备数量显著增加。液体Web应用程序使用户能够依次利用他们的所有设备,在这些设备上迁移他们的运行应用程序,或者同时在每个设备上运行同一应用程序的不同视图。液体Web应用程序的开发人员需要控制如何向用户公开其跨设备Web应用程序的液体行为。为此,他们可以使用本文中描述的Liquid.js的API。Liquid.js是一个用于构建基于组件的丰富Web应用程序的框架,可以在多个Web设备上运行。该框架基于诸如Polymer、WebRTC、WebWorkers、PouchDB和Yjs等技术。Liquid.js有助于构建分散式Web应用程序,其组件可以在Web浏览器之间无缝流动,并携带其执行状态。Liquid.jsAPI为开发人员提供了对液体用户体验原语、设备发现和液体Web组件的生命周期的精细控制。0关键词0液体软件,Web组件,API0ACM参考格式:Andrea Gallidabino和CesarePautasso。2018年。液体用户体验API。在WWW '18Companion:2018年Web会议伴侣,2018年4月23日至27日,法国里昂。ACM,美国纽约,8页。https://doi.org/10.1145/3184558.318873801 引言0随着越来越多的异构设备(例如手机、平板电脑、笔记本电脑,以及手表、汽车和智能电视)用于访问Web,将响应式Web设计(Web应用程序可以适应个别设备)提升到一个新的水平变得重要[10]。液体软件隐喻[7,13]代表了当软件部署在多个设备上时应该如何行为:就像液体适应容器的形状一样,液体软件在多个设备上流动并适应利用其部署的设备集合的全部优势。液体软件可以:(1)根据同时使用的设备集合调整其用户界面;(2)在用户关注的情况下无缝迁移运行中的应用程序[11];(3)同步分布在多个设备上的应用程序的状态。0本文发表在知识共享署名4.0国际许可协议(CC BY4.0)下。作者保留在个人和公司网站上传播作品的权利,并附上适当的归属。WWW '18Companion,2018年4月23日至27日,法国里昂,© 2018IW3C2(国际万维网会议委员会),根据知识共享CC BY 4.0许可证发布。ACM ISBN978-1-4503-5640-4/18/04。https://doi.org/10.1145/3184558.31887380原生移动平台已经开始具备连续性/切换功能,以解决多设备使用的问题,这个功能目前只在少数个别Web应用程序中开始出现,但在底层Web平台中几乎被忽视。在本文中,我们描述了用于构建基于组件、分散式Web应用程序的Liquid.js forPolymer框架的开发人员API,该框架可以在多个Web设备上动态部署。Liquid.js for Polymer1是一个用于开发液体Web应用程序的原型框架,可以与现有的基于Polymer的丰富Web应用程序一起使用。为了开始使用,该框架只需要开发人员对现有的Polymer自定义元素进行注释,以明确指示哪些属性值应在设备之间传输或同步[4]。本文完整描述了框架提供的功能和API,开发人员可以使用这些功能和API创建具有对液体Web应用程序的生命周期进行精细控制的定制液体用户体验:在多个Web设备上动态部署的分散式Web应用程序。Liquid.js允许开发人员支持以下用例场景[6]:•顺序使用-一个用户一次使用一个设备运行应用程序。用户可以从一个设备切换到另一个设备,并继续在第二个设备上运行相同的应用程序,期望:1)应用程序无缝适应新设备的硬件和软件能力,2)用户可以立即在新设备上继续工作。例如,在使用大屏幕固定设备上显示地图规划旅行后,将方向传输到将随行的移动设备上。•同时使用-一个用户同时从多个设备连接到应用程序,即用户在手机和笔记本电脑上同时运行应用程序。例如,使用个人计算机在电子商务网站上输入的信用卡支付可能需要在结账交易完成之前使用智能手机上的指纹或面部扫描仪进行批准。根据连接的设备的能力,每个设备可以显示相同用户界面的响应视图,或者可以显示专用视图,允许每个设备在应用程序的分布式用户界面中发挥独特和互补的角色[8]。•协作使用-多个用户在多个设备上打开和运行相同的应用程序。用户之间的协作可以是顺序的或同时的。例如,用户使用他们的个人手机选择要在共享公共显示屏上显示的照片来构建协作式幻灯片。液体软件和数据在设备所有权边界上流动的多用户场景具有重要的隐私和安全影响,本文未讨论这些影响。01 网站:http://liquid.inf.usi.ch/和GitHub:https://github.com/liquidjs0开发者跟踪WWW 2018年4月23日至27日,法国里昂2https://www.webcomponents.org/7680在本文中。此外,本文介绍的API不包含任何身份验证或访问控制机制,这超出了本文的范围,我们重点关注单用户场景。02 相关工作0在文献中有许多框架可以实现最初在Liquid软件宣言[13]中描述的Web应用程序的行为。然而,Liquid.js是第一个提出了一个API,其中包含[5]中描述的液体用户体验原语。PolyChrome [ 1]是一个集中式的Web框架,用于构建共同浏览应用程序,其中实现的视图可以跨多个设备上的多个表面部署。该框架定义并支持四种预定义布局:拼接、复制、嵌套和过载。PolyChromeAPI区分交互和事件:交互改变应用程序的数据,并发送到Web服务器,应用程序的中央状态存储在其中;事件改变在设备上显示的视图,并在所有配对设备之间直接交换。Polychrome可以将传统应用程序的组件创建为跨多个设备的视图。Polychrome使整个Web应用程序变得液体,而Liquid.js则针对基于组件的应用程序:在Liquid.js中,可以将单个组件迁移到不同的设备上,以便开发人员可以完全控制液体用户体验的粒度。在跨设备分布式用户界面研究领域,XD-MVC[ 9]是一个Web框架,可用于开发专注于其用户界面的自动跨设备适应的分散跨设备应用程序。该框架允许轻松地分解和迁移基于组件的基于Polymer框架构建的Web应用程序。迁移是在应用程序级别实现的,但只有状态在设备之间同步。从开发者的角度来看,迁移是通过根据部署设备剪切子组件从其父组件中剪切子组件来实现的,模拟了Liquid软件所期望的迁移行为。XD-MVC支持视图层的声明性自适应,因为视图和组件可以用规则进行注释,描述组件在多个设备上的显示方式。通过解释这些规则,XD-MVC能够决定视图的哪些部分需要剪切,这取决于连接设备集合的配置。本文介绍的Liquid.jsAPI允许开发人员以编程方式控制和微调液体Web应用程序的部署配置,并可用于实现类似的基于规则的自适应策略。03 用于Polymer的Liquid.js0Liquid.js for Polymer [ 3]是一个用于构建分散、基于组件、液体Web应用程序的Web框架,可以在多个异构设备上部署。假设使用Liquid.js开发的应用程序是使用Web组件标准构建的,该标准提供了必要的抽象,将应用程序的用户界面及其状态结构化为模块化、可重用和可组合的单元,并且可以独立部署在多个设备上。而对于顺序使用的情况,0在某些情况下,使整个Web应用程序变得液体就足够了,而细粒度的基于组件的方法特别适用于同时使用的情况。这样,开发人员可以控制用户界面的每个部分的部署配置,并最好地决定如何使用户能够在所有可用设备上重新排列和布局Web应用程序。更具体地说,我们假设组件是使用Google开发的Polymer框架构建的。Liquid.js与Web组件目录2上可以找到的任何Polymer组件以及符合Polymerv1.x规则的Web开发人员构建的任何Polymer组件兼容。Liquid.js通过Yjs [ 12]进行状态同步,Yjs是一种用于并发控制和冲突解决的连接器,可以通过WebSockets和WebRTC点对点连接进行通信。使用Liquid.js [ 4]的开发人员需要将Liquid行为注入到他们决定使其液体的Polymer组件中,以便可以动态地将其迁移到其他设备上运行。更具体地说,Liquid行为赋予了有状态的Web组件在任何启用Web浏览器的设备上动态部署、迁移、分叉和克隆的能力。为此,Web组件的状态可以按照Liquid.js的约定进行注释。开发人员可以选择哪些组件是液体的,并可以明确定义在组件迁移时应与其他设备共享哪些属性。Liquid.js读取注释的组件,并在运行在不同设备上的组件之间透明地管理资产部署、状态迁移和同步。Liquid.js约定将任何导入Liquid行为的Polymer组件标记为液体组件,并将需要同步的任何Polymer属性标记为液体属性。液体属性只能在液体组件内定义。液体组件可以在连接到液体Web应用程序发现服务器的任何运行Web浏览器的设备上实例化。Liquid.js允许用户在其任何设备上实例化Web应用程序提供的任何组件,此外,它还允许用户直接将这些组件迁移到任何其他设备上。默认情况下,Liquid.js将Polymer组件包装在一个带有相应液体用户体验操作的框架中(例如,在图2a中显示的将组件迁移到另一个设备)。然而,开发人员可以选择隐藏这样的框架,并完全重新设计和自定义液体用户体验,使用本文中描述的API。每当组件在设备之间移动时,如果目标设备尚未拥有组件的资产,则会从源设备请求这些资产,以便可以在新设备上动态加载它们。为此,Liquid.js支持集中式和分散式方法来分发和部署Web应用程序的资产。与任何其他传统Web应用程序一样,液体应用程序的服务器(参见图1)存储应用程序的所有资产(即包含液体组件定义的HTML、CSS和JavaScript文件)。由于客户端连接到应用程序的客户端拥有资产的副本,因此Liquid.js不再仅依赖于中央Web服务器。由于客户端拥有资产的副本,它们可以通过将资产发送给新客户端来帮助服务器。0开发者跟踪WWW 2018年4月23日至27日,法国里昂PouchDBWebsocketWebWorker4THE LIQUID.JS API4.1Framework Configuration API}7690客户端0HTTP客户端0液体API0液体行为0液体组件0Websocket客户端0服务器端0部署0服务器0服务器0信令0服务器0P0组0y-液体0自定义0液体用户体验0资产0液体0池0属性0WebRTC对等0图1:Liquid.js架构0连接到应用程序。客户端可以通过使用WebRTC PeerConnection和DataChannelAPI在对等通道上将资产分发给其相邻设备。从一开始就创建完全分布式架构在当前的Web技术中是不可能的,因为从Web浏览器连接的用户尚未拥有公共IP地址,因此无论如何他们都需要连接到Web服务器进行发现。因此,液体应用程序的服务器通过实现一个信令服务器来负责客户端的发现,该信令服务器还可以用于在无法在它们之间创建直接的WebRTC连接的设备之间中继消息。Liquid.js使用唯一标识符(URI)标识液体属性、液体组件和设备。该框架在连接时为每个设备分配一个标识符,并在实例化液体组件及其属性时为其分配一个标识符。这些标识符可以在框架内部用作URI[2],以便在需要引用它们的情况下使用,例如为了将液体组件从一个设备迁移到另一个设备,需要知道源组件URI和目标设备URI。Liquid.js的URI遵循液体URI方案,并通过框架而不是使用HTTP协议进行解引用。URI简化了API的设计,因为相同的方法既可以应用于发出命令的设备上部署的组件,也可以应用于远程组件。液体行为与库的核心组件、液体API组件和y-liquid组件(参见图1)直接通信。后者定义了Yjs框架[12]的连接器的实现,该连接器负责在设备之间同步数据结构。每当组件的液体属性的状态发生变化时,Yjs和y-liquid连接器会创建并发送同步消息,这些消息会自动传递到其他配对设备。任何不使用Liquid.js构建的应用程序的现有行为(遗留的Polymer组件)也不会改变,因为这些组件仍然可以完全访问任何W3CHTML5API或主JavaScript环境中定义的任何导入库。Liquid.js包装了可靠的Polymer组件,并在注释的Polymer属性上设置代理陷阱和对象观察器。这种方法允许在不需要开发人员更改代码的情况下将液体行为与实际组件行为分离。0相反,他们只需要明确地将那些值应该在设备之间迁移或保持同步的属性标记为液体。有关Liquid.js内部的更多信息,请参阅[3]。0核心Liquid.jsAPI处理设备配置和发现,控制液体组件的生命周期,并公开液体用户体验原语,可用于Liquid.js提供的默认用户体验控件的高级自定义场景。此外,API还提供了许多有用的HTML5API的跨设备版本,例如用于在设备之间卸载计算密集型任务的LiquidWebWorkers,用于管理在多个设备之间共享的组件的运行时状态的Liquid Storage,以及用于存储组件状态快照的LocalPersistence。AssetsAPI支持Web应用程序资产的点对点部署,ConnectionAPI提供了一个分散的事件总线。描述的许多方法都是异步的,因为它们需要设备间通信。在这种情况下,它们返回Promise来表示异步方法调用的成功或失败完成。0框架配置API(见表1)允许开发人员配置Liquid.js的客户端并正确实例化Liquid.js框架。configure方法需要一个options对象(默认值请参见清单1),其中开发人员至少应定义用于发现和资源部署的Web服务器的主机地址。04.1框架配置API02 host: 'localhost ' , // Web服务器地址01 defaultOptions = {04 signalingServerRoute: '/signaling ' , // 信令服务器路由05 relayMessages: false , // 自动中继所有消息06 useRoutingTables: true , // 优化发送消息的路由表07 optimizePackageBroadcastMessages: true , // 通过Web服务器优化的消息08 workerPool: {} // 预加载的Liquid WebWorkers0清单1:配置默认选项0开发者追踪WWW 2018,2018年4月23日至27日,法国里昂re(options)Promise()getLoadableComponents()Promise(componentTypes[])getAllComponentURIs([DeviceURI]) Promise(componentURIs[])getAllComponentInstances()componentInstances[]getComponentInstance(componentURI)componentInstancegetDevicename()devicenamesetDevicename(devicename)-7700表1:Liquid.js API:框架配置0方法名称和参数 返回值0配置方法0事件(返回值)devicenameChange(devicename)当服务器接受设备名称更改的通知时触发。loadableComponentsListUpdate(componentTypes[])当服务器端可用组件列表更改时触发,并返回一个componentTypes[]列表。该列表仅包含服务器上可用的组件,而不包括可以直接从其他客户端获取的组件。0getLoadableComponents返回存储在服务器端并可访问的组件列表。要枚举缓存和从其他设备可用的组件类型,请使用AssetsAPI。由于用户很难通过设备URI识别设备,Liquid.js允许开发人员使用setDevicename方法为设备分配设备名称。该函数只能在发出API方法的设备上调用,无法更改远程设备的设备名称。如果开发人员选择使用名称标记设备,可以在API的所有方法调用中用分配的设备名称替换所有deviceURI的出现。服务器保证设备名称的唯一性。此API的其余方法返回液体Web应用程序的当前部署配置的快照。getAllComponentURIs方法返回目标设备中所有实例化组件的componentURIs标识符,或者默认情况下返回发出命令的设备上实例化组件的所有URI。要访问实际组件(表示其自定义元素的JavaScript对象),请使用getAllComponentInstances和getComponentInstance。这些方法只能检索在执行命令的设备上实例化的组件,因为无法返回对远程对象的引用。如果开发人员使用无效的componentURI或指向远程组件的URI调用getComponentInstance,则返回undefined值。04.2组件生命周期API0组件生命周期API(表2)是Liquid.js框架的核心方法。与Liquid用户体验原语migrate、fork、clone(见下一节4.3)一起,可以用于实现定制的液体用户体验。LUE原语本身是本节中描述的方法的流水线组合。在API中公开它们提供了对细粒度机制的访问,使开发人员可以以不同的方式组合它们来精确调整自己的液体用户体验。loadComponentType是组件生命周期中的第一个必要步骤。它首先检查组件的资源是否存在。0在发出设备上加载组件。如果它们尚未加载,它将从Web服务器请求它们,并将它们动态加载到Web浏览器中。生命周期的第二步是createComponent方法,它创建并附加与Polymer组件对应的HTML自定义元素标签到DOM内的目标DOM元素。registerComponent接受一个现有的Polymer组件,并将其标记为液体组件。如果一个组件没有在Liquid.js中注册,那么除了registerComponent和deleteComponent之外,对该组件调用的任何方法都会失败。为了方便起见,instantiateComponent方法简化了在单个调用中实例化组件的过程,其功能等同于将三个方法loadComponentType→createComponent→registerComponent进行流水线处理。deleteComponent从DOM中删除目标组件并将其删除;删除的组件将永远丢失,因为无法检索其状态。保存和稍后恢复组件的唯一方法是使用本地持久性API(参见第4.6小节)存储其状态的快照。如果目标液体组件定义了至少一个液体属性,则可以使用用于有状态组件同步方法的液体存储。getState方法以{ propertyName: value}的形式返回液体组件状态的快照。setState方法允许将状态快照应用于目标组件。pairComponent和pairProperty在两个属性或两个不同组件实例之间建立绑定,使它们的值在此后保持同步。通过调用unpairComponent或unpairProperty方法可以取消配对。04.3液体用户体验(LUE)API0液体用户体验API(见表3)基于组件生命周期和液体存储API提供以下三个基本操作[5]:•迁移:将液体组件(及其运行时执行状态)从一个设备转移到另一个设备。每当用户对组件执行迁移命令时,他会感觉到它在视觉上从源设备移动到目标设备,同时源设备上的原始组件实例消失。迁移完成后,用户可以继续在目标设备上工作,从迁移触发之前的状态继续。每次迁移组件时,框架会透明地传输1)迁移的组件资产和2)其状态的快照;如果目标设备尚未加载资产,则目标设备会加载资产,然后在目标设备上实例化一个新组件,最后应用从源设备发送的状态快照。•分叉:fork方法允许在新设备上实例化任何液体组件的副本。从用户的角度来看,运行在初始设备上的源组件不受此基本操作的影响。然而,在目标设备上,同一液体组件的新实例出现,携带着与源设备上相同的状态。除了在源设备上的状态之外,组件还携带着它之前呈现的相同视图。在命令执行完成后,副本之间不会连接,并且原始组件和分叉组件的状态可以分别演变。0开发者追踪WWW 2018,2018年4月23日至27日,法国里昂instantiateCompponent)deleteComponent(componentURI)Promise()etState(componentURI)Promise(stateSnapshot)setState(componentURI, stateSnapshot)Promise(componentURI)pairComponent(sourceCompURI1, targetCompURI2)Promise()unpairComponent(sourceCompURI1, targetCompURI2)Promise()pairProperty(sourcePropURI, targetPropURI)Promise()unpairProperty(sourcePropURI, targetPropURI)Promise()mponent(sourceCompURI, targetDevURI)Promise(migratedComponentURI)forkComponent(sourceCompURI, targetDevURI)Promise(forkedComponentURI)cloneComponent(sourceCompURI, targetDevURI)Promise(clonedComponentURI)getDeviceInfo()deviceInfogetDeviceURI()deviceURIgetDevicesList()availableDeviceURIs[]getDevicesInfoList()availableDeviceInfos[]4.5Liquid WebWorker API (beta)7710表2:Liquid.js API:组件生命周期和液体存储0方法名称和参数 返回值0组件生命周期0加载组件类型(componentTypeURI) 返回值:Promise(componentTypeURI)0createComponent(componentType[,DeviceURI, DOMElem, UIType]) 返回值:Promise(createdComponentURI)0注册组件(componentURI) 返回值:Promise(componentURI)0用于有状态组件同步的液体存储0表3:Liquid.js API:液体用户体验(LUE)0方法名称和参数 返回值0液体用户体验0•克隆:与fork方法类似,克隆允许在任何目标设备上实例化液体组件的副本。与fork方法不同,原始组件和克隆组件的状态保持同步。LUE原语实际上是由组件生命周期方法(见第4.2节)的组合实现的:例如,migrateComponent方法通过将以下方法进行流水线处理来实现:connectDevice→getComponentState→getLoadedAssets→requestAsset→loadAsset→loadComponentType→registerComponent→createComponent→setComponentState→deleteComponent。定义forkComponent和cloneCompoment方法的流水线与migrateComponent方法非常相似,但在fork原语的情况下,没有对deleteComponent的最终调用,并且在clone原语的情况下,还有对pairComponent的额外调用。04.4设备发现API0设备发现API(见表4)允许开发人员访问和读取与液体Web应用程序的执行环境中的一组远程连接设备相关的元数据。框架使用ClientJS对所有连接的设备进行指纹识别,这些信息是Liquid.jsWeb服务器上唯一存储的信息,并在每次连接到应用程序时广播到所有机器。deviceInfo对象具有以下形式:{deviceURI,clientjsFingerPrint,devicename,hard-wareData}。在指纹中,我们包括有关当前平台类型的信息,识别以下三个类别:桌面/笔记本电脑,平板电脑和手机。还有其他可能的平台值,但目前Liquid.js仅支持这三个平台,因为它们可以运行支持其依赖项(例如WebRTC,Polymer)的Web浏览器。getDevicesList和getDeviceInfoList要求Liquid.js0表4:Liquid.js API:设备发现0方法名称和参数 返回值0设备发现0事件(返回值)devicesListUpdate(availableDeviceInfos[])当新设备连接到服务器并可配对时触发。事件回调接收每个已连接设备的完整列表{deviceURI,clientjsFinдerPrint,devicename,customData}来标识每个已连接设备。0从Web服务器检索已知和当前可用设备列表的最新版本。getDeviceURI方法返回发出命令的设备的URI。0Liquid WebWorkerAPI(参见表5)用于通过自动将WebWorkers从较弱的设备转移到更强大的设备来共享多个设备的计算能力以运行计算密集型任务。createLiquidWorker方法允许开发人员创建可在设备间共享的WebWorker。如果开发人员需要创建多个LiquidWorkers,可以调用createLiquidWorkerArray方法,并传递一个列出所有要创建的LiquidWorkers的数组。pairDeviceWorkers方法的目的是建立设备之间的信任关系,以便所有Liquid Workers0开发者跟踪WWW 2018年4月23日至27日,法国里昂7720表5:Liquid.js API:worker offloading0方法名称和参数 返回值0Liquid.js API0创建Liquid Worker(workerName,workerURI)Promise(worker)0createLiquidWorkerArray({workerName,workerURI} [])Promise(workers [])0配对设备Workers(设备URI)Promise(设备URI)0postLiquidWorkerMessage(workerName,message)Promise(callResponse)0终止Liquid Worker(workerName)Promise(workerName)0Liquid Worker API0发送消息(消息)Promise(调用响应)0_postMessage(message)Promise(callResponse)0终止()Promise()0表6:Liquid.js API:本地持久性0设备级别0保存设备状态(键)Promise(键)0加载设备状态(键)Promise(键)0获取所有设备状态()Promise(deviceStateSummaries [])0获取设备状态(键)Promise(设备状态摘要)0组件级别0保存组件状态(键,组件URI)0Promise(键)0加载组件状态(键)Promise(键)0获取所有组件状态()Promise(compStateSummaries [])0获取组件状态(键)Promise(组件状态摘要)0属性级别0保存属性状态(键,属性URI)Promise(键)0获取所有属性状态()Promise(propertyStateValues [])0获取属性状态(键)Promise(属性状态值)0在源设备和目标设备中以相同名称标识的LiquidWorker可以替换其他执行。当调用postLiquidWorkerMessage方法时,Liquid.js将尝试减少worker的执行时间,并自动决定消息是发送到本地worker还是发送到运行在配对设备池上的远程worker。最后,terminateLiquidWorker方法结束Liquidworker的生命周期。开发人员还可以通过绕过Liquid.js对象访问Liquid worker API,因为Liquidworker对象本身公开了一个API。如果是这种情况,那么postMessage和terminate方法具有postLiquidWorkerMessage和terminateLiquidWorker的相同功能。_postMessage方法绕过了卸载功能,并确保任务在本地设备上执行。04.6 本地持久化API0本地持久化API(参见表6)允许在Web浏览器中运行的PouchDB3数据库中保存液体组件状态的快照。状态的快照可以在设备、组件或属性级别上保存,并且可以在调用相应方法时加载任何状态的快照。快照由Liquid.js框架内部进行拍摄,并且03 https://pouchdb.com/0表7:Liquid.js API:资产(点对点)0方法名称和参数 返回值0资产0请求资产(名称,设备URI)Promise(脚本)0loadAsset(name, script, type) Promise(name)0getAsset(name) script0getLoadedAssets() names[]0事件(返回值)isLoadingStatusChange(状态)当Liquid.js开始或结束从服务器或另一个客户端获取资产时。事件携带当前加载状态:如果Liquid.js正在获取或加载资产,则为true,否则为false0不需要将其作为参数传递给保存函数。状态的备忘录以JSON格式存储,以便可以通过使用事件总线在设备之间进行交换。三个抽象级别允许开发人员通过提供将用于PouchDB数据库标识快照的唯一键来“保存”相应状态的快照。所有抽象级别都定义了用于检索快照的getAll和get方法。最后,设备和组件级别还定义了一个load方法,该方法将在当前设备上恢复检索到的快照,该方法将实例化并重新加载快照中包含的所有液体组件的状态。属性级API不定义任何加载方法,因为属性不能独立于其所属的液体组件实例化。04.7 资产API0资产API(参见表7)用于请求和加载资产文件。为了创建一个尽可能少依赖Web服务器的分布式环境,Liquid.js允许客户端在彼此之间交换资产文件。为了实现这一点,至少一个连接的客户端需要拥有最初存储在Web服务器上的资产的缓存副本。出于安全原因,并非所有资产都可以使用资产API共享,可共享资产的列表必须填写在配置文件中。只能按需共享资产,如果接收客户端没有发送请求,则客户端不能直接将资产发送给其他客户端。requestAsset方法允许开发人员轮询设备以获取特定资产,然后通过调用loadAsset函数在机器上执行该资产。getAsset方法0开发者跟踪WWW 2018年4月23日至27日,法国里昂7730表8:Liquid.js API:设备连接和事件总线0方法名称和参数 返回值0WebSocket和WebRTC0isSocketConnected() isSocketConnected0sendSocketCustomMessage(msg) -0Socket0socketDisconnect() -0connectDevice(deviceURI) Promise(deviceInfo)0disconnectDevice(deviceURI) Promise()0sendMessage(message) -0设备0getConnectionList() connectedList0事件(返回值)connect(deviceID)当客户端首次连接到服务器时。disconnect()当客户端断开与服务器的连接时。reconnect()当客户端重新连接到服务器时,将触发此事件,而不是connected事件。0自定义事件可以使用Liquid.js打开的套接字连接与服务器端通信,或允许服务器向客户端推送自定义数据。通过发送定义为{type,payload}的socketCustom消息,liquid.js在接收客户端上触发带有参数payload的事件type。0检索之前在机器上执行的任何资产的脚本,并且getLoadedAssets方法返回一个包含所有已执行脚本名称的数组。loadingChange事件与此API相关联:每当Liquid.js正在从另一个客户端请求或加载文件时,它将将其加载状态设置为true,在所有其他情况下,状态将设置为false。04.8 连接API和事件总线0连接API(参见表8)定义了开发人员用于与其他设备或需要与Web服务器交换数据的设备通信的所有方法。API公开了三种方法,可以通过WebSocket通道增强服务器-客户端通信:isSocket-Connected方法返回连接的当前状态,sendSocketCustomMessage方法用于通过特殊目的套接字消息与服务器直接通信,socketDisconnect方法关闭与服务器的连接。其余四种方法用于与连接的WebRTC通道交互:connectDevice要求Liquid.js在当前设备和目标设备之间打开连接,类似地,disconnectDevice强制关闭与目标客户端之间打开的连接;sendMessage方法允许开发人员与其他客户端交换消息;getConnectionList方法返回一个包含与发出设备共享打开连接的所有设备URI的数组。设备连接API在socketConnected状态更改时触发connect,disconnect和reconnect事件。此外,开发人员可以定义自己的自定义套接字0如果开发人员正在开发需要直接与Web服务器通信的Web应用程序,则可以使用Liquid.JS API来处理事件。05个自定义液体用户体验示例0我们使用Liquid.JSAPI构建了http://liquid.inf.usi.ch上可用的演示。图2a和2b中的屏幕截图显示了在两个不同的Web应用程序中实例化的相同图片液体组件,加载了Liquid.js应用程序的默认视觉用户界面和自定义版本。图2a中显示的液体Web应用程序具有一个工具栏,可以查看应用程序的当前连接状态,查看和编辑设备的设备名称,并使用下拉菜单实例化新组件。每个实例化的液体组件都包裹在一个框架中,该框架显示一个菜单,其中包含可在所选组件上应用的一系列可能的操作,例如,从下拉菜单中,用户可以选择将组件迁移、分叉或克隆到名为ThisDevice和OtherDevice的设备上,在所有连接的设备上分叉或删除组件。图2b中显示的液体Web应用程序也具有工具栏。用户只能看到自动生成的设备名称(即P0、P1、P2),可以切换选择的LUE原语在迁移和克隆之间,并按下一个标有“分享”的绿色按钮(在屏幕截图中为绿色)。每当用户按下“分享”按钮时,它会打开和关闭显示在图片液体组件右上角的白色图标(参见左图)。这些图标提供了可以拖动以将组件迁移到其他位置的可行性。目标设备也表示为位于围绕浏览器窗口的黑色框架内的彩色图标。一旦用户开始拖动白色液体组件图标,该框架就会出现。如果将拖动的图标放在这些设备中的任何一个上,组件将在目标设备上迁移或克隆,具体取决
下载后可阅读完整内容,剩余1页未读,立即下载
cpongm
- 粉丝: 4
- 资源: 2万+
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- 京瓷TASKalfa系列维修手册:安全与操作指南
- 小波变换在视频压缩中的应用
- Microsoft OfficeXP详解:WordXP、ExcelXP和PowerPointXP
- 雀巢在线媒介投放策划:门户网站与广告效果分析
- 用友NC-V56供应链功能升级详解(84页)
- 计算机病毒与防御策略探索
- 企业网NAT技术实践:2022年部署互联网出口策略
- 软件测试面试必备:概念、原则与常见问题解析
- 2022年Windows IIS服务器内外网配置详解与Serv-U FTP服务器安装
- 中国联通:企业级ICT转型与创新实践
- C#图形图像编程深入解析:GDI+与多媒体应用
- Xilinx AXI Interconnect v2.1用户指南
- DIY编程电缆全攻略:接口类型与自制指南
- 电脑维护与硬盘数据恢复指南
- 计算机网络技术专业剖析:人才培养与改革
- 量化多因子指数增强策略:微观视角的实证分析
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功