CN111612639B - 一种应用于保险方案的同步交流方法及系统 - Google Patents

Abstract

本申请涉及一种应用于保险方案的同步交流方法及系统，方法包括：代理人交流端，响应于对保险方案网页的网页操作，进行网页同步数据采集，生成第一网页同步数据并发送至客户交流端；响应于第一Canvas中的涂鸦操作，根据涂鸦操作采集并生成第一涂鸦同步数据并发送至客户交流端；进行音视频采集并传输至客户交流端。客户交流端，接收第一网页同步数据并解析，执行其包含的网页操作指令，基于其包含的网页内容数据对应更新网页内容；接收并解析第一涂鸦同步数据，获取其包含的图片或绘制指令，在第二Canvas上进行绘制；接收音视频数据流并播放。本申请通过线上模拟线下保险业务开展的面对面沟通场景，提供了一种新型的展业方式。

Description

一种应用于保险方案的同步交流方法及系统

技术领域

本发明涉及通信领域，尤其涉及一种应用于保险方案的同步交流方法及系统。

背景技术

随着互联网的发展，在保险领域中代理人进行保险展业时，更多的利用微信等聊天工具将保险方案(建议书方案、投保方案、保障规划方案等)发送给客户，方案一般采用HTML5网页的形式，其包含了保险代理人为客户设计的方案内容，供客户浏览阅读，保险代理人通过电话、聊天工具或面谈方式与客户进行沟通讲解。

现有方式中，存在以下问题：一方面，客户对于保险方案的理解受限于被动的阅读方式，另一方面，当客户存在疑问或代理人需要讲解时，双方额外借助电话、聊天工具，或者面谈的方式进行沟通。由于保险方案一般具有专业性，客户单方面阅读保险方案难于完整理解方案的核心内容；使用电话、聊天工具沟通过程中，无法实时结合保险方案内容，交流过程中缺乏参考物，通过面谈方式则造成时间成本、交通成本问题，未体现互联网展业的优点。以上导致保险展业沟通效率低，互动性较差的问题，亟需应用互联网新技术解决。

发明内容

本申请有鉴于上述现有的状况，应用网页、音视频交流及相关技术，实现交流过程中保险代理人和客户在保险方案网页上的网页操作同步、涂鸦同步、语音及视频同步，达到线下面对面的交流效果。

第一方面，本申请提供了一种应用于保险方案的同步交流方法，方法包括：

所述方法应用于同步交流系统，所述同步交流系统还包括代理人交流端、客户交流端、同步交流服务器，所述代理人交流端用于对接保险代理人，所述客户交流端用于对接保险客户，所述方法包括：

所述代理人交流端通过第一链接访问保险方案网页，建立与同步交流服务器之间的通信连接；

所述代理人交流端响应于所述保险方案网页内的网页操作，基于所述网页操作进行网页同步数据采集，所述网页同步数据采集包括网页操作指令数据采集、网页内容数据采集中的一种或多种，基于所述网页操作指令数据和/或所述网页内容数据生成第一网页同步数据，将所述第一网页同步数据发送至至少一个客户交流端；

所述代理人交流端响应于第一Canvas中的涂鸦操作，基于所述涂鸦操作生成图片数据和/或Canvas绘制指令生成第一涂鸦同步数据，将所述第一涂鸦同步数据发送至至少一个客户交流端，其中，所述第一Canvas在所述保险方案网页内独立于方案内容创建；

所述代理人交流端采集音频和/或视频，生成音频数据流和/或视频数据流并传输至至少一个客户交流端；

所述第一网页同步数据由所述客户交流端接收并解析，获取所述第一网页同步数据中包含的网页操作指令数据，在所述客户交流端中执行所述网页操作指令；获取所述第一网页同步数据中包含的网页内容数据，基于所述网页内容数据，在所述客户交流端对相应的网页内容进行更新；

所述第一涂鸦同步数据由所述客户交流端接收并解析，获取其包含的图片或绘制指令，在所述客户交流端的第二Canvas上进行绘制，其中，所述第二Canvas在所述客户交流端的保险方案网页内独立于方案内容创建；

所述音频数据流和/或视频数据流由所述客户交流端接收并播放。

在本申请的一种实现方式中，所述交流端与同步交流服务器建立通信连接之后，还包括：

所述交流端监听到所述保险方案网页上的网页操作后，判断所述交流端的控制状态，根据所述控制状态执行以下判断并操作：

A.当为空闲状态时，向同步交流服务器发送同步交流操作权申请并经许可后获得所述同步交流操作权，并设置本交流端的控制状态为主控状态，执行所述网页操作，同时启动本交流端定时器开始计时操作，由所述同步交流服务器通知其他交流端将控制状态切换为受控状态；向同步交流服务器发送同步交流操作权申请并经驳回后，拦截所述网页操作；

B.当为受控状态时，拦截所述网页操作；

C.当为主控状态时，执行所述网页操作，并刷新所述定时器，重新开始计时。

在本申请上述实现方式中，启动所述定时器开始计时之后，还包括：

A在预设的时间阈值之内，监听到在所述保险方案网页上的用户操作后，刷新所述定时器重新开始计时；

B所述定时器计时达到预设的时间阈值，则设置本交流端的控制状态为空闲状态，并向同步交流服务器发送同步交流操作权交回通知，由所述同步交流服务器通知其他交流端将控制状态切换为空闲状态。

上述第一方面提供的技术方案中，基于所述网页操作进行网页同步数据采集之前，还包括：

获取所述网页操作在HTML文档内对应的节点，当判断所述节点含有屏蔽同步属性或其事件属性中含有屏蔽同步的方法，或者逐级查找所述节点的父节点，判断所述父节点含有屏蔽同步属性或其事件属性中含有屏蔽同步的方法时，放弃本次同步数据采集操作；其中，所述屏蔽同步属性与事件属性中的屏蔽同步的方法在制作所述保险方案网页时预先设置，为HTML文档节点设置所述屏蔽同步属性或在其事件属性中设置屏蔽同步的方法，用于在监听到发生于该节点的网页操作时，放弃针对所述网页操作的同步操作。

上述第一方面提供的技术方案中，基于所述网页操作进行网页同步数据采集之前，还包括：

获取所述网页操作在HTML文档内对应的节点N，将N作为当前节点，基于所述当前节点的属性，生成用于在所述HTML文档中标识节点N的标识信息，当判断所述标识信息在所述HTML文档中不唯一时，向上递归查找当前节点的父节点，按照节点路径将所述父节点与当前节点组合生成为新的当前节点，基于所述新的当前节点的属性，生成用于在所述HTML文档中标识节点N的标识信息，直到所述标识信息在所述HTML文档中唯一，返回所述节点标识信息；所述节点标识信息用于在被同步的交流端执行网页操作前，使用所述标识信息能够在保险方案网页内查找并定位到对应的HTML文档节点，在所述节点上执行所述网页操作。

第二方面，本申请提供了一种应用于保险方案的同步交流方法，应用于客户交流端，所述客户交流端用于对接保险客户，所述方法包括：

所述客户交流端通过第二链接访问保险方案网页，建立与同步交流服务器之间的通信连接；

当所述客户交流端的控制状态为主控状态时，所述客户交流端响应于针对所述保险方案网页的网页操作，基于所述网页操作进行网页同步数据采集，所述网页同步数据采集包括网页操作指令数据采集、网页内容数据采集中的一种或多种，基于所述网页操作指令数据和/或所述网页内容数据生成第二网页同步数据，将所述第二网页同步数据发送至其他交流端；

所述客户交流端响应于第二Canvas中的涂鸦操作，基于所述涂鸦操作生成图片数据和/或Canvas绘制指令生成第二涂鸦同步数据，其中，所述第二Canvas在所述保险方案网页内独立于方案内容创建；

所述客户交流端采集音频和/或视频，生成音频数据流和/或视频数据流并传输至其他交流端；

所述第二网页同步数据由其他交流端接收并解析，获取所述第二网页同步数据中包含的网页操作指令数据，在其他交流端中执行所述网页操作指令数据；获取所述第二网页同步数据中包含的网页内容数据，基于所述网页内容数据，在其他交流端对相应的网页内容进行更新；

所述第二涂鸦同步数据由其他交流端接收并解析，获取其包含的图片或绘制指令，在所述其它交流端的第一Canvas或第二Canvas上进行绘制；

所述音频数据流和/或视频数据流由其它交流端接收并播放。

第三方面，本申请提供了一种应用于保险方案的同步交流方法，所述方法应用于客户交流端，所述方法包括：

所述客户交流端通过第二链接访问保险方案网页，建立与同步交流服务器之间的通信连接；

所述客户交流端监听到所述保险方案网页中的网页操作后，拦截所述网页操作并对其进行网页操作指令数据采集，获取所述网页操作指令数据并生成第三网页同步数据，将所述第三网页同步数据发送至代理人交流端；

所述第三网页同步数据由所述代理人交流端接收并解析，获取其包含的网页操作指令数据，在所述代理人交流端中执行所述网页操作指令。

在本申请上述第一方面、第二方面、第三方面的一些实施例中，生成网页同步数据之前，还包括：

在HTML文档中使用自定义尺寸创建网页容器，将所述交流端保险方案网页内容置入所述网页容器，根据所述网页内容包含的自适应布局或响应式布局适配所述网页容器进行显示，基于所述网页容器的显示结果计算所述网页内容数据、所述网页操作指令数据；其中，所述网页容器尺寸同时兼容各交流端设备的网页显示尺寸与比例，在同步交流过程中，各交流端网页基于所述网页容器尺寸设置，其包含的HTML元素显示区域与位置、网页操作执行位置保持一致，或者，所述网页容器尺寸同时兼容各交流端设备的网页显示比例，在同步交流过程中，各交流端网页基于所述网页容器尺寸应用CSS3设置zoom属性进行缩放，其包含的HTML元素显示区域与相对位置、网页操作执行相对位置保持一致。

第四方面，本申请提供了一种应用于保险方案的同步交流系统，所述系统包括：代理人交流端、至少一个客户交流端、同步交流服务器。

其中，所述代理人交流端，包括保险方案网页、第一同步交流单元，所述保险方案网页包括方案内容、用于进行涂鸦操作的第一Canvas，所述第一同步交流单元包括：

网页操作监听模块，监听所述保险方案网页上的网页操作；

网页操作采集模块，基于所述网页操作进行对应的网页操作指令数据采集；

网页内容采集模块，基于所述网页操作执行网页内容数据采集；

涂鸦操作模块，采集同步交流过程中所述第一Canvas上的用户涂鸦信息，同时根据其它交流端的涂鸦信息在所述第一Canvas上执行绘制；

音视频采集模块，执行所述保险代理人交流端的音频和/或视频采集；

同步操作控制模块，执行同步交流过程中所述代理人交流端的控制，所述控制包括：网页操作控制、涂鸦控制、音频和/或视频采集与播放控制、控制状态显示，所述控制状态包括主控状态、空闲状态、受控状态；

第一同步通信模块，将网页同步数据、涂鸦同步数据、音频流数据和/或视频流数据、控制数据发送至所述同步交流服务器。

其中，所述客户交流端，包括保险方案网页、第二同步交流单元，所述保险方案网页包括方案内容、用于进行涂鸦操作的第二Canvas，所述第二同步交流单元包括：

网页操作解析模块，接收并解析所述同步数据，获取其包含的网页操作指令数据与网页内容数据；

网页操作指令执行模块，执行所述同步数据中包含的网页操作指令；

网页内容更新模块，基于所述同步数据中包含的网页内容数据对所述保险方案网页的网页内容进行更新；

涂鸦操作模块，采集同步交流过程中所述第二Canvas上的用户涂鸦信息，同时根据其它交流端的涂鸦信息在所述第二Canvas上执行绘制；

音视频播放模块，接收所述音频流数据和/或视频流数据并播放；

同步操作控制模块，执行同步交流过程中所述客户交流端的控制，所述控制包括：网页操作控制、涂鸦控制、音频和/或视频采集与播放控制、控制状态显示，所述控制状态包括主控状态、空闲状态、受控状态；

第二同步通信模块，从所述同步交流服务器接收网页同步数据、涂鸦同步数据、音频流数据和/或视频流数据、控制数据。

其中，所述同步交流服务器，包括：

同步交流控制服务单元，用于接收和发送控制数据，提供同步交流控制服务，至少包括操作权限分配模块，所述操作权限分配模块用于分配所述交流端的同步交流操作权，并确保在同一时刻内所述同步交流系统中仅存一个交流端拥有所述同步交流操作权，

通信服务单元，用于与所述交流端通信，包括网页操作同步通信服务模块、涂鸦同步通信服务模块、音视频通信服务模块，所述网页操作同步通信服务模块用于接收或发送所述网页同步数据，所述涂鸦同步通信服务模块用于接收或发送涂鸦同步数据、所述音视频通信服务模块用于接收和发送音频流数据和/或视频流数据。

在本申请第四方面的一些实施方式中，上述系统中所述第二同步交流单元还包括网页操作监听模块、网页操作指令采集模块，所述第一同步交流单元还包括网页操作解析模块、网页操作指令执行模块。所述网页操作同步通信服务模块还包括，接收到第三网页同步数据后，发送至所述第一同步通信服务模块。

其中，所述网页操作监听模块，监听所述客户交流端中的网页操作，当所述客户交流端的控制状态为受控状态时，拦截所述网页操作，当所述客户交流端的控制状态为主控状态时，调用所述网页操作指令采集模块采集网页操作指令数据。

其中，所述网页操作指令采集模块，基于所述网页操作进行网页操作指令数据采集，并由所述第二同步通信模块将所采集的网页操作指令数据作为第三网页同步数据发送至所述网页操作同步通信服务模块。

其中，所述网页操作解析模块，解析第一同步通信服务模块接收的第三网页同步数据。

其中，所述网页操作指令执行模块，执行所述网页操作解析模块所解析的网页操作指令，并根据第一方面提供的方法，由所述代理人交流端响应于所述网页操作指令执行对应的网页操作，进行网页操作同步。

本申请实施例提供的方案，代理人交流端采集保险代理人的网页操作、涂鸦操作数据，并发送至客户对应的客户交流端进行解析并还原为对应操作，相应的，客户交流端也可以采集客户的网页操作、涂鸦操作数据并发送至代理人交流端，另外包括音视频交流通信，从而实现了保险代理人与客户针对保险方案的同步交流，模拟了线下保险业务开展的现场沟通场景，有助于客户更深入地理解保险方案，增强了保险代理人和客户的沟通效果。

附图说明

图1为本申请实施例提供的一种应用于保险方案的同步交流系统的架构示意图；

图2为本申请实施例提供的一种应用于保险方案的同步交流方法的活动图；

图3为本申请实施例提供的同步交流方法中的交流端在不同控制状态下执行操作的活动图；

图4为本申请实施例交流端在主控状态下的一种定时器运行及相关控制的状态图；

图5为本申请实施例提供的一种针对屏蔽同步的属性或方法的处理流程图；

图6为本申请实施例提供的一种针对HTML文档中的节点建立唯一标识的流程图；

图7为本申请实施例提供的一种应用于保险方案的同步交流方法的活动图；

图8为本申请实施例提供的一种应用于保险方案的同步交流方法的活动图；

图9为本申请实施例提供的一种使用自定义尺寸创建网页容器进行同步数据采集的处理流程图；

图10为本申请实施例提供的一种应用于保险方案的同步交流系统的模块组成图。

具体实施方式

本申请的实施方式部分仅用于对本申请进行解释，而非旨在限制本申请。

本申请所提供的一种应用于保险方案的同步方法及系统，旨在以保险方案为例说明技术实现原理，同样的技术可适用于金融以及其它领域的交流场景，不应因此而限制本申请。

下面结合附图，对本申请的实施例进行描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。本领域普通技术人员可知，随着技术的发展和新场景的出现，本申请实施例提供的技术方案对于类似的技术问题，同样适用。

如图1所示，本发明实施例提供了一种应用于保险方案的同步交流系统，系统中包括代理人交流端、同步交流服务器和至少一个客户交流端，代理人交流端和客户交流端运行在具有网络通信功能的智能设备上，如手机、笔记本电脑、台式电脑等，同步交流服务器可以为单一服务器，也可以是多个服务器组成的服务器集群，同步交流服务器和交流端通过互联网进行连接。

实施例一，本实施例基于上述的同步交流系统提供了一种应用于保险方案的同步交流方法，参考图2所示，所述方法由所述代理人交流端执行同步操作，同步至客户交流端，具体包括：

步骤S201，所述代理人交流端通过第一链接访问保险方案网页，建立与同步交流服务器之间的通信连接；

步骤S202，所述代理人交流端响应于所述保险方案网页中的网页操作；

步骤S203，所述代理人交流端基于所述网页操作进行网页同步数据采集，所述网页同步数据采集包括网页操作指令数据采集、网页内容数据采集中的一种或多种；

步骤S204，将所采集的网页操作指令数据和/或网页内容数据生成第一网页同步数据，并将所述第一网页同步数据发送至至少一个客户交流端；

步骤S205，所述代理人交流端响应于第一Canvas上的涂鸦操作；

步骤S206，基于所述涂鸦操作生成图片数据和/或Canvas绘制指令；

步骤S207，将图片数据和/或Canvas绘制指令生成第一涂鸦同步数据并发送至至少一个客户交流端；

步骤S208，所述代理人交流端采集音频和/或视频；

步骤S209，生成音频数据流和/或视频数据流并传输至至少一个客户交流端；

步骤S210，所述客户交流端接收并解析第一网页同步数据；

步骤S211，所述客户交流端获取网页操作指令数据，执行所述网页操作指令；

步骤S212，所述客户交流端获取网页内容数据，更新相应的网页内容；

步骤S213，所述客户交流端接收并解析第一涂鸦同步数据；

步骤S214，所述客户交流端在第二Canvas上执行绘制；

步骤S215，所述客户交流端接收所述音频和/或视频数据流并播放。

根据本发明实施例上述步骤，实现了向客户交流端同步代理人交流端上的操作，具体的，在步骤S201中，建立与同步交流服务器之间的通信连接可通过访问第一链接，打开保险方案网页，启动与客户交流端之间的同步交流时建立。所述第一链接、第二链接的形式可以为URL链接、二维码等，在制作保险方案网页时生成，第一链接供保险代理人使用，第二链接供客户使用。可选地，所述第一链接、第二链接可为同一链接。

在第一链接和第二链接生成后，会在同步交流服务器中进行注册并为两个链接建立对应关系，当保险代理人访问第一链接后，则代理人交流端与同步交流服务器建立如socket通信连接。本实施例的一种优选的实施方式中，保险代理人分享第二链接至客户端，所述客户交流端访问第二链接后，发送回执至所述代理人交流端，所述代理人交流端收到回执后打开所述第一链接，该实施方式有利于在客户阅读方案时建立与代理人之间的同步交流。

当代理人交流端和同步交流服务器建立通信连接后，执行步骤S202，在保险方案网页加载时，代理人交流端会在保险方案网页DOM事件流的捕获阶段注册事件监听(addEventListener/attachEvent)，所述事件监听用于监听在保险方案网页上的网页操作。所述网页操作包括点击、触摸、滑动、输入、拖拽、鼠标移动、触摸移动等，同时还包括非用户操作引起的网页程序自动执行的网页操作，包括但不限于定时器执行程序、网页加载触发的执行程序、浏览器触发的执行程序、异步执行程序、外部触发的执行程序、回调执行程序等，但不包括为实现本方法(同步交流)而执行的相关网页操作，如音视频开关、涂鸦开关等。当监听到上述操作发生后，执行触发该操作的DOM节点上对应类型的回调函数，所述回调函数中包含预设的用于同步处理的业务逻辑，例如当点击某一按钮后，将监听到在该按钮＜button＞节点上的click(鼠标点击)事件，并且触发click事件对应的回调函数。

对应步骤S203中的网页同步数据采集，包括网页指令数据采集与网页内容数据采集。其中网页指令数据采集，当执行某一操作类型的回调函数时，在回调函数中接收一个基于操作事件的事件对象(event)作为参数，代理人交流端基于此事件对象进行网页操作指令数据采集。在进行操作指令数据采集时，首先获取事件对象的事件类型(event.type)以及触发事件的DOM节点(event.target)，对于不同类型的操作事件，进一步地还将获取对应操作事件的相关数据，根据操作事件及其相关数据生成为操作指令。

上述操作事件及其相关数据，具体的，当用户执行与＜input＞、＜textarea＞等标签相关的操作时(例如文本输入、文件上传、日期选择、下拉菜单选择等)，将监听到change、input事件，在获取触发事件的DOM节点后还将获取其中的节点值(target.value)，此节点值对应用户操作的值，如用户输入的文字、用户上传的文件、用户选择的选项等。当用户执行网页滚动时，将监听到scroll事件，并根据发生滚动的DOM节点获取滚动后的相关数据，可以包括但不限于DOM节点的属性值(scrollTop、scrollLeft、scrollHeight、scrollWidth等)、DOM节点的样式值(2D转换、3D转换、多列、过渡、动画等)、滚动过程执行的时间、滚动执行的速度，上述滚动相关数据值用于客户交流端在执行此滚动事件时，可以实现和代理人交流端动画效果、滚动位置等相同。当用户进行触摸移动时，还会监听到触摸开始事件(touchStart)、触摸移动事件(touchMove)、触摸结束事件(touchEnd)，此时会根据上述触摸事件的事件对象event中包含的事件属性进行计算，事件属性包括当前屏幕上所有触摸点的列表(touches)、当前网页节点上所有触摸点(targetTouches)、涉及触发此事件的触摸点的列表(changedTouches)；根据触摸事件的相关属性计算获得触摸前后的位置和触摸路径，以及当前鼠标指针的停留位置。

对应步骤S203中的网页同步数据采集的另一种采集形式，网页内容数据采集，如：当网页操作发生后，采集所述网页操作引起的网页内容(HTML文档内容)改变部分的数据作为网页同步数据。

步骤S205中，所述第一Canvas在所述保险方案网页内独立于方案内容创建，用于采集代理人涂鸦讲解操作数据。优选地，所述保险方案网页内包含涂鸦功能开关控制按钮，涂鸦功能开启后，拦截所有针对保险方案内容的网页操作并停止上述网页操作监听，开始监听所述保险代理人的涂鸦操作并采集所述涂鸦操作的操作数据。

所述涂鸦操作数据包括涂鸦相关属性、涂鸦位置、涂鸦路径、涂鸦时间中的一种或多种。用户可以通过移动鼠标或触摸屏幕进行涂鸦操作，此时会监听到鼠标按键按下事件(mouseDown)、鼠标移动事件(mouseMove)、鼠标按键松开事件(mouseUp)或开始触摸事件(touchStart)、触摸移动事件(touchMove)、触摸结束事件(touchEnd)等，并按照相应的事件和执行轨迹调用Canvas绘图API执行轨迹绘制，同时根据不同事件触发的时间点，记录开始时的坐标信息(startX，startY)以及轨迹移动过程中相对位置的坐标信息(offsetX，offsetY)。步骤S206基于上述涂鸦过程采集生成Canvas绘制指令(或绘制指令集合)或将所述涂鸦的结果生成为图片数据。

步骤S207，基于步骤S206所采集的信息，生成第一涂鸦同步数据发送至交流端。一种可选的实施方式中，在步骤S206生成的数据基础上直接发送至交流端。

步骤S208采集代理人交流端的音频/视频数据，经步骤S209生成音频/视频数据流传输至交流端。一种可选的实施方式中，实时音视频程序通过引入如WebRTC等API并进行重新封装后实现。另一种可选的实施方式中，直接使用第三方音视频通信方式取代，如电话、微信语音通话、视频通话。

在本实施例的一种可能的实现方式中，还包括根据交流端的控制状态处理网页操作，参考图3所示，具体步骤为：

S301，所述交流端监听到所述保险方案网页上的网页操作后，判断所述交流端的控制状态；

S302，当为主控状态时，执行所述网页操作，并刷新所述定时器，重新开始计时；

S303，当为受控状态时，拦截所述网页操作；

S304，当为空闲状态时，向同步交流服务器发送同步交流操作权申请；

S305，同步交流服务器接收同步交流操作权申请并处理；

S306，同步交流服务器驳回申请后，拦截所述网页操作；

S307，同步交流服务器同意申请后，设置本交流端的控制状态为主控状态，执行所述网页操作，同时启动本交流端定时器开始计时操作；

S308，同步交流服务器发送消息通知其他交流端将控制状态切换为受控状态。

上述实施方式应用于同步交流系统中的任意一端，本实施方式中根据交流端的控制状态确定同步交流操作权，控制状态包括主控、受控、空闲三种状态。在同步交流系统中仅存在一端具有同步交流操作权，即在同步交流过程中拥有执行网页操作的权利，所执行的网页操作被同步到其它交流端，同步交流操作权可以在同步交流系统中流转，本实施方式目的在于保证仅有一位用户可以进行网页操作，执行的操作不被干扰。本实施方式中存在如下场景：

A.仅一个交流端控制状态为主控状态，具有同步交流操作权，可以执行网页操作并同步，其余交流端均为受控状态，无法执行网页操作。

B.所有交流端控制状态均为空闲状态，都不具有同步交流操作权，此时所有交流端都可以执行网页操作，发起获取同步交流操作权申请。

在上述A场景中，当具有同步交流操作权的一端在预设时间内未执行网页操作时，将失去同步交流操作权，同时所有交流端的控制状态都变为空闲状态，变为B场景。

在上述B场景中，当某一交流端首先执行网页操作并且被授予同步交流操作权后，该交流端将从空闲状态变为主控状态，同时其他交流端都变为受控状态，变为A场景。

具体的，对应步骤S301，当交流端监听到在保险方案网页上用户进行网页操作后，对本交流端的控制状态进行判断，根据不同控制状态执行对应步骤。优选地，各交流端的控制状态由同步交流服务器统一控制。

当本交流端为主控状态时，执行步骤S302，监听到网页操作后执行并同步至其他交流端，同时，刷新当前定时器，重新开始计时，如：执行clearTimeout清空本交流端当前定时器，然后执行setTimeout重新设置本交流端定时器启动。

当本交流端为受控状态时，对应步骤S303，监听到网页操作后，拦截所述网页操作，同时从而不响应所述网页操作的同步操作。

当本交流端为空闲状态时，对应步骤S304，首先向同步交流服务器发送申请，用于请求同步交流操作权，当同步交流服务器接收到申请后，对应步骤S305，将处理上述同步交流操作权申请，申请结果包括同意和驳回，其中处理条件可在同步交流服务器中预先设置(例如预设客户交流端无法获取，或某一交流端无法获取，按照请求时间顺序优先获取等)，当申请结果为驳回时，执行步骤S306，本交流端控制状态保持不变，同时拦截本次监听到的网页操作；当申请结果为同意时，执行步骤S307，本交流端将控制状态修改为主控状态，同时执行本次网页操作并同步至其他交流端，同时重新启动定时器计时。在同步交流服务器同意申请时，还包括步骤S308，如：通过websocket广播的方式向其他交流端发送消息通知，将其他交流端的控制状态切换为受控状态。

在本实施例一种可能的实施方式中，还包括用户主动控制同步交流操作权转移，如：代理人交流端主动移交同步交流操作权，当代理人交流端为主控状态时，在网页同步数据中加入操作权移交指令并发送给对应的客户交流端，当客户交流端解析到同步数据中的操作权移交指令时，将当前控制状态切换为主控状态，并通知所述代理人交流端将其控制状态切换为受控状态，从而实现同步交流操作权的主动转移；又如：客户交流端主动申请同步交流操作权，当代理人交流端为主控状态客户交流端为受控状态时，客户交流端在网页同步数据中加入操作权申请指令并发送给代理人交流端，代理人交流端解析到同步数据中的操作权申请指令时，执行是否同意授予该客户交流端操作权操作，当同意该申请时，则将代理人交流端控制状态切换为受控状态并通知对应客户端切换为主控状态，从而实现客户交流端向代理人主交流端申请同步交流操作权。

在本实施例的一种可能的实施方式中，参考图4，上述定时器启动计时后，还包括步骤：

S401，所述交流端进入主控状态；

S402，启动或重新启动定时器开始计时；

S403，监听网页操作，所述网页操作一般为用户操作；

S404，监听到网页操作后，执行步骤S402重新启动定时器计时；

S405，所述定时器计时到达指定的时间阈值；

S406，进入空闲状态，并向同步交流服务器发送控制权交回通知。

对应步骤S401，所述交流端进入主控状态后，执行步骤S402启动定时器开始计时，如：执行setTimeout(cb，time)启动本交流端定时器，其中参数time为预设的时间阈值，表示计时的时长，参数cb为定时器触发时执行的回调函数。在定时器计时时间未达到预设时间阈值时间范围内，若监听到网页操作，则执行clearTimeout清空本交流端定时器取消当前计时，并执行setTimeout重新启动定时器开始计时，可选地，可设定在监听到网页操作的时间点或网页操作完成后的时间点重新启动定时器开始计时，具体根据网页操作的性质进行设置，如对于一用时较长的网页操作，如文件下载，设置为在网页操作完成后重启定时器计时，当监听到用户点击文件下载按钮后，首先暂停定时器计时，当文件下载完成后，重启定时器计时，防止因用时较长的网页操作超过指定的时间阈值导致控制权被收回的情况；对应步骤S405，当定时器计时达到预设的时间阈值时，则触发定时器回调函数cb执行步骤S406，将控制状态切换为空闲状态，并向同步交流服务器发送通知交回同步交流操作权。

在本实施例的另一种可能的实施方式中，还包括在一次交流端获得控制权后，对本次控制的总时长进行限制，在步骤S402中，启动另外一个计算总体时长的计时器开始计时，当判断超过所设定的总时长后，提醒用户或强制回收控制权。

本实施例还提供了一种可能的实施方式，对于不需要在交流过程中进行同步的网页操作，为其对应的HTML节点建立屏蔽属性，或在其对应的HTML节点的事件属性中建立屏蔽同步的方法，按照以下步骤处理，参考图5所示，包括：

S501，获取网页操作在HTML文档内对应的节点并设置为当前节点；

S502，查找当前节点是否含有屏蔽同步属性或其事件属性中含有屏蔽同步的方法；

S503，根据S502的查找结果进行判断，当含有屏蔽同步属性或方法时，执行步骤S504，否则，执行步骤S505；

S504，放弃本次网页操作的同步数据采集操作；

S505，查找当前节点的父节点；

S506，判断查找结果，当找到父节点时执行步骤S507，否则执行步骤S508；

S507，将父节点设置为当前节点；

S508，执行本次网页操作的同步数据采集操作。

在本实施方式中，通过上述步骤实现根据用户自定义或系统预设等条件屏蔽部分网页操作的同步，具体的，步骤S501，当监听到网页操作时，根据对应回调函数中作为参数的事件对象event中获取触发此网页操作的DOM节点(event.target)，获取DOM节点后，将所述节点设置为当前节点，然后执行步骤S502，根据DOM节点的属性进行判断分析，查找DOM节点的数据属性(target.dataset)中是否包含预设的屏蔽属性，屏蔽属性在制作保险方案网页时预先添加，例如，制作时按照如下方式设置DOM节点：

＜div data－sync＝”ignore”＞＜/div＞

其中data－sync为系统预设属性，ignore为系统预设的用于表示屏蔽的属性值。

可选地，在网页数据或程序配置中，配置需屏蔽同步的节点集合，在执行同步时，确定所述节点属于所述集合，则放弃本次网页操作的同步数据采集操作。

可选的，还可根据此DOM节点事件属性中是否包含屏蔽同步的方法，例如，DOM节点为：

＜div onclick＝”method1”＞＜/div＞

其中onclick为点击事件属性，method1为预定义的屏蔽同步的方法，或method1在执行过程中调用了预定义的屏蔽同步的方法，在此DOM节点上触发点击事件执行method1，放弃本次网页操作的同步数据采集操作。

在上述步骤S502未找到当前节点屏蔽属性或方法的情况下，步骤S503中的结果为空，则执行步骤S505逐级查找当前节点的父节点，将所述父节点设置为当前节点，递归执行步骤S502的判断，直到所有父节点均不包含屏蔽属性且其事件属性中不含有屏蔽同步的方法时，执行此DOM节点上对应网页操作的同步数据采集操作，否则，放弃本次网页操作的同步数据采集操作。上述实施方式目的在于，当某一DOM节点设置屏蔽条件后，其所有子节点都会屏蔽网页操作同步，例如在保险方案网页中某一区域中的网页操作都不需要进行同步时，则为此区域的容器节点设置屏蔽条件即可，无需为区域中每个节点都设置屏蔽条件。

本实施例还提供了一种优选的实施方式，用于为执行网页操作对应的HTML节点建立唯一的标识信息，以便在其他交流端通过所述标识获取节点，参考图6所示，以下具体包括步骤：

S601，获取所述网页操作在HTML文档内对应的节点N；

S602，将节点N设置为当前节点；

S603，基于当前节点的属性，生成在所述HTML文档中用于标识N的标识信息；

S604，判断所述标识信息在HTML文档中是否唯一，当唯一时执行步骤S605，否则执行步骤S606；

S605，返回在所述HTML文档中用于标识N的标识信息；

S606，查找当前节点的父节点；

S607，按照节点路径将父节点与当前节点组合生成节点组合；

S608，将节点组合设置为当前节点；

以上步骤S603，生成用于在所述HTML文档中用于标识N的标识信息，其主要的目的在于能够通过所述标识信息查找到唯一的节点N。

步骤S604中判断所述标识信息在HTML文档中是否唯一，其判断方法如，通过所述标识信息在所述HTML文档中进行查找，判断查找结果是否为N且查找结果唯一。在实际实施中，HTML节点的id属性一般为唯一属性，如果节点包含id属性，则可将该属性作为唯一标识；name属性为非唯一属性，如果执行getElementByName所获得的结果唯一，则可将该属性视为唯一标识；通过节点类型和序号组合生成唯一标识，如，HTML中的第3个div节点下的第2个span节点。

步骤S607中，按照节点路径将父节点与当前节点组合生成节点组合，在步骤S603中生成标识信息，所述标识信息综合了该组合各节点的标识，举例说明：节点M其包含多个span类型节点，其中第2个span为节点N，节点M具有id属性“mid”，则通过该节点组合，为节点N生成的标识信息为“id－mid－span－2”，其中“id”表示该标识具有id属性“mid”，通过查找获得M后，在其子节点中查找span类型节点，并获取其中第2个节点，即为N节点。

在步骤S603中，如当前节点包含HTML文档的根节点，根据上述节点组合的标识生成方法，可保证当前的N节点标识信息一定唯一。

以上步骤采用针对当前节点，逐级查找父节点，并将所述父节点与当前节点组合，再次生成当前节点的递归查找的方式获取节点N的唯一标识信息。

实施例二，本实施例提供了另一种应用于保险方案的同步交流方法，参考图7所示，所述方法由客户交流端执行同步操作，同步至代理人交流端及其它客户交流端，具体包括：

步骤S701，所述客户交流端通过第二链接访问保险方案网页，建立与同步交流服务器之间的通信连接；

步骤S702，所述客户交流端响应于所述保险方案网页中的网页操作；

步骤S703，所述客户交流端基于所述网页操作进行网页同步数据采集，所述网页同步数据采集包括网页操作指令数据采集、网页内容数据采集中的一种或多种；

步骤S704，将所采集的网页操作指令数据和/或网页内容数据生成第二网页同步数据，并将所述第二网页同步数据发送至代理人交流端和其它客户交流端；

步骤S705，所述客户交流端响应于第二Canvas上的涂鸦操作；

步骤S706，基于所述涂鸦操作生成图片数据和/或Canvas绘制指令；

步骤S707，将图片数据和/或Canvas绘制指令生成第二涂鸦同步数据并发送至代理人交流端和其它客户交流端；

步骤S708，所述客户交流端采集音频和/或视频；

步骤S709，生成音频数据流和/或视频数据流并传输至代理人交流端和其它客户交流端；

步骤S710，所述代理人交流端接收并解析第二网页同步数据；步骤S710－2，其它客户交流端接收并解析第二网页同步数据；

步骤S711，所述代理人交流端获取网页操作指令数据，执行所述网页操作指令；步骤S711－2，其它客户交流端获取网页操作指令数据，执行所述网页操作指令；

步骤S712，所述代理人交流端获取网页内容数据，更新相应的网页内容；步骤S712－2，其它客户交流端获取网页内容数据，更新相应的网页内容；

步骤S713，所述代理人交流端接收并解析第二涂鸦同步数据；步骤S713－2，其它客户交流端接收并解析第二涂鸦同步数据；

步骤S714，所述代理人交流端在第一Canvas上执行绘制；步骤S714－2，其它客户交流端在第二Canvas上执行绘制；

步骤S715，所述代理人交流端接收所述音频和/或视频数据流并播放；步骤S715－2，其它客户交流端接收所述音频和/或视频数据流并播放。

在本实施中，屏蔽部分网页操作的同步、为执行网页操作对应的HTML节点建立唯一的标识信息，与实施例一原理相同，在此不再赘述。

根据本发明实施例上述步骤，实现了在客户交流端执行操作，向代理人交流端、其它客户交流端同步的操作。可选地，所述代理人交流端访问的第一链接、所述客户交流端访问的第二链接可为同一链接。

实施例三，本实施例提供了另一种应用于保险方案的同步交流方法，参考图8所示，所述方法由客户交流端执行网页操作，所述网页操作并不实际执行，而是将网页操作同步至代理人交流端，由所述代理人交流端代理执行，再同步客户交流端，具体包括：

S801，所述客户交流端监听用户对保险方案网页的网页操作；

S802，所述客户交流端拦截监听到的所述网页操作；

S803，所述客户交流端根据监听到的网页操作，进行网页操作指令数据采集；

S804，所述客户交流端将所采集的网页操作指令数据生成第三网页同步数据并发送至代理人交流端；

S805，所述代理人交流端接收并解析第三网页同步数据；

S806，所述代理人交流端根据所解析的第三网页同步数据，获取网页操作指令数据，执行所述网页操作指令；

S807，所述代理人交流端响应于S806步骤的网页操作，按照实施例一提供的方法进行网页操作同步。

在以上所有实施例中，所述代理人交流端、客户交流端所使用的设备及浏览器可能存在差异，优选地，本申请提供了一种可选的实施方式，以解决所述差异导致的同步质量问题，参考图9，在执行同步操作的交流端，按以下步骤执行：

S901，在HTML文档中使用自定义尺寸创建网页容器；

S902，将保险方案网页内容置入网页容器，根据保险方案网页内容包含的自适应布局或响应式布局，在网页容器显示中适配显示；

S903，基于网页容器内的显示计算网页内容数据、所述网页操作指令数据；

S904，将用于涂鸦的Canvas的尺寸设置为网页容器尺寸；

S905，基于所述Canvas采集涂鸦操作数据。

其中，步骤S901中的网页容器，主要特征在于可放置网页内容，如HTML中的div标签、网页组件等。自定义网页容器，还包括对其参数进行设置，所设置信息如：尺寸、字体、是否支持缩放、文字缩放百分比等。优选地，所述网页容器尺寸同时兼容各交流端设备的网页显示尺寸与比例，在同步交流过程中，各交流端网页基于所述网页容器尺寸设置。如：代理人交流端采用PC设备，其浏览器分辨率为1920＊1080，客户交流端为移动设备，其分辨率为720＊1080，则在代理人交流端按照720＊1080分辨率对应的尺寸构建网页容器，执行步骤S902将保险方案网页内容置入该容器，所述网页内容包含自适应布局，经浏览器渲染后获得新的网页内容显示效果，执行步骤S903基于新的网页内容显示效果采集网页同步数据，由此，两个交流端包含的HTML元素显示区域与相对位置、网页操作执行相对位置保持一致，获得高质量的同步效果。

对应地，步骤S904设置用于涂鸦的Canvas与网页容器的尺寸保持一致，从而保证了各交流端中用于涂鸦的Canvas尺寸一致，步骤S905基于所述Canvas采集涂鸦数据，最终在各交流端生成相同或成比例的涂鸦操作效果。

实施例四，为本发明系统实施例，可以用于执行本申请方法实施例。对于本发明系统实施例中未披露的细节，请参照本发明方法实施例。

参考图10，所述系统包括：

代理人交流端101、至少一个客户交流端103、同步交流服务器102。

其中，代理人交流端101，包括第一同步交流单元1011、方案网页1012；

保险方案网页1012包括方案内容10121、用于进行涂鸦操作的第一Canvas10122；

第一同步交流单元1011包括：

网页操作监听模块10111，监听10121上的网页操作；

网页操作采集模块10112，基于所述网页操作进行对应的网页操作指令数据采集；

网页内容采集模块10113，基于所述网页操作执行网页内容数据采集；

涂鸦操作模块10114，采集同步交流过程中10122上的用户涂鸦信息，同时根据其它交流端的涂鸦信息在10122上执行绘制；

音视频采集模块10115，执行所述保险代理人交流端的音频和/或视频采集；

同步操作控制模块10116，执行同步交流过程中所述代理人交流端的控制，所述控制包括：网页操作控制、涂鸦控制、音频和/或视频采集与播放控制、控制状态显示，所述控制状态包括主控状态、空闲状态、受控状态；

第一同步通信模块10117，将网页同步数据、涂鸦同步数据、音频流数据和/或视频流数据、控制数据发送至102；

所述网页操作解析模块10118，解析10117接收的第三网页同步数据；

所述网页操作指令执行模块10119，执行10118所解析的网页操作指令，并根据实施例一提供的方法，由所述代理人交流端响应于所述网页操作指令执行对应的网页操作，进行网页操作同步。

其中，客户交流端103，包括保险方案网页1032、第二同步交流单元1031。

保险方案网页1032，包括方案内容10321、用于进行涂鸦操作的第二Canvas10322；

第二同步交流单元1031包括：

网页操作解析模块10311，接收并解析所述同步数据，获取其包含的网页操作指令数据与网页内容数据；

网页操作指令执行模块10312，执行所述同步数据中包含的网页操作指令；

网页内容更新模块10313，基于所述同步数据中包含的网页内容数据对所述保险方案网页的网页内容进行更新；

涂鸦操作模块10314，采集同步交流过程中10322上的用户涂鸦信息，同时根据其它交流端的涂鸦信息在10322上执行绘制；

音视频播放模块10315，接收所述音频流数据和/或视频流数据并播放；

同步操作控制模块10316，执行同步交流过程中所述客户交流端的控制，所述控制包括：网页操作控制、涂鸦控制、音频和/或视频采集与播放控制、控制状态显示，所述控制状态包括主控状态、空闲状态、受控状态；

第二同步通信模块10317，从102接收网页同步数据、涂鸦同步数据、音频流数据和/或视频流数据、控制数据。

网页操作监听模块10318，监听所述客户交流端中的网页操作，当所述客户交流端的控制状态为受控状态时，拦截所述网页操作，当所述客户交流端的控制状态为主控状态时，调用所述网页操作指令采集模块采集网页操作指令数据；

网页操作指令采集模块10319，基于所述网页操作进行网页操作指令数据采集，并由10317将所采集的网页操作指令数据作为第三网页同步数据发送至所述网页操作同步通信服务模块10221；

其中，同步交流服务器102，包括同步交流控制服务单元1021、通信服务单元1022。

同步交流控制服务单元1021，用于接收和发送控制数据，提供同步交流控制服务，至少包括操作权限分配模块10211，10211用于分配所述交流端的同步交流操作权，并确保在同一时刻内所述同步交流系统中仅存一个交流端拥有所述同步交流操作权，

通信服务单元1022，用于与所述交流端通信，包括网页操作同步通信服务模块10221、涂鸦同步通信服务模块10222、音视频通信服务模块10223，10221用于接收或发送所述网页同步数据，10222用于接收或发送涂鸦同步数据、10223用于接收和发送音频流数据和/或视频流数据。

以上所述，仅为本申请实施例的具体实施方式，但本申请实施例的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请实施例揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请实施例的保护范围之内。因此，本申请实施例的保护范围应以所述权利要求的保护范围为准。

Claims (2)

1.一种应用于保险方案的在线同步交流方法，其特征在于，应用于同步交流系统，所述同步交流系统还包括代理人交流端、客户交流端、同步交流服务器，所述代理人交流端用于对接保险代理人，所述客户交流端用于对接保险客户，所述方法包括：

所述代理人交流端通过第一链接访问保险方案网页，建立与同步交流服务器之间的通信连接；

所述代理人交流端响应于所述保险方案网页内的网页操作，基于所述网页操作进行网页同步数据采集，所述网页同步数据采集包括网页操作指令数据采集、网页内容数据采集中的一种或多种，基于所述网页操作指令数据和/或所述网页内容数据生成第一网页同步数据，将所述第一网页同步数据发送至至少一个客户交流端；

所述代理人交流端响应于第一Canvas中的涂鸦操作，基于所述涂鸦操作生成图片数据和/或Canvas绘制指令生成第一涂鸦同步数据，将所述第一涂鸦同步数据发送至至少一个客户交流端，其中，所述第一Canvas在所述保险方案网页内独立于方案内容创建；

所述代理人交流端采集音频和/或视频，生成音频数据流和/或视频数据流并传输至至少一个客户交流端；

所述第一网页同步数据由所述客户交流端接收并解析，获取所述第一网页同步数据中包含的网页操作指令数据，在所述客户交流端中执行所述网页操作指令；获取所述第一网页同步数据中包含的网页内容数据，基于所述网页内容数据，在所述客户交流端对相应的网页内容进行更新；

所述第一涂鸦同步数据由所述客户交流端接收并解析，获取其包含的图片或绘制指令，在所述客户交流端的第二Canvas上进行绘制，其中，所述第二Canvas在所述客户交流端的保险方案网页内独立于方案内容创建；

所述音频数据流和/或视频数据流由所述客户交流端接收并播放；

在所述交流端与同步交流服务器建立通信连接之后，还包括：

所述交流端监听到所述保险方案网页上的网页操作后，判断所述交流端的控制状态，根据所述控制状态执行以下判断并操作：

A.当为空闲状态时，向同步交流服务器发送同步交流操作权申请并经许可后获得所述同步交流操作权，并设置本交流端的控制状态为主控状态，执行所述网页操作，同时启动本交流端定时器开始计时操作，由所述同步交流服务器通知其他交流端将控制状态切换为受控状态；向同步交流服务器发送同步交流操作权申请并经驳回后，拦截所述网页操作；

B.当为受控状态时，拦截所述网页操作；

C.当为主控状态时，执行所述网页操作，并刷新所述定时器，重新开始计时。

2.根据权利要求1所述的方法，其特征在于，启动所述定时器开始计时之后，还包括：

A在预设的时间阈值之内，监听到在所述保险方案网页上的用户操作后，刷新所述定时器重新开始计时；

B所述定时器计时达到预设的时间阈值，则设置本交流端的控制状态为空闲状态，并向同步交流服务器发送同步交流操作权交回通知，由所述同步交流服务器通知其他交流端将控制状态切换为空闲状态。