CN111107145B - 基于html5网页的在线同步交流系统 - Google Patents

Abstract

本申请涉及一种基于HTML5网页的在线同步交流系统，包括：服务端，包括第一服务模块和第二服务模块；所述第一服务模块用于为第一客户端和第二客户端提供针对相同或相关目标网页的WEB访问服务；所述第二服务模块接收其中一个客户端发送的同步交流请求，在接收到所述另一客户端发送的同意同步交流的应答消息后，为第一客户端和第二客户端建立同步通信连接；所述第二服务模块计算第一客户端和第二客户端的身份信息，第二服务模块接收其中作为控制方的操作数据并处理为同步数据发送至另一客户端实现数据同步。本申请有利于提高在线交流的便利性、质量和效率、有利于节省交流者的时间。

Description

基于HTML5网页的在线同步交流系统

技术领域

本发明涉及互联网通信领域，尤其涉及一种基于HTML5网页的方案服务人员与客户之间针对方案的在线同步交流系统。

背景技术

随着移动、互联网技术的发展，人们习惯在移动端、PC端开展业务交流。如在保险业，业务员在展业过程中，为目标客户制作了保险建议书、投保方案等，通过微信或其它工具分享给目标客户，客户在浏览方案过程中，遇到相关问题邀请业务员进行解释，按照例如邮件沟通、电话沟通，聊天工具沟通等交流方法，很难达到同步的交流效果，预约面谈又投入时间、精力较大且带来不便，因此，相关技术存在方案服务人员与客户之间的交流质量差、效率低、以及时间消耗多的问题。

发明内容

本申请有鉴于上述现有的状况，其目的在于提供一种基于HTML5网页的服务人员与客户之间的在线同步交流系统，有利于提高方案服务人员与客户之间在线交流的便利性、质量和效率、有利于节省交流者的时间。

为此，本申请提供了一种基于HTML5网页的服务人员与客户之间的针对方案的在线同步交流系统，所述系统包括：

服务端，包括第一服务模块和第二服务模块；所述第一服务模块用于为第一客户端和第二客户端提供针对相同或相关目标网页的WEB访问服务；所述目标网页为方案服务人员向客户提供的服务方案，所述目标网页包括预置入的JS库，所述JS库通过其同步函数与第二服务模块建立通讯连接；所述第二服务模块接收第一客户端和第二客户端中的其中一个客户端发送的同步交流请求并发送给另一客户端，在接收到所述另一客户端发送的同意同步交流的应答消息后，为第一客户端和第二客户端建立同步通信连接；所述第二服务模块基于任一客户端发送的身份请求或者身份移交请求计算第一客户端和第二客户端分别对应的身份信息，或者，所述第二服务模块根据每一客户端的操作数据计算每一客户端对应的身份信息，所述身份信息包括针对目标网页的操作权限以及操作数据发送的控制方身份和目标网页操作数据被同步的受控方身份的一种；所述第二服务模块接收第一客户端和第二客户端中作为控制方的客户端发送的对目标网页的操作数据，并将所述操作数据处理为同步数据发送至第一客户端和第二客户端中作为受控方的另一客户端实现数据同步；

第一客户端，所述第一客户端用于对接方案服务人员，所述第一客户端通过第一URL链接访问所述第一服务模块；所述第一客户端通过所述目标网页预置入的JS库与所述第二服务模块建立通信连接；所述第一客户端还用于在作为控制方时向第二服务模块发送所述操作数据，以及在作为受控方时接收并解析所述第二服务模块发送的所述同步数据；

第二客户端，所述第二客户端用于对接客户，所述第二客户端通过第二URL链接访问所述第一服务模块，所述第二URL链接为与所述第一URL链接相同或者相关联的URL链接，所述第二客户端通过所述目标网页的JS库与所述第二服务模块建立通信连接；所述第二客户端还用于在作为控制方时向第二服务模块发送所述操作数据，以及在作为受控方时接收所述第二服务模块发送的所述同步数据；

其中，所述第一客户端和所述第二客户端中的一个客户端发送同步交流请求给第二服务模块，所述第一客户端和所述第二客户端中的另一客户端接收并向第二服务模块发送针对该同步交流请求是否同意的应答消息。

本申请中所述JS库为由JavaScript语言编写的Web页面程序集合，还包括由其他Web页面脚本语言编写的程序集合。所述HTML为文本标记语言，本申请以目前使用最为广泛的版本HTML5为例，包括但不限于HTML4以及其他符合浏览器规范的HTML版本。

本申请提供的基于HTML5网页的服务人员与客户之间针对方案的在线同步交流系统，通过在HTML5网页中预先嵌入JS库，JS库通过其同步函数可实现客户端与服务端的通信连接；服务端通过给方案服务人员与客户分别对应的客户端配置身份信息从而确定控制方和受控方，有利于将需要同步交流的双方所有针对网页的相关操作通过服务端进行同步，提高方案服务人员与客户在线交流的便利性、质量和效率、有利于节省交流者的时间。

附图说明

图1是示出了本申请的实施方式所涉及的基于HTML5网页的服务人员与客户之间针对方案的在线同步交流系统的示意框图；

图2是示出了本申请的实施方式所涉及的第二服务模块与第一客户端和第二客户端之间状态信息交互示意图；

图3是示出了本申请的实施方式所涉及的第二服务模块的一种功能模块示意框图；

图4是示出了本申请的实施方式所涉及的第二服务模块的第二种功能模块示意框图；

图5是示出了本申请的实施方式所涉及的第二服务模块的第三种功能模块示意框图；

图6是示出了本申请的实施方式所涉及的手机客户端界面示意图。

具体实施方式

以下，参考附图，详细地说明本发明的优选实施方式。在下面的说明中，对于相同的部件赋予相同的符号，省略重复的说明。另外，附图只是示意性的图，部件相互之间的尺寸的比例或者部件的形状等可以与实际的不同。

另外，在本发明的下面描述中涉及的小标题等并不是为了限制本发明的内容或范围，其仅仅是作为阅读的提示作用。这样的小标题既不能理解为用于分割文章的内容，也不应将小标题下的内容仅仅限制在小标题的范围内。

随着互联网的发展，越来越多的方案服务人员利用互联网发送方案至客户，目前大多以微信、QQ形式发送，其实质是一个URL链接，客户收到方案后便捷阅读，传播快，极为便利。但当前仅限于被动的阅读，缺少阅读过程中的实时交流，特别是一些方案本身具有专业性，客户在阅读过程中经常会遇到问题，由于不具备专业知识，电话沟通讲解困难，通常需要进行面谈才能充分了解方案内容。特别是金融保险业，如保险建议书方案、投保方案的在线交流，有以下特点：方案服务人员(保险代理人)具有一定的保险专业知识，方案具有一定的专业性，如“保险责任”、“保障条款”、“等待期”、“犹豫期”等均属专业名词；阅读者(客户)对保险知识匮乏，难于独立阅读方案；根据保险销售要求，保险销售需要全过程留痕，防止出现诱导行为；客户不喜欢代理人登门拜访的交流方式，不接受大量的时间、精力投入；保险代理人、客户对软件操作水平参差不齐，安装、使用特定软件均有难度。

有鉴于此，如图1所示，本申请提供了一种基于HTML5网页的服务人员与客户之间针对方案的在线同步交流系统1，系统1包括：

服务端，包括第一服务模块101和第二服务模块102。

第一服务模块101用于为第一客户端11和第二客户端22提供针对相同或者相关目标网页的WEB访问服务，目标网页为方案服务人员向客户提供的服务方案，目标网页包括预置入的JS库，JS库通过其同步函数与第二服务模块102建立通讯连接。

第二服务模块102接收第一客户端11和第二客户端22中的其中一个客户端发送的同步交流请求并发送给另一客户端，在接收到另一客户端发送的同意同步交流的应答消息后，为第一客户端11和第二客户端22建立同步通信连接。第二服务模块102基于任一客户端发送的身份请求或者身份移交请求计算第一客户端11和第二客户端22分别对应的身份信息，或者，第二服务模块102根据每一客户端的操作数据计算每一客户端对应的身份信息，该身份信息包括针对目标网页的操作权限以及操作数据发送的控制方身份和目标网页操作数据被同步的受控方身份的一种，第二服务模块102接收第一客户端11和第二客户端22中作为控制方的客户端发送的对目标网页的操作数据，并将操作数据处理为同步数据发送至第一客户端11和第二客户端22中作为受控方的另一客户端实现数据同步。数据同步包括页面同步、音频数据同步、视频数据同步以及涂鸦数据同步的一种或多种。

第一服务模块101和第二服务模块102可以分别为两个独立的服务器，也可以为功能集成为一体的综合服务器。

第一客户端11，第一客户端11用于对接提供方案的服务人员，第一客户端11通过第一URL链接访问第一服务模块101，第一客户端11通过目标网页预置入的JS库与第二服务模块102建立通信连接。第一客户端11还用于在作为控制方时向第二服务模块102发送操作数据，以及在作为受控方时接收并解析所述第二服务模块102发送的同步数据。

同步数据和操作数据可以为相同的数据，第二服务模块102仅作为转发功能，同步数据也可以是经第二服务模块102对操作数据处理后生成的新数据。

第二客户端22，第二客户端22用于对接客户，第二客户端22通过第二URL链接访问第一服务模块101，第二URL链接为与第一URL链接相同或者相关联的URL链接，第二客户端22通过目标网页的JS库与第二服务模块102建立通信连接。第二客户端22还用于在作为控制方时向第二服务模块102发送操作数据，以及在作为受控方时接收第二服务模块102发送的同步数据。

其中，第一客户端11和第二客户端22中的一个客户端发送同步交流请求给第二服务模块102，第一客户端11和第二客户端22中的另一客户端接收并向第二服务模块102发送针对该同步交流请求是否同意的应答消息。

可选地，两个客户端访问第一服务模块101，第一服务模块101也可识别到是哪些用户在访问相同的网页，第一服务模块101可以将该用户信息发送至第二服务模块102，第二服模块102可以主动与两个客户端进行通信。

第一客户端11和第二客户端22均包括浏览器功能模块；可以为浏览器本身，也可以为具有浏览器相关功能的终端模块，如手机、电脑等。

在一种应用环境下，第一客户端(方案服务人员)11可以分享第一URL链接给第二客户端(客户)22，客户通过第一服务模块101访问第一URL链接对应的网页，该网页包含的JS库会与第二服务模块建立socket通信并生成一个识别码，用于识别第二客户端(客户)22信息；第一客户端(方案服务人员)11一般通过登陆验证，第一服务模块101或第二服务模块102可识别到第一客户端(方案服务人员)11的身份信息，当第一客户端11(方案服务人员)打开以上网址时，网页包含的JS库也与第二服务模块建立socket通信。

当然，第一客户端(方案服务人员)11与第二客户端(客户)22可采用不同URL链接访问第一服务模块101，例如将第一URL链接转化为UUID的形式的第二URL链接供第二客户端(客户)22使用。

对于网页文件来说，HTML5标签的属性可由JS库识别并进行相关控制，网页文件内部可调用JS库提供的函数。通过以上设置可实现网页同步请求、接收同步、同步数据计算、同步数据解析、页面交流等。

对于第一客户端11而言，其可以从第一服务模块101获取该基于HTML5格式的网页文件，也可以按照第一服务模块101提供的HTML5模板制作一份网页文件，网页文件包含具有交流控制功能的JS库，其中服务端10制定了同步交互的规范(规范说明，构造如技术部分)。JS库为执行同步交互规范的核心部件。HTML5格式的网页文件中的标签、程序等按照服务端10制定的规范进行编写，可供JS库进行识别、调用，如HTML5中某标签，其属性声明不同步，则在同步过程中该标签可以隐藏或者显示空白内容。用户在浏览器中浏览、操作网页，任何操作事件均可等价为对应的JS指令，调用JS指令实现完全相同的效果。

其中嵌入网页文件的JS库可以包含但不限于以下功能：发起同步请求的函数，可请求与第二服务模块102建立连接、获取当前网页的状态、操作事件等作为操作数据发送至第二服务模块、接收来自第二服务模块102的同步数据，并将该同步数据转化为指令，通过指令实现对网页的控制，从而实现同步浏览、此外，JS库还能提供常规的同步交流工具，如涂鸦画板等、断开请求函数、弹出窗口提示等，便于交流讲解。JS库针对网页的监听包括各种网页操作、浏览事件，如Window事件、Form事件、Keyboard事件、Mouse事件、Media事件等。

因此，当第一客户端11或者第二客户端22通过浏览器打开网页文件后，网页文件开始加载包含了实现同步功能的JS库，置入该JS库后客户端与第二服务模块102建立Socket通讯，向第二服务模块102发送网页同步请求，携带浏览器信息；JS库还能实时监控HTML5网页页面信息，包括网页浏览状态发生改变，监听用户操作事件，将状态信息、操作事件转化为数据(一般采用JSON数据)发送至第二服务端102，接收第二服务端102的同步数据，将同步数据解析为可执行的指令并执行。

第二客户端22的数量可以为多个，第一客户端11可以同时支持多个用户的同步交流，达到同时与多人交互的效果。

参考图2示意，第一客户端11和第二客户端22中每一客户端通过JS库上报客户端当前的状态信息。其中，所述状态信息包括客户端在线状态、音视频录制状态、涂鸦工具开启状态中的一种或者多种。

第二服务模块102包括状态识别模块1021，状态识别模块1021用于识别第一客户端11和第二客户端22分别上报的状态信息，并分别通知每一客户端另一客户端的当前状态。

以客户端在线状态为例，在某一客户端发送同步交流请求之前，为了让客户端获取到更多信息，可以在用户访问URL链接后，从第一服务模块101获取到完整的网页文件时，由于此时网页文件已经可以基于JS库向第二服务模块102上报状态信息。第二服务模块102同时识别到第一客户端11以及第二客户端22的在线状态，并通知双方。这样做的好处在于，每一客户端都可以基于对方的状态选择下一步操作，例如第二客户端22接收到第二服务模块102反馈的第一客户端11此时在线的信息，表明第一客户端11的用户也在阅读同样的网页文件，因此第二客户端22可以发送同步交流请求给第二服务模块102，请求与第一客户端11进行同步交流，从而提高了用户体验。需要注意的是，实际中，第二服务模块102针对有同步需求的客户端可以建立同步通信连接，但并非所有访问该网页文件的用户都需要执行同步，因此，以一个客户端发送同步交流请求和另一客户端同意接收同步作为判断是否建立同步通信连接的判断依据有利于提高通信双方连接的准确性。

第一客户端11包括语音录制模块、视频录制模块、涂鸦工具模块、HTML5文档转换中的一种或者多种，所述第二客户端包括语音录制模块、视频录制模块、涂鸦工具模块、HTML5文档转换中的一种或者多种。

其中，语音通信、视频通信技术相对成熟，可以采用客户端设备自带或者第三方音视频通讯等。涂鸦工具是为了保证良好的在线交流效果，为交流者之间提供同步涂鸦工具。涂鸦工具可通过JS库的库文件调用相关程序实现。

文档转换模块用于将用户输入的非网页格式的文件转换为HTML5网页格式，以供第一服务模块101和第二服务模块102进行识别。

第一客户端11可以作为网页文件的制作方，由于同步交流的载体是包含JS库的HTML5格式的网页文件，因此，对于一些非网页格式的文件，例如word、PDF文档等，均可由第一客户端11转化为HTML5格式并插入JS库形成新网页文件。

在一种需要客户端主动申请身份权限的情况下，第二服务模块102具体执行如下内容：

第二服务模块102接收到第一客户端11和第二客户端22中任一客户端发送的控制方身份请求时，在取得另一客户端同意的情况下，第二服务模块102为申请身份请求的客户端分配控制方身份以及为另一客户端分配受控方身份；

第二服务模块102接收到第一客户端11和第二客户端22中任一客户端发送的控制方身份移交请求时，在取得另一客户端同意的情况下，第二服务模块102为申请身份请求的客户端分配受控方身份以及为另一客户端分配控制方身份；

第二服务模块102还用于通知具有控制方身份的客户端的JS库，使其将对目标网页的操作数据进行发送，以及通知受控方身份的客户端的JS库取消执行对目标网页的操作指令，以使得该受控方身份的客户端不能取得对目标网页的操作权限，仅能接收第二服务模块102的同步数据进行页面同步操作；

本申请还提供另一种由第二服务模块102自动为客户端分配身份的实施方式，第二服务模块102具体执行如下内容：

操作数据的控制权值随着操作数据的单位时间内的发送量和/或单位时间内的发送频次的增加而增大；所述操作数据的控制权值随着操作数据的单位时间内的发送量和/或单位时间内的发送频次的减少而减小；其中，所述操作数据包括页面操作动作数据、音频数据、视频数据、涂鸦工具操作数据中的一种或者多种；

客户端的操作数据的控制权值代表某一时刻，控制权交给该客户端的合理性。

举例来说，当用户在网页页面内多次执行点击、滑动页面等操作，或者发言较多，音频数据发送频次较高，音频数据量大，则该用户对应的客户端的操作数据的控制权值增长越快。反之，操作数据的控制权值会随时间的增长，在无页面操作动作、无音频，视频等数据发送时逐渐降低。

第二服务模块102判断第一客户端11和第二客户端22分别对应的操作数据的控制权值的差值大于第一预设数值时，此时，表面第一客户端11和第二客户端22中，一方需要控制身份的需求较另一方极大，此时，第二服务模块102为操作数据的控制权值较大的客户端自动分配控制方身份，并通知该控制权值较大的客户端的JS库，使其将对目标网页的操作数据进行发送。第二服务模块102还为操作数据的控制权值较小的客户端自动分配受控方身份，并通知控制权值较小的客户端的JS库取消执行对目标网页的操作指令，以使得该控制权值较小的客户端不能取得对目标网页的操作权限，仅能接收第二服务模块102的同步数据进行页面同步操作。

示例的，在方案服务人员和客户的在线交流过程中，第二服务模块102识别最近发送语音数据的是方案服务人员，判断其在为客户进行讲解，有控制要求，则第二服务模块102自动分配控制方身份给方案服务人员。相应的，对客户来说，其作为听讲方，不需要过多发言，则第二服务模块102自动分配受控方身份给客户。

第二服务模块102还用于在第一客户端11和第二客户端22分别对应的操作数据的控制权值的差值小于等于第一预设数值时，此时，两个客户端均有强烈的控制身份需求，或者均没有强烈的控制身份需求，则第二服务模块102允许两个客户端的JS库均能将对目标网页的操作数据进行发送，从而进一步计算每个客户端的身份信息。

因此，当两客户端控制权值差值较小时，两个客户端均有可能取得控制权，第二服务模块102基于两个客户端下一步的操作数据的发送，进一步计算两个客户端的身份信息。

第二服务模块102在第一客户端11和第二客户端22分别对应的操作数据的控制权值的差值小于等于第一预设数值时，若同时接收到两个客户端发送的身份请求，则对操作数据的控制权值大的客户端优先分配控制方身份。

需要注意的是，当待同步的操作数据为音频数据、视频数据或者涂鸦工具操作数据中的一种或者多种时，第一客户端11和第二客户端22可同时向第二服务模块102请求数据发送的控制方身份。第二服务模块102将第一客户端11和第二客户端22同时配置为发送针对此类数据的控制方身份以及接收此类数据的受控方身份。以使得第一客户端11和第二客户端22均能够同时向对方发送此类数据以及接收此类数据。

另一种待同步的操作数据包括针对网页的操作信息，如页面滑动、按钮点击等，一个客户端作为主控方，另外的客户端为受控方实现同步功能。

第一客户端11和第二客户端22均具有针对页面操作动作数据、音频数据、视频数据、涂鸦工具操作数据中的任意类型的数据有独立的控制权限和身份信息。也就是说，第一客户端11和第二客户端22中的任一客户端的身份信息在不同类型的操作数据下可以相同也可以不同，例如第一客户端11在待同步的数据为针对页面操作动作数据时具有控制方身份，则在待同步的数据为音频数据时，其控制方身份不会始终存在，需要向第二服务模块102再次申请，或者由第二服务模块102计算并自动分配。

第一客户端11和第二客户端22在交流过程中向第二服务模块102实时约定控制方与受控方，控制方针对网页的操作信息、状态信息等由所述JS库实时(或批量)通过WebSocket发送至第二服务模块102，并由第二服务模块102推送至受控方。

第一客户端11和第二客户端22中作为受控方的客户端的JS库接收到第二服务模块102发送的同步数据后，将所述同步数据解析转化为相应的指令，并在受控方客户端提供的浏览器环境中执行，从而达到同步效果。

一种具体的场景中，第一客户端11对应的用户操作网页为第二客户端22对应的用户进行讲解，如可设定在交流过程中，语音的讲解方系统自动将其设置为数据发送的控制方身份，交流过程中随着用户发言的改变，客户端自动移交控制权；第一客户端11对应的用户滑动页面，第二客户端22对应的用户画面随之移动，第一客户端11点击页面按钮，第二客户端22对应的用户其页面处的按钮也出现点击效果。当然，第二客户端22对应的用户对页面进行操作，询问第一客户端11对应的用户，效果亦然。

进一步的，在网页文件对应的保险建议方案交流过程中，针对方案内容可划分为同步内容以及非同步内容，该方案内容是否同步的控制权限可设置在HTML5网页的网页标签中或者JS库的程序文件中，当然也可以设置在第二服务模块102，便于统一控制，区分哪些操作可用于同步，哪些操作不允许同步，即同步过程的权限控制。比如网页支付不允许操作，本地文件打开不允许同步、某按钮仅能由一方用户点击确认等应用场景。

一种可选的实施方式中，参考图3，第二服务模块102包括第一隐私信息处理模块1021，第一隐私信息处理模块1021用于按照预设的数据隐私处理规则识别出操作数据携带的隐私数据，并对所述隐私数据进行处理，以使得最终处理好的同步数据对隐私数据进行过滤设置或隐藏设置。

在另一种可选的实施方式中，操作数据包括预先通过JS库的程序文件或者网页文件的网页标签属性信息定义的隐私数据。

第一客户端11和第二客户端22均包括第二隐私信息处理模块1022，参考图4示意的以第一客户端11的功能模块结构示意图为例说明，第二隐私信息处理模块1022用于识别通过JS库的程序文件或者所述网页文件的网页标签属性信息定义的隐私数据，在发送至第二服务模块102之前对所述隐私数据进行过滤或隐藏，以在同步过程中保护用户隐私。第二客户端22的功能模块结构类似，本申请不再过多赘述。

例如，整个同步交流系统定义了同步交流的规范、等级，开发人员在编写网页文件模板的过程中，可针对网页标签进行设置，设定某标签范围内容可针对某级别进行同步。JS库的程序文件同理。

参考图5，第二服务模块102包括交流数据记录模块1023，交流数据记录模块1023用于将第一客户端11和第二客户端22分别发送给第二服务模块102的操作数据按照预设规则进行分类存储。相应的，第二服务模块102还包括回看模块1024，回看模块1024用于提取交流数据记录模块1023保存的内容进行模拟回放。

为了更好的服务客户以及提高用户双方的体验，例如在保险金融行业，一种相关场景下，在保险人员与投保人员交流完成后，进入投保环节，需要投保人进行投保确认，该保险人员不具有操作权限，仅可远程协助解说操作步骤，投保过程中不允许保险人员出现诱导客户行为，因此，为了约束监督相关行为，第二服务模块102可以记录双方客户端的全过程的交流数据并加密存储，存储的主要是客户端的操作数据，包括浏览、点击、操作方、操作时间、语音、视频等，为了存储的规范性，存储的相关操作数据可以结合网页文件的页面动作进行存储，其中页面动作如“解说”、“投保确认”、“风险告知确认”、“投被保人选择”、“风险”，置入动作标记便于快速检索提取数据。

第二服务模块102的回看模块1024可完整还原整个交流过程，回看过程不会改变第二服务模块102存储的数据。

在同步交流过程将结束的时刻，第一客户端11和第二客户端22中的一个客户端发送交流结束请求给第二服务模块102，第一客户端11和第二客户端22中的另一客户端接收并向第二服务模块102发送针对该交流结束请求是否同意的应答消息。

第二服务模块102还用于转发该交流结束请求给另一客户端，并在接收到另一客户端发送的同意结束的应答消息后，将为第一客户端和第二客户端所建立的同步通信连接进行断开操作。

以上提供了基于HTML5网页的同步交流系统1中各个功能模块的作用，下面结合一个实例再次论述本同步交流系统1的具体的实现过程。

参考图6示意的客户端界面示意图，图6以手机作为客户端示意说明，第一客户端11(方案服务人员)基于系统提供的HTML5模版，制作生成保险投保建议书网页方案。制作者发送建议书方案至第二客户端22(客户)。发送方式如微信、QQ，发送内容实质为一个URL链接。客户访问链接，从第一服务模块101获取到完整的建议书方案进行阅读。

客户阅读网页文件格式的建议书方案，第二服务模块102能够基于JS库上报的客户端状态信息注册阅读者识别信息，同时发送阅读通知至制作者。制作者阅读网页文件的过程同理，第二服务模块102能够基于JS库上报的客户端状态信息同时识别到阅读者、制作者的在线状态，并通知双方。

客户、方案服务人员其中一方有在线交流需求，均可发送同步交流请求至第二服务模块102，第二服务模块102通知另一方，根据另一方反馈的同意的应答消息后为双方客户端建立socket通讯并启动同步交流服务。其中，客户、方案服务人员其中一方发送的同步交流请求中可以同时携带语音交流请求、视频交流请求等，供双方客户端启动相关功能以及通知第二服务模块102。

当同步交流建立后，客户、方案服务人员中任一方均可向第二服务模块102请求控制方身份，第二服务模块102为双方客户端分配控制方身份和受控方身份，交流过程中可通过用户手动、自动实时切换控制方、受控方的角色。同步交流过程中第二服务模块102对双方的状态信息的通知可在页面进行提示和标记，根据页面设置，由JS库自动生成和渲染。如在图6示意的客户端画面中，左上角控制状态的标识可以用红灯代表受控状态，此时我方用户的操作无效；绿灯代表控制状态，我方用户可持续操作；黄灯代表空闲状态，我方用户可以向服务器获取操作控制权。

客户、方案服务人员然后就可以针对方案进行交流。其中一方的控制效果会同步至另一方，双方方案画面保持同步，另外开启语音同步交流、涂鸦操作同步，有利于接近面对面进行方案交流的效果，在方案交流过程中，针对方案内容划分为同步内容、非同步内容，投保过程针对部分隐私内容，同步过程中一方有单方控制的权限，针对另一方该数据自动隐藏，如支付信息的输入。

为保证交流过程的数据的可回溯性，第二服务模块102记录全过程的交流数据并加密存储。第二服务模块102全程数字化记录，同时将音视频数据压缩存储，体积小。交流结束，一方发起交流结束请求至第二服务模块102，第二服务模块102通知另一方，最终断开为双方客户端建立的同步连接。由于系统按照时间顺序保留了全过程的方案操作、语音、视频等信息，所以系统可完整还原整个交流过程，需要注意的是，回看过程中借助原交流网页实现，不会改变服务器端数据。交流过程全程留痕，有利于保证交流过程数据的真实性、保密性。

本申请提供的在线同步交流系统应用于方案服务人员与客户之间，可以针对方案服务人员通过远程交互方式，协助客户完成相应操作的过程，即由客户操作，代理人全程指导。从而解决了特定技术领域的相关交流困难的问题。

在一种具体场景中，如保险领域，目标网页是保险代理人向客户提供的服务方案。服务方案可以为保险建议书方案，其中，保险建议书方案，又叫保险计划书，投保方案，是一种保险销售过程中代理人为客户制定的保险产品投保方案，一般内容为建议客户购买哪方面的保险产品，购买的保额是多少，花费多少资金，购买后能获得哪些保障和收益。

服务方案可以为保障规划方案，保障规划方案相对建议书方案更为系统，它的侧重点不在建议用户购买哪些产品，而在于根据用户的家庭状况、财务状况、健康状况、发展状况等全面规划人生每一阶段的保障配置需求，进一步生成保险产品购买方案。

服务方案可以为保险产品比较分析方案，其主要对一个保险产品或购买方案，与其它产品或方案进行比较分析，结合用户的实际分析其适合性。保险产品没有优劣之分，但针对一个特定的用户可以计算出其适合程度。

服务方案还可以为线上辅助投保方案，客户通过线上或者线上操作购买保险产品，包括保险产品选择，保险条款、投保须知阅读，保额设定，投保人、被保人与受益人信息填写、健康情况告知，保费支付等操作。

在另一种具体场景中，如金融服务领域，服务方案可以为理财规划方案，其是指运用科学的方法或程序为客户制定的切合实际、可操作的现金规划、消费、教育、投资、养老等规划，以提升客户生活品质，最终达到客户终生的财务安全、自主、自由的过程。服务方案其他还可以比如退休养老规划方案、税收规划方案、财产分配与传承规划方案、消费支出规划方案、投资规划方案等。

本申请还可以应用于其他具体场景，如教育领域，服务方案可以为教育规划方案。服务方案还可以为其他领域中的医疗规划方案、职业规划方案、合同确认方案等。

综上，本申请实现的基于HTML5网页的方案服务人员与客户之间的在线同步交流系统，适用于保险展业、金融展业、业务培训、操作协助等等。无需在用户浏览器端下载任何插件，也无需下载任何软件。本申请为一些有交互需求的网页提供专用的JS库，为网页开发者提供支持，开发人员仅需在网页中包含同步JS库，引入JS库的网页便具有了基础同步浏览的能力，通过为HTML5标签增设相关属性实现同步控制，另外可调用JS库中的方法、读取数据实现其他同步相关功能，如发送同步请求、结束同步、显示网页同步状态等。

虽然以上结合附图和实施例对本发明进行了具体说明，但是可以理解，上述说明不以任何形式限制本发明。本领域技术人员在不偏离本发明的实质精神和范围的情况下可以根据需要对本发明进行变形和变化，这些变形和变化均落入本发明的范围内。

Claims (10)

1.一种基于HTML5网页的服务人员与客户之间针对方案的在线同步交流系统，其特征在于，所述系统包括：

服务端，包括第一服务模块和第二服务模块；所述第一服务模块用于为第一客户端和第二客户端提供针对相同或相关目标网页的WEB访问服务；所述目标网页为服务人员向客户提供的服务方案，所述目标网页包括预置入的JS库，所述JS库通过其同步函数与第二服务模块建立通讯连接；所述第二服务模块接收第一客户端和第二客户端中的其中一个客户端发送的同步交流请求并发送给另一客户端，在接收到所述另一客户端发送的同意同步交流的应答消息后，为第一客户端和第二客户端建立同步通信连接；所述第二服务模块基于任一客户端发送的身份请求或者身份移交请求计算第一客户端和第二客户端分别对应的身份信息，或者，所述第二服务模块根据每一客户端的操作数据计算每一客户端对应的身份信息，所述身份信息包括针对目标网页的操作权限以及操作数据发送的控制方身份和目标网页操作数据被同步的受控方身份的一种；所述第二服务模块接收第一客户端和第二客户端中作为控制方的客户端发送的对目标网页的操作数据，并将所述操作数据处理为同步数据发送至第一客户端和第二客户端中作为受控方的另一客户端实现数据同步；

第一客户端，所述第一客户端用于对接所述服务人员，所述第一客户端通过第一URL链接访问所述第一服务模块；所述第一客户端通过所述目标网页预置入的JS库与所述第二服务模块建立通信连接；所述第一客户端还用于在作为控制方时向第二服务模块发送所述操作数据，以及在作为受控方时接收并解析所述第二服务模块发送的所述同步数据；

第二客户端，所述第二客户端用于对接所述客户，所述第二客户端通过第二URL链接访问所述第一服务模块，所述第二URL链接为与所述第一URL链接相同或者相关联的URL链接，所述第二客户端通过所述目标网页的JS库与所述第二服务模块建立通信连接；所述第二客户端还用于在作为控制方时向第二服务模块发送所述操作数据，以及在作为受控方时接收所述第二服务模块发送的所述同步数据；

其中，所述第一客户端和所述第二客户端中的一个客户端发送同步交流请求给第二服务模块，所述第一客户端和所述第二客户端中的另一客户端接收并向第二服务模块发送针对该同步交流请求是否同意的应答消息。

2.根据权利要求1所述的在线同步交流系统，其特征在于，所述第一客户端和所述第二客户端中每一客户端通过所述JS库上报客户端当前的状态信息；所述第二服务模块包括状态识别模块，所述状态识别模块用于识别所述第一客户端和所述第二客户端分别上报的状态信息，并分别通知每一客户端另一客户端的当前状态；其中，所述状态信息包括客户端在线状态、音视频录制状态、涂鸦工具开启状态中的一种或者多种；

所述第一客户端包括语音录制模块、视频录制模块、涂鸦工具模块、HTML5文档转换模块中的一种或者多种，所述第二客户端包括语音录制模块、视频录制模块、涂鸦工具模块、HTML5文档转换模块中的一种或者多种。

3.根据权利要求1所述的在线同步交流系统，其特征在于，所述第二服务模块接收到第一客户端和第二客户端中任一客户端发送的控制方身份请求时，在取得另一客户端同意后，所述第二服务模块为申请身份请求的客户端分配控制方身份以及为另一客户端分配受控方身份；

所述第二服务模块接收到第一客户端和第二客户端中任一客户端发送的控制方身份移交请求时，在取得另一客户端同意后，所述第二服务模块为申请身份请求的客户端分配受控方身份以及为另一客户端分配控制方身份；

所述第二服务模块还用于通知具有控制方身份的客户端的JS库，使其将对目标网页的操作数据进行发送，以及通知受控方身份的客户端的JS库取消执行对目标网页的操作指令，以使得该受控方身份的客户端不能取得对目标网页的操作权限，仅能接收第二服务模块的同步数据进行页面同步操作。

4.根据权利要求1所述的在线同步交流系统，其特征在于，所述操作数据的控制权值随着操作数据的单位时间内的发送量和/或单位时间内的发送频次的增加而增大；所述操作数据的控制权值随着操作数据的单位时间内的发送量和/或单位时间内的发送频次的减少而减小；其中，所述操作数据包括页面操作动作数据、音频数据、视频数据、涂鸦工具操作数据中的一种或者多种；

所述第二服务模块判断第一客户端和第二客户端分别对应的操作数据的控制权值的差值大于第一预设数值时，第二服务模块为操作数据的控制权值较大的客户端自动分配控制方身份，并通知该控制权值较大的客户端的JS库，使其将对目标网页的操作数据进行发送；所述第二服务模块还为操作数据的控制权值较小的客户端自动分配受控方身份，并通知控制权值较小的客户端的JS库取消执行对目标网页的操作指令，以使得该控制权值较小的客户端不能取得对目标网页的操作权限，仅能接收第二服务模块的同步数据进行页面同步操作。

5.根据权利要求4所述的在线同步交流系统，其特征在于，所述第二服务模块还用于在第一客户端和第二客户端分别对应的操作数据的控制权值的差值小于等于第一预设数值时，允许两个客户端的JS库均能将对目标网页的操作数据进行发送，从而进一步计算每个客户端的身份信息；

所述第二服务模块在第一客户端和第二客户端分别对应的操作数据的控制权值的差值小于等于第一预设数值时，若同时接收到两个客户端发送的身份请求，则对操作数据的控制权值大的客户端优先分配控制方身份。

6.根据权利要求1至5任一所述的在线同步交流系统，其特征在于，第一客户端和第二客户端中作为受控方的客户端的JS库接收到第二服务模块发送的所述同步数据后，将所述同步数据解析转化为相应的指令，并在受控方客户端提供的浏览器环境中执行，从而达到同步效果。

7.根据权利要求6所述的在线同步交流系统，其特征在于，所述第二服务模块包括第一隐私信息处理模块，所述第一隐私信息处理模块用于按照预设的数据隐私处理规则识别出操作数据携带的隐私数据，并对所述隐私数据进行过滤处理，以使得最终处理好的同步数据对所述隐私数据进行过滤设置或隐藏设置；所述第一客户端和所述第二客户端均包括第二隐私信息处理模块，所述第二隐私信息处理模块用于识别通过所述JS库的程序文件或者所述网页文件的网页标签属性信息定义的隐私数据，在发送至第二服务模块之前对所述隐私数据进行过滤或隐藏，以在同步过程中保护用户隐私。

8.根据权利要求6所述的在线同步交流系统，其特征在于，所述第二服务模块包括交流数据记录模块，所述交流数据记录模块用于将第一客户端和第二客户端分别发送给所述第二服务模块的所述操作数据按照预设规则进行分类存储；所述第二服务模块还包括回看模块，所述回看模块用于提取所述交流数据记录模块保存的内容进行模拟回放。

9.根据权利要求6所述的在线同步交流系统，其特征在于，所述第一客户端和所述第二客户端中的一个客户端发送交流结束请求给所述第二服务模块，所述第一客户端和所述第二客户端中的另一客户端接收并向所述第二服务模块发送针对该交流结束请求是否同意的应答消息；

所述第二服务模块还用于转发所述交流结束请求给所述另一客户端，并在接收到所述另一客户端发送的同意结束的应答消息后，将为第一客户端和第二客户端所建立的同步通信连接进行断开操作。

10.根据权利要求6所述的在线同步交流系统，其特征在于，当待同步的操作数据为音频数据、视频数据或者涂鸦工具操作数据中的一种或者多种时，所述第一客户端和所述第二客户端可同时向所述第二服务模块请求控制方身份；所述第二服务模块将所述第一客户端和所述第二客户端同时配置为发送针对此类数据的控制方身份以及接收此类数据的受控方身份；以使得第一客户端和第二客户端均能够同时向对方发送此类数据以及接收此类数据；其中，所述第一客户端和所述第二客户端均具有针对页面操作动作数据、音频数据、视频数据、涂鸦工具操作数据中的任意类型的数据有独立的控制权限和身份信息。

Images