基于Web产品协同设计系统关键技术的解决

邵秀丽　李慧超　王景军　姚萌萌

摘 要：本文针对基于Web3D的协同设计系统中多用户协作冲突处理、设计操作实时同步显示和交互过程即时通讯3个关键问题进行研究。针对3个问题分别提出基于控制权限及优先级处理的冲突操作解决方案，基于约定语义规则库进行设计操作格式化与数据解析和基于node.js+socket.io即时通信框架的客户端与服务器通讯方案，从而实现基于Web3D的协同设计系统中操作与数据的一致性与即时性。

关键词：Web 3D协同设计； 同步互斥； 冲突处理； 即时通讯

Abstract： Multi-user collaboration conflict management， real-time synchronous display of design and operation and instant messaging of interactive process are three key issues for the research of Web 3D-based co-design system. According to the three problems，the paper proposes conflict operation solution based on control authority and priority， respectively. Based on the agreed semantic rule base， the paper designs and formats operation and data analysis and client / server communication scheme based on node.js + socket.io instant messaging framework. The consistency and immediacy of operation and data in Web 3D-based collaborative design system is achieved.

Key words： Web 3D collaborative design； synchronization mutex； conflict handling； instant message

引言

傳统的产品研制设计过程是由设计师在企业内部独立完成的，客户无法参与到产品设计中，使得设计师不能根据每个客户的实际需要设计出合适的产品[1]。利用现代网络技术，使客户与设计师能够协同设计产品，是目前制造业信息化发展的主要方向[2]。 互联网的出现，使 3D 图形技术发生了深刻的变化，产生了一些专门针对互联网的3D图形技术，统称为 Web3D 技术[4-5]。

本文采用同步协同模式，利用Web3D技术实现的基于Web3D产品协同设计系统[3]让顾客和一些工程师参与到产品的设计中来，解决传统产品设计过程存在用户参与受地域、时空限制的弊端。

在利用基于Web3D产品协同设计系统进行产品设计时，协作成员间需要在网上实时同步协作模型，随时沟通设计意图。因此，在协同设计过程中，须要解决几个主要的问题：

（1）分布在不同地域的设计参与者，要求在客户端浏览器上保持设计对象的行为和状态的一致性，实现设计对象的同步协同；

（2）整个协同设计过程中，要采用一定协同控制机制，保证协作活动的有序进行，避免引发并发冲突的现象；

（3）即时通讯，协作组内成员要能够对设计方案进行实时沟通。

本文主要针对以上3个协同设计过程中关键问题给出了解决方案并进行了实现。

1 多用户协作冲突处理

协作任务创建后，即可按照约定好的协作时间开始展开产品的协作设计。设计过程中，针对可能出现的并发冲突，采用一定的协同控制机制避免此种现象的发生，使协作活动有序的进行。为此，本文设计了协作对象和资源操作冲突分配问题的协作控制机制[8]，保证协作活动的顺利进行。

协同设计中的冲突处理方式可以分为静态方式和动态方式。静态方式是在冲突还未发生之前，通过实时通信窗口合理的开展协作任务规划、知识、数据的共享，全面考虑参与者角色问题，从而减少或避免冲突的产生；动态方式[5]是通过内部检测机制避免冲突的产生，或当冲突产生后，通过内部机制对冲突实时处理。以下主要对动态方式展开介绍。

为解决协同操作冲突问题[12]，本系统设计了基于优先级的自由式和基于权限的资源占用式2种冲突处理机制，保证协同设计的顺利进行。

1.1 基于优先级的自由式处理机制

1.1.1 并发操作及冲突的定义

并发操作的定义：规定请求间隔小于0.1 s的一系列请求，视为可能导致操作冲突的并发操作请求集。

操作冲突定义为以下2种：创建时冲突，当多用户同时添加相同模型，或将不同模型添加到相同位置时，产生创建冲突；状态改变冲突，当多用户同时修改相同模型属性，且修改后状态不同时，产生状态改变冲突。

1.1.2 冲突检测与处理

该冲突处理机制，是在NodeJs服务器的事件队列的内部运行机制之上，定义了二级并发缓存机制，并以客户端操作请求到达服务端的时间为准进行冲突检测。伪码如下（假设当前操作为0）：

该机制下冲突的检测与处理步骤如下：

（1）定义用户操作标识集，包括操作类型、零件名称、用户ID等属性，用来存储用户操作信息；

（2）定义已执行队列用来存放并发处理过程中已执行的操作；

（3）对于并发操作集中第一个操作请求视为有效操作，使用socket.io即时通信技术将其群发至组内其它客户端同步显示，并将操作标识，放入已执行队列；

（4）按顺序逐个获取并发操作集中操作请求。按照冲突的定义，将当前操作请求与已执行队列中的所有操作进行冲突的判断，若存在冲突则将该操作丢弃并回发冲突提示信息；若不存在冲突，将该操作视为有效操作，将操作标识放入已执行队列；

（5）清空已执行队列，该并发阶段处理完毕，开始下一次冲突检测。

1.2 基于权限的资源占用式处理机制

基于权限的资源占用式控制方法要求一个时间只能有一个人进行设计操作，将操作权限设置为一个令牌，拥有令牌的用户拥有对设计对象操作的权限。多用户同时对操作令牌进行申请，会导致操作令牌权限的分配混乱。因此，需要一种决策方法来解决多用户的并发分配问题，提出了集中方式、先到先得方式、轮转方式策略来控制令牌权限的分配，以下主要对集中式分配方式进行介绍。

1.2.1 令牌权限的控制

协作组内用户操作令牌的申请，统一分发至活动负责人处，负责人根据申请情况，选定用户为其分配操作令牌。一旦分配，不得再次为第二人分配令牌，直到该用户因时间片用完或者自行释放为止，或者可由负责人强制剥夺设计人操作令牌，被释放的令牌可继续分配给组内其它用户。

1.2.2 用户对令牌的申请与释放

活动进行过程中，协作组内普通用户（除负责人外）可随时对操作令牌进行申请，由负责人为其分配操作令牌，同时系统为用户分配时间片。当时间片结束、用户主动释放或负责人强制剥夺令牌，令牌自动回收至负责人。

1.2.3 令牌分配的实现

首先，定义动态数组 activityCurrOper来记录所有协作活动令牌的分配情况，以协作活动的id为数组索引，以要分配的用户id为值，填充activityCurrOper数组，以此来存储当前操作用户，该值为空即尚未给对应协作对象分配操作用户。该接口所做的工作如下：

（1）为用户分配操作令牌。即将用户id填充到activityCurrOper数组对应的位置，分配完成，运用实时通信机制类库中的点对点通信方法和广播通信方法，设置通知标识，分别将分配结果（用户id、用户名称、结果标识）发送至分配用户以及协作组内其它客户端，由客户端根据对应结果信息去控制界面属性以控制设计界面是否可操作；

（2）为获取到操作令牌的用户分配计时器。本处为保证组内多个客户端时间显示的一致性，采用服务器端计时，该计时器初设时间为300 s，运用通信的广播技术进行协作组内客户端计时时间的同步。计时器计时结束，清空占用，终止该计时器，采用广播的方法设置回收标识，向组内客户端发送操作令牌的回收通信，组内客户端根据回收标识，接收服务器回收通知后设置权限操作按钮属性，可重新提出操作令牌的申请。

资源占用式分配问题的解决方案实现了基于负责人指定的集中方式、先到先得方式、轮转方式的联合控制，用户可根据需要灵活更换控制方式。该方法要求一个时间只能有一个人进行设计操作，将操作权限设置为一个令牌，拥有令牌的用户拥有对設计对象操作的权限。用户获取操作令牌的流转如图1所示。

从图中可以看出，多用户同时对操作令牌进行申请，会导致操作令牌权限的分配混乱。因此，需要一种决策方法来解决多用户的并发分配问题，本节并发分配解决方案给出了集中方式、先到先得方式、轮转方式策略来控制令牌权限的分配。同时，活动负责人可根据需要自由进行控制方式的切换。

其中，负责人更换控制方式之后，必须保证协作组内其它客户端的控制方式同步更换，否则将导致因为参与用户各个客户端控制方式不一致而引发的控制混乱问题。

2 协同设计界面实时同步

在协同设计过程中，不同成员共同编辑一个应用时，会出现公共操作区域或是页面之间相互影响的问题。组内协作客户端界面需要实时刷新。因此，系统必须具有冲突检测与处理以及实时同步处理的功能，这也是协同设计的难点之一。

2.1 实时同步的处理机制

在协同设计过程中，用户进行的设计操作要实时同步到其它成员客户端浏览器上，为保证组内设计者呈现结果的一致性，成员客户端各自维护了一份设计对象数据副本，使操作数据在成员客户端之间一致，同步过程具体流程如图2所示。下面分3个方面对实时同步机制的实现进行介绍。

2.1.1 数据消息的语义规则库和本地数据副本

首先，数据消息的语义规则库[9-10]，定义了用户操作集及客户端同步操作传递的消息内容和消息格式，消息内容包括操作标识（sign）、协作任务ID、用户ID和零件名称，见表1。

用户单步操作完成，按照表1所示的数据内容和数据格式对操作产生的实际数据进行格式化，设置操作标识（sign）将其发送至服务器端进行操作数据的传递。其中，各个操作对应的数据内容均包括协作活动id（activitiyid），决定了服务器传递操作数据的范围。

其次，本地数据副本，用于记录当前设计对象及其状态，由一系列零件及对应属性组成，见表2。

2.1.2 实时同步的实现过程

首先，用户进行设计操作，触发对应操作的响应事件并更新本地数据副本，将操作产生的实际数据根据语义规则库格式化成JSON对象，使用即时通信机制的socket.emit（）方法将操作标识（sign）和JSON对象发送至NodeJs服务器。

其次，NodeJs服务器使用socket.on（'sign'，func（data））接口根据操作标志sign接收并解析客户端操作JSON对象，获取协作任务ID，根据即时通信机制socket.broadcast.to（id）.emit（）方法，将服务器接收的JSON消息结合操作标志sign群发至组内的其它客户端。

最后，客户端根据标志位sign，解析服务器JSON消息，并更新本地数据副本，根据操作类型调用对应界面驱动程序接口进行页面操作同步显示。

2.1.3 零件模型加载的网络同步问题

系统后台对零件库进行维护，零件模型应当是.obj模型文件，结合.mtl材质文件格式。应用基于WebGL[6]第三方开源库的Three.js作为3D渲染引擎，3D场景通过.obj和.mtl文件获得模型信息和材料信息。设计人员可通过鼠标操作或修改组件参数信息，最终形成完整3D产品模型。参与设计用户可自行导入STL格式的CAD模型文件，该格式为CAD软件、3Dmaxs软件、Three.js Web3D接收的通用版本。文件一经导入可直接加载至3D场景中，供用户使用，使零件库易于扩展。

如果模型文件过大，以整个文件作为传输对象，会因耗时问题导致通信连接的中断或者阻塞的现象，对实时同步造成很大的影响。

本文提出对大文件问题采用基于IIS服务器的异步请求方法实时同步。用户操作的零件模型，会以异步方式，保存至IIS服务器；借助文本同步通信机制将模型文件存储URL格式化为JSON消息格式，由NodeJs服务器转发至协作组内其它客户端；客户端接收JSON消息，解析得到文件URL，根据URL异步获取IIS服务器端模型文件，载入设计场景中。

2.2 协同设计的界面实时同步解决方案

在本文同步协同设计活动进行过程中，获取设计界面操作权的用户进行的设计操作要及时的传递到参与设计的其它客户端浏览器上，同时参与设计的其它客户端传递过来的操作活动也能在该客户端浏览器上实时显示。

而从单用户的角度出发，要实现用户的设计操作在参与设计的其它客户端浏览器实时同步展现，需要做如下工作：

（1）用户单步操作的处理。由页面事件驱动程序捕获用户设计操作，并将设计操作产生数据格式化为指定的消息格式，将消息实时发送至通信服务器上，服务器以广播的形式转发给参与设计的其它客户端；

（2）组内客户端同步呈现。参与设计客户端接收由服务器发送过来的操作消息，将消息根据约定语义规则库进行解析，然后交由客户端设计界面驱动程序进行相应的操作显示。

另外，在服务器进行统一信息转发的基础上，为保证参与设计用户设计结果的一致性，参与设计成员客户端各自维护了一份设计对象副本，使参与设计成员之间无需传输整个设计结果，而仅需将编辑数据经服务器转发，使操作数据在参与设计客户端之间同步。

3 多用户协同即时通讯机制

WebSocket是HTML5提供的一种浏览器与服务器间进行全双工通讯的网络技术。使用WebSocket、浏览器和服务器只需要要做一个握手的动作，二者之间就形成了一条快速通道，可以数据互相传送[10-11]。而且为实现即时服务带来了两大好处：

（1）节省资源。互相沟通的Header很小，大概只有 2 Bytes；

（2）推送信息。不需要客户端请求，服务器可以主动传送数据给客户端。

Socket.IO是一个WebSocket库[4，13]，包括了客户端的js和服务器端的node.js，目标是构建不同浏览器和移动设备上使用的实时应用。基于Socket.IO良好的可移植性和可维护性，本文使用Socket.IO即时通信类库，在客户端与服务器端建立通信连接。

3.1 客戶端与服务器通讯连接设计

客户端与服务器端为多对一的关系，服务器端应用程序server.js必须时刻处于运行状态，这样服务器与客户端之间的即时通信就可以随时进行。主要设计机制：

（1）服务器端应用程序通过调用监听接口，并指定监听信息标志，时刻监听带有该标志的客户端操作权控制请求和操作请求信息。客户端一旦发送对应请求信息。则服务器端程序server.js中对应监听程序接收用户请求信息；

（2）客户端应用程序通过调用监听接口，同样指定监听信息标志，时刻监听带有该标志的服务器端操作权控制以及操作控制反馈的结果信息，服务器端一旦发送对应反馈信息，则客户端应用程序中对应监听程序接收服务器端反馈的结果信息。

3.2 通信机制的实现

使用socket.io即时通信类库，完成客户端与服务器端通信连接的建立，在连接建立的基础上，由于协作设计活动的展开是以协作组为单位，所以协作组内控制信息与同步信息相互独立。因此，需要对客户端用户进行逻辑通信入组。

3.2.1 通信连接的建立

服务器端程序server.js启动后，自动创建http服务并设置监听端口8888实时监听客户端的连接请求。

客户端运行MainFrame.aspx应用程序进入协同设计页面，通过调用socket.io即时通信类库的io.connect（‘服务器ip：8888）方法，根据服务器的IP和端口号8888找到服务器对应服务端口，将‘connection标志装入连接请求消息包中，发送至服务器端。服务器端使用socket.io即时通信类库监听客户端连接请求方法socket.sockets.on（‘connection，function（socket）{}）通过标志‘connection接收客户端的连接，生成已建立连接的客户端唯一socket对象反馈至客户端，该方法的第二个参数（匿名函数）包含了接收客户端连接后的处理工作，参数socket为与客户端建立连接socket对象，服务器使用该socket对象和对应连接客户端socket对象进行即时通信。

3.2.2 客户端用户的逻辑通信入组

客户端通过调用socket.io即时通信类库的socket.emit（‘comeIn，data）方法指定入组标识comeIn，将用户id（userid）、协作活动id（activityid）装入JSON格式的data数据发送至服务器端；服务器端根据comeIn标识，使用socket.io类库的socket.on（‘comeIn，function（data）{}）监听方法，接收客户端入组信息。其中，第二个参数对应函数包含了接收客户端信息后进行的入组处理，data为接收客户端数据。该处理工作有：解析入组信息，将该客户端socket通过socket.io类库的socket.join（activityid）方法加入以activityid为标识的逻辑通信组中，后续可通过activityid索取组内socket对象列表，对组内客户端进行群发通信。

如上2个步骤完成后，客户端与服务器之间的通信示意图如图3所示。从图中可知：

（1）通过socket.emit（‘sign，data）方法进行点对点通信，指定信息标志，信息接收方根据标志进行对应信息的接收；

（2）[JP5]通过socket.broadcast.to（activityid）.emit（‘sign，data）方法指定信息标识，进行服务器向acitvityid对应的协作组内客户端的广播通信；

（3）[JP3]通过socket.on（‘sign，function（data）{…}）方法根据信息标识接收信息，第二个参数为接收信息后对信息的处理工作，data为接收信息内容。

4 结束语

本文给出了基于Web3D的在线协同设计系统中的多用户协作冲突处理、协同设计界面实时同步和多用户协同即时通讯的关键问题解决方案。首先，基于Node.js+socket.io即时通信技术，设计基于优先级和基于权限的2种冲突处理方法，使协同设计活动能有效的进行。其次，设计约定语义规则库对产品设计过程中所涉及的操作进行数据格式化与数据解析，便于数据传输与实时同步。最后，基于nodeJs+socket.io即时通信框架设计客户端与服务器通讯方案，解决协同设计过程中即时通讯的问题。

本系统还需要在以下几个方面进行改进：

（1）对设计过程中依赖规则进行约束及冲突处理方式的设计；

（2）目前系统主要实现模型的组合拼接，今后工作中考虑初始建模的实现方案。

参考文献

[1] 董仁扬. 三维机械设计软件MDT4.0增强版培训教程[M]. Autodesk中国西部大学，2000.

[2] 殷国富，陈永华. 计算机辅助设计技术与应用[M]. 北京： 科学出版社，2000.

[3] 孔庆复. 计算机辅助设计与制造[M]. 哈尔滨：哈爾滨工业大学出版社，1994.

[4] 朱晓宇， 聂颖. 基于Socket.io构建Web协同标绘应用[J]. 软件， 2016， 37（1）：110-113.

[5] 潘康华. 基于 MBD 的机械产品三维设计标准关键技术与应用研究[D]. 北京：机械科学研究总院，2012.

[6] 王维敏. Web3D技术探索及几种Web3D技术的比较选择[D]. 武汉：武汉大学，2004.

[7] 王强，朱吉强，张桢琦. 基于Web的3D模型协同浏览技术的研究与应用[J]. 山西大学学报（自然科学版），2007，30（3）：335-339.

[8] 马晓明. 基于WEB 3D多人建模平台协同冲突分析与研究[D]. 上海：上海交通大学，2014.

[9] 胡晓琛. Web3D虚拟环境交互设计-基于Web3D虚拟环境技术的三维空间交互设计研究[D]. 杭州：中国美术学院，2008.

[10]冯开平，潘光洋. 基于Web3D的灯饰协同设计定制系统[J]. 图学学报，2012，33（3）：56-60.

[11]张啸. 浅谈基于Web3D的交互式工业产品三维虚拟场景的设计[J]. 科技传播，2010（13）：218，214.

[12]KLEIN M. Supporting conflict resolution in cooperative design systems[J]. IEEE Transactions on Systems Man and Cybernetics ， 1991 ， 21 （6） ：1379-1390.

[13]陈文艺， 张霏， 龙艳. 基于Socket.IO的物联网网关实时双向通信系统[J]. 西安邮电大学学报， 2017，22（6）：111-116.