CN117544632A - 多终端中浏览器页面直接交互的方法、系统及其应用 - Google Patents

Abstract

本申请提出了多终端中浏览器页面直接交互的方法、系统及其应用，包括对前端代码进行扩展；以信令服务器作为主副端页建立点对点连接的辅助和信息交换中介，并通过信令服务器存储各端网络连接信息及监控各端的心跳信息；通过应用服务器响应于各端的浏览器的访问请求，返回前端代码并在各端的浏览器上显示相同的初始页面并提供主副端标识以供用户选择；基于用户选择结果，进行主副端之间的会话建立的初始化操作，并向信令服务器发送网络连接信息；信令服务器响应并向主端返回副端网络连接信息，向副端返回主端网络连接信息；主端响应于用户的交互操作，触发交互事件并通过数据直连通道传输数据。可实现主副终端中浏览器页面的事件和数据的直接交互。

Description

多终端中浏览器页面直接交互的方法、系统及其应用

技术领域

本申请涉及网络技术领域，特别是涉及多终端中浏览器页面直接交互的方法、系统及其应用。

背景技术

近年来，信息系统的建设进入了多元化的发展，产生了很多不同应用种类和展示类型。在企业事业单位中通常建设有展示大厅，为了应对宣传和汇报的需要，通过不同的终端大屏对来访者做演示，以达到更直观、更具交互性的效果。大屏的建设中单屏展示发展比较成熟，使用上比较广泛，但还是存在多屏展示的场景需求，由于没有统一的建设标准，所以对应多屏的控制电脑（以下称终端）有一对一、一对多的情况。多屏在使用需求上，也从独立展示向多屏间交互展示转变。

由于大屏在实际中主要是使用了终端的浏览器进行页面展示，所以多屏交互的技术实现就是浏览器页面的交互实现，而在其中最复杂的就是不同终端的浏览器页面之间的交互，若能解决多终端的浏览器页面交互问题就可以覆盖多屏交互展示的不同需求，在大屏场景应用的技术实现上有重要意义。

为此现有技术通常采用以下方法实现：

方法1：采用浏览器的存储机制和跨源消息作不同浏览器页之间的通信方式。当浏览器A页面从服务器获取数据后，使用localStorage或indexDB等做浏览器端的数据存储，并通过window.postMessage方法向浏览器B页面发送消息通知，当浏览器B页面接收到消息后，从localStorage或indexDB获取对应数据，进行页面显示。但由于不同页面必须是属于同一浏览器才能有数据联系，所以仅适用于单终端控制不同展示屏的场景，存在很大局限性。

方法2：使用浏览器和服务器双向通信的方式，每个浏览器页都与服务器通过websocket建立连接。当浏览器页面A需要向浏览器页面B发送事件和数据时，浏览器页面A通过已建立的websocket连接向服务器发送，服务器接收到事件和数据后，通过websocket连接将事件和数据推送给浏览器页面B，浏览器页面B接收后进行相应的展示，反之亦然。但由于该方式需要服务器做持续性的数据推送，依赖于网络稳定性和服务器压力的限制，所以在服务器配置受限的情况下不适用。

综上，亟待一种多终端中浏览器页面直接交互的方法、系统及其应用，以解决现有技术存在的问题，实现主副终端中浏览器页面的事件和数据的直接交互。

发明内容

本申请实施例提供了多终端中浏览器页面直接交互的方法、系统及其应用，针对目前技术均存在较大局限性和服务器压力大等问题。

本发明核心技术主要是通过扩展前端代码，增加支撑模块，建立点对点连接，执行事件和数据交互，最终实现主副终端中浏览器页面的事件和数据的直接交互。

第一方面，本申请提供了多终端中浏览器页面直接交互的方法，所述方法包括以下步骤：

S00、对前端代码进行扩展；

其中，扩展的内容包括增加应用于终端页交互的前端框架元素以及增加支撑模块，通过支撑模块实现会话建立、事件检查、数据发送、数据接收以及数据执行，以管理和实现跨终端浏览器之间的点对点通信和事件数据交互所需的基础功能；

S10、以信令服务器作为主副端页建立点对点连接的辅助和信息交换中介，并通过信令服务器存储各端网络连接信息以及监控各端的心跳信息；

S20、通过应用服务器响应于各端的浏览器的访问请求，返回前端代码，使得各端的浏览器上显示相同的初始页面并提供主副端标识以供用户选择；

S30、基于用户选择结果，进行主副端之间的会话建立的初始化操作，并向信令服务器发送会话描述协议的网络连接信息；

S40、信令服务器响应并向主端返回副端的网络连接信息，向副端返回主端的网络连接信息，以实现点对点连接的建立，形成主端和副端之间的数据直连通道；

S50、主端响应于用户的交互操作，触发交互事件并通过数据直连通道传输数据，以在副端上呈现交互效果。

进一步地，S00步骤中，增加应用于终端页交互的前端框架元素包括：设置终端页标识全局变量，用于对不同终端上浏览器页面做全局性的节点标识；自定义HTML标签元素并约定为交互内容的承载容器标签，在前端页面编码时使用；定义支撑自定义标签事件处理的基础JS程序、辅助JS函数，以及主端事件和副端函数映射关系的数据结构。

进一步地，S10步骤中，将信令服务器做成后端Web服务程序，以监听固定端口、接收HTTP Restful请求并返回响应信息。

进一步地，S10步骤中，信令服务器通过关系型数据库实现存储各端网络连接信息，网络连接信息包括主端网络连接信息表和副端网络连接信息表，主端网络连接信息表包含主端页标识字段和主端网络连接端点字段，副端网络连接信息表包含副端页标识字段、副端网络连接端点字段、关联主端页标识字段。

进一步地，信令服务器从心跳信息中提取出终端页标识和网络连接信息，并查找对应记录，比较是否存在变化，若发生变化则进行对应的更新/删除操作，以返回结果。

进一步地，支撑模块通过WebRTC实现会话建立，并向信令服务器发送基于WebRTC中的SDP会话描述协议。

进一步地，实现会话建立通过利用WebRTC的RTCPeerConnection对象封装出建立点对点连接的JS代码方法，利用RTCDataChannel对象封装出用于主副终端浏览器之间交互的数据直连通道的JS代码方法。

第二方面，本申请提供了一种多终端中浏览器页面直接交互的系统，包括：

主副终端，用于显示和交互前端内容，分为一个主端和一个或多个副端；基于用户选择结果，进行主副端之间的会话建立的初始化操作，并向信令服务器发送会话描述协议的网络连接信息；主端响应于用户的交互操作，触发交互事件并通过数据直连通道传输数据，以在副端上呈现交互效果；

信令服务器，作为主副端页建立点对点连接的辅助和信息交换中介，存储各端网络连接信息以及监控各端的心跳信息；响应各端心跳并向主端返回副端的网络连接信息，向副端返回主端的网络连接信息，以实现点对点连接的建立，形成主端和副端之间的数据直连通道；

应用服务器，响应于各端的浏览器的访问请求，返回前端代码，使得各端的浏览器上显示相同的初始页面并提供主副端标识以供用户选择；

前端代码扩展模块，用于增加应用于终端页交互的前端框架元素，包括设置终端页标识全局变量、自定义HTML标签和属性、定义支撑自定义标签事件处理的基础JS程序和辅助JS函数，以及标识和对应事件的前端函数映射关系的数据结构，以简化交互开发以及形成实现特性内容展示和交互的标准方法；

支撑模块，包括会话建立模块、支撑主端页功能的事件检查模块和数据发送模块、支撑副端页功能的数据接收模块和数据执行模块，通过会话建立模块实现会话建立，通过事件检查模块和数据发送模块实现事件检查和数据发送，通过数据接收模块和数据执行模块实现数据接收以及数据执行，以管理和实现跨终端浏览器之间的点对点通信和事件数据交互所需的基础功能。

第三方面，本申请提供了一种电子装置，包括存储器和处理器，存储器中存储有计算机程序，处理器被设置为运行计算机程序以执行上述的多终端中浏览器页面直接交互的方法。

第四方面，本申请提供了一种可读存储介质，可读存储介质中存储有计算机程序，计算机程序包括用于控制过程以执行过程的程序代码，过程包括根据上述的多终端中浏览器页面直接交互的方法。

本发明的主要贡献和创新点如下：1、与现有技术相比，本申请应对局域网中浏览器完全分散在不同终端上进行页面交互的需求场景，提供了可简化交互开发的前端框架元素扩展和支撑模块，屏蔽了底层技术开发的复杂性，使得开发者可以专注于业务需求的实现，最终可以达到实现主-副两级交互的效果，进一步还可以支撑主-副(主)-副多级交互效果，复杂场景的适用性极大增强；

2、与现有技术相比，本申请通过在不同机器上浏览器页之间的事件和数据交互是通过点对点直连的方式，不需要服务器作数据中转，充分利用了局域网内高带宽带来的网络速度优势，也减少了服务器不稳定等因素对交互数据传输带来的影响。

本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的多终端中浏览器页面直接交互的方法的流程；

图2是根据本申请实施例的多终端中浏览器页面直接交互的系统示意图；

图3是根据本申请实施例的电子装置的硬件结构示意图。

具体实施方式

这里将详细的对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本说明书一个或多个实施例相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本说明书一个或多个实施例的一些方面相一致的系统和方法的例子。

需要说明的是：在其他实施例中并不一定按照本说明书示出和描述的顺序来执行相应方法的步骤。在一些其他实施例中，其方法所包括的步骤可以比本说明书所描述的更多或更少。此外，本说明书中所描述的单个步骤，在其他实施例中可能被分解为多个步骤进行描述；而本说明书中所描述的多个步骤，在其他实施例中也可能被合并为单个步骤进行描述。

实施例一

本申请旨在提出一种多终端中浏览器页面直接交互的方法，可以，具体地，参考图1，所述方法包括以下步骤：

S00、对前端代码进行扩展；

在本实施例中，通过对场景需求进行分析得知：在同一局域网的办公区域中，不同终端的浏览器页面按作用分为两类，一类为主终端浏览器页（简称主端页），数量仅有一个，还有一类为副终端浏览器页（简称副端页），数量可以有多个。用户操作主端页，主端页向副端页发送交互事件和数据，副端页根据接收到的交互事件和数据做页面展示。应用服务器提供前端代码给浏览器，提供应用数据给主端页。浏览器从应用服务器获取前端代码并执行，可以展示页面和根据用户操作事件呈现不同展示效果。常规的前端页面的交互都是在当前浏览器上进行，无法实现跨终端浏览器的交互行为。若要在不同终端浏览器上呈现出相互交互的效果，需要对前端代码层面进行扩展。

因此，本申请首先对现有常规的前端代码进行扩展，主要包括以下内容：

(1)增加应用于终端页交互的前端框架元素

a.设置终端页标识全局变量，用于对不同终端上浏览器页面做全局性的节点标识，本实施例声明IX_NODE作为内置全局变量，IX_NODE的取值范围由业务开发者按实际应用场景设置，如定义了主端页标识为M、第一副端页标识为S1、第二副端页标识为S2，则取值为集合{M、S1、S2}中一个，而具体赋值则由用户在浏览器初始页上选择终端节点标识时确定。

b.自定义HTML标签元素<ix-div>，约定为交互内容和样式的承载容器标签，在前端页面编码时使用。在具体实现上依据主流浏览器已支持的HTML扩展规范，首先创建自定义元素的构造类，继承自HTMLDivElement类：class IxDiv extends HTMLDivElement{...}，使自定义的元素也具备HTML内置元素<div>标签对象的属性和行为，但特别增加用于标识终端页的属性：data-mark，然后注册自定义元素以成为可编码使用的标签：Window.customElements.define("ix-div", IxDiv)，最终形成前端开发可用的HTML标签，如在主端页M上有跨端交互作用的显示区块的HTML编码为<ix-div id="userInfoBlock"data-mark="M">...</ix-div>。

c.定义支撑自定义标签事件处理的基础JS程序、辅助JS函数，以及主端事件和副端函数映射关系的数据结构。

其中，主端事件与副端函数映射关系的数据结构如下表：

如此，主端数据获取函数，由业务开发者在前端编码时编写函数体，并将其函数名记录于终端页标识和对应事件的前端函数映射关系文件中。

其中，辅助JS函数为主端和副端处理交互事件的模板函数，用于串联所有支撑模块，组合了会话建立、事件检查、数据发送、数据接收、数据执行等处理过程，将事件和数据的底层处理封装成固化的JS脚本程序，经初始化后可以形成主端JS处理函数和副端JS处理函数。主端模板函数组合了会话建立、事件检查、数据发送等支撑模块的方法引用，副端模板函数组合了会话建立、数据接收、数据执行等支撑模块的方法引用。

其中，基础JS程序在实现上以一个JS函数作为主体（即主函数），在主函数内执行辅助JS函数和<ix-div>标签元素相关事件处理程序的初始化工作。用户在初始页上选择终端标识时会赋值终端标识全局变量IX_NODE并产生事件，事件触发主函数执行。函数内部首先根据IX_NODE值确定主端还是副端，当终端页为主端时，首先将主端模板函数初始化为实际的JS处理函数，然后读取终端页标识和对应事件的前端函数映射关系数据，选出主端标识对应的所有数据记录，接着依次逐个根据主端元素ID通过document.getElementById方法获取对应<ix-div>的DOM元素对象，并通过该DOM元素对象的addEventListener方法将JS处理函数和元素的事件绑定，从而实现<ix-div>标签元素的完整事件处理逻辑。当终端页为副端时，将副端模板函数初始化为实际JS处理函数并启动执行，该函数将会话建立、数据接收、数据执行模块的函数引用与用于交互页面内容展示的处理函数串联，接收主端交互数据进而执行逻辑。

(2)增加支撑模块，包括支撑点对点连接的会话建立模块、支撑主端页功能的事件检查模块和数据发送模块、支撑副端页功能的数据接收模块和数据执行模块。具体如下：

a.会话建立模块

利用了浏览器的web实时通讯协议支持能力，封装出点对点连接的建立和使用功能，应用于主副终端浏览器从信令服务器获取网络连接关联信息，以及主副终端浏览器之间根据网络连接关联信息建立数据直连通道。在实现上使用WebRTC技术。WebRTC 作为一项实时通讯技术，允许网络应用在不借助中间媒介的情况下，建立浏览器之间点对点的连接。虽然WebRTC在场景应用上主要用于实现视频流和音频流的传输，但还是可以借助于其协议栈完成实时数据的传输。会话建立模块向信令服务器发送的数据体是基于WebRTC中的SDP会话描述协议，包含了本端的网络连接信息，通过信令服务器与对端交换。会话建立模块就是利用WebRTC的RTCPeerConnection对象封装出建立点对点连接的JS代码方法，利用RTCDataChannel对象封装出用于主副终端浏览器之间交互的数据直连通道的JS代码方法。

b.事件检查模块和数据发送模块

作用于主端页，事件检查模块是对用户操作自定义标签产生的事件进行标识检查以及获取相应的数据获取函数、副端标识和函数等信息，进而作不同处理。在主端页展示元素的事件中，只要是需要副端页交互的，都需要通过事件检查模块对事件进行核查和定位主端数据获取函数和副端处理函数。事件检查模块作为共用的检查程序，采用唯一JS函数实现，自定义标签事件监听的主端JS处理程序都引入了该检查程序。当用户对主端页的<ix-div>标签元素做出触发事件的操作后，事件检查模块首先从事件对象中获取元素ID和事件名，如ID为userInfoBlock的<ix-div>元素的click事件，接着在映射关系表中根据元素ID和事件名查找出需要的主端数据获取函数（如getUserInfo函数），和副端标识和函数（如标识为S1的副端及其showUserInfo函数），最后将查找结果输入给数据发送模块。

数据发送模块在内部实现逻辑上，先根据事件检查模块输入的主端数据获取函数得到数据，这一步可能需要从应用服务器上请求数据，再组合副端标识、事件名、数据构造出统一JSON格式的数据，发送到数据直连通道中。JSON数据格式如下：

{

“target”: “S1”,

“function”: “showUserInfo”,

“data”: {...}

}

c.数据接收模块和数据执行模块

数据接收模块为副端页使用，用于接收主端通过数据直连通道发送过来的JSON数据。在实现上，持续监听数据直连通道，一旦有JSON数据包传输过来，就从JSON数据包中提取target终端标识，检查标识是否为本端标识，若是则将JSON数据输入给数据执行模块，否则丢弃。

数据执行模块接收到接收模块输入的JSON数据后，提取function事件处理函数名和data数据，根据事件处理函数名调用JS函数，将数据作为函数输入触发函数代码执行，如window["showUserInfo"](...)，进而操作副端页DOM元素在浏览器上呈现效果。

如此，通过S00步骤的对前端代码的扩展操作，增加支撑模块，向业务开发者屏蔽了底层技术开发的复杂性，开发者可以简单地使用扩展的HTML标签和固定函数实现交互效果，从而只要专注于实际业务需求，而不用关心跨终端浏览器底层直接交互如何实现，不仅简化了交互开发，还可以在不同终端浏览器页上同时产生交互事件的展示效果。

S10、以信令服务器作为主副端页建立点对点连接的辅助和信息交换中介，并通过信令服务器存储各端网络连接信息以及监控各端的心跳信息；

在本实施例中，信令服务器是主副端页建立点对点连接的辅助，是主副端之间交换连接端点信息的中介。信令服务器做成后端Web服务程序，监听固定端口，接受HTTPRestful请求并返回响应信息，本实施例使用JAVA体系的Spingboot框架实现，当然也可以使用其它编程语言和框架实现。在实际开发中，可以将信令服务器的功能实现合并到应用服务器中，以免去跨域带来的请求问题，另外，信令服务器接收和返回的心跳信息和网络连接信息，数据包比较小，不会对应用服务器造成影响。

其中，信令服务器内部可使用关系型数据库完成各端网络连接信息的存储，包括主端网络连接信息表和副端网络连接信息表。主端网络信息表包含主端页标识字段和主端网络连接端点字段，副端网络连接信息表包含副端页标识字段、副端网络连接端点字段、关联主端页标识字段。主端记录和副端记录的映射关系为一对多关系。

优选地，信令服务器接收到主端的网络连接信息后，先更新主端网络连接信息表，并检查副端网络连接信息表，若存在副端页记录，则会更新其关联主端标识字段，然后查询出副端网络连接信息记录封装为JSON格式数据返回。

优选地，信令服务器接收到副端的网络连接信息后，先更新副端网络连接信息表，并从主端网络连接信息表查出主端页记录，将主端页标识写入关联主端标识字段中，然后查询出主端网络连接信息记录封装为JSON格式数返回。

优选地，信令服务器还接收各端的心跳信息，从心跳信息中提取出终端页标识和网络连接信息，根据终端页标识从网络连接信息表中查找对应记录，比较是否有变化，若有变化则做相应的更新/删除操作，并在各端的心跳响应中返回结果。当连续1分钟未收到某终端浏览器页的心跳信息时，则清除数据库中对应页相关信息，并在返回其他终端的心跳响应中的网络连接关联关系里体现出来。

S20、通过应用服务器响应于各端的浏览器的访问请求，返回前端代码，使得各端的浏览器上显示相同的初始页面并提供主副端标识以供用户选择；

具体地，不同终端的浏览器向应用服务器发送访问请求，应用服务器向浏览器响应前端代码，浏览器做前端渲染，此时不同终端的浏览器显示相同初始页面，页面内包含供用户选择主副端标识的选项。

在本实施例中，以一个主终端两个副终端为例，三个终端的浏览器向应用服务器请求访问同一URL地址，即初始页，应用服务器返回前端代码后各终端在浏览器上显示出相同初始页面，初始页面提供主副端标识（M、S1、S2）供选择。

其中，主端(M)和副端(S)可以认为是角色的概念（司令员和士兵），指令从主到副方向发送，实现一个方向上交互需求；双向交互，其实就是两个方向的交互需求叠加实现，例如：

假设有两台电脑a和b，将双向交互的需求集合分分类，第一类为a->b方向，第二类为b->a方向。

S30、基于用户选择结果，进行主副端之间的会话建立的初始化操作，并向信令服务器发送会话描述协议的网络连接信息；

具体地，用户在不同终端的浏览器初始页上选择类型标识，即主端页还是副端页，浏览器根据标识执行前端代码中会话建立模块里的相应逻辑，包括：将标识记录于浏览器缓存中；向信令服务器定时发送心跳信息，每次间隔5秒；向信令服务器发送网络连接信息，包含本端的可连接端点和标识信息。

虽然浏览器无法像服务器一样有固定IP提供监听端口接受连接请求，但浏览器基本支持了web实时通信协议，所以会话建立模块就是基于web实时通信框架，将本端用于实时连接的udp端口和局域网ip，即可连接端点，通过信令服务器与关联端进行互换，以满足点对点通信的连接条件。而且由于局域网中设备互相通信不存在内外网的网络地址转换问题，所以可以忽略网络复杂性引起的连通问题。

在本实施例中，用户在主终端上选择M，在其它两个副终端上分别选择S1和S2，此时终端浏览器页则会依用户选择结果对终端标识全局变量IX_NODE进行赋值，以及触发基础JS程序初始化，并通过document.querySelectorAll方法，以<ix-div>元素的data-mark属性为参数选取DOM元素，如document.querySelectorAll('[data-mark="M"]'),选择性展示页面中自定义标签<ix-div>元素的内容，而用户将在主终端浏览器页上面进行操作。

进一步地，主端M和副端S1和S2的会话建立模块开始初始化，向信令服务器通过AJAX的XMLHttpRequest发送基于SDP会话描述协议的网络连接信息。

其中，AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用的技术。它是一种在不重新加载整个网页的情况下，通过在后台与服务器进行数据交换的方式，实现异步更新网页内容的技术手段。XMLHttpRequest是一个在 JavaScript 中用于发起 HTTP 请求的 API。它是 AJAX 技术的核心，允许浏览器向服务器发送请求并处理服务器的响应，而无需刷新整个页面。XMLHttpRequest 对象可以用于异步或同步方式获取数据。

其中，SDP（Session Description Protocol）是一种用于描述多媒体会话的协议。它主要用于在多媒体会话的参与者之间交换会话信息，以协商和建立多媒体通信会话的参数和配置。

S40、信令服务器响应各端心跳并向主端返回副端的网络连接信息，向副端返回主端的网络连接信息，以实现点对点连接的建立，形成主端和副端之间的数据直连通道；

其中，终端浏览器页中的会话建立模块接收到信令服务器的心跳响应后，解析心跳响应里的网络连接关联关系信息，提取应连接端点，与浏览器缓存中的连接记录作比较，缓存中缺少的连接则增加记录，缓存中多余的连接会话信息则删除。

若还没建立关联端的连接，副端页的会话建立模块根据网络连接信息，向关联的主端页连接端点发起连接请求，主端页的会话建立模块由于已从心跳响应中获得了副端页信息，所以向副端页返回确认连接的响应，这样就建立了该副端页和主端页的点对点连接，继而初始化数据直连通道。由于心跳间隔原因，会话建立模块从信令服务器获得信息的时间差可能会达到两个心跳时间，所以副端页的会话建立模块在未收到确认连接响应时将继续请求连接，按心跳频率发送，且不超过三个心跳。主端页不发起主动连接，被动接受副端页会话连接请求。

在本实施例中，信令服务器向主端返回副端网络连接信息，向副端返回主端网络连接信息。主副端的会话建立模块中的RTCPeerConnection对象利用返回的对端网络连接信息建立点对点连接，分别产生M-S1和M-S2两对WebRTC连接。主端会话建立模块进一步通过RTCPeerConnection对象创建出RTCDataChannel对象，作为数据直连通道，至此（M-S1）和（M-S2）两路数据直连通道形成。

S50、主端响应于用户的交互操作，触发交互事件并通过数据直连通道传输数据，以在副端上呈现交互效果。

具体地，用户操作主端页会在内部产生各类事件，如查看指标详情、查看关联信息等，当事件为主端页面事件时，主终端在本机浏览器中执行并展示页面；当事件为副端页交互事件时，主端页的事件检查模块先检索该事件属于哪个副端页，将副端标识、副端函数名、所需数据构造为固定格式的数据包，再由数据发送模块查找出对应的数据直连通道，最后将数据包由数据直连通道发送出去。

副端页的数据接收模块持续监听数据直连通道，当接收到主端页发来的数据包时，检查数据包中的副端标识，若属于本端则传递给数据执行模块，数据执行模块提取数据包中的函数名和数据，通过函数名查找并引用对应的前端函数或方法，将数据输入并触发执行，前端函数或方法依内部逻辑进行数据赋值、JS代码执行和HTML标签操作，最终浏览器呈现交互效果。

在本实施例中，当用户在M终端上的浏览器页点击应在S1终端页上交互展示结果的标签区块时（如<ix-div id="userInfoBlock" data-mark="M">...</ix-div>），产生了该标签元素的click点击事件，进而触发主端JS处理函数，函数调用事件检查模块从主端事件与副端函数的映射关系数据中，查找出数据获取函数名getUserInfo、副端标识S1、副端函数名showUserInfo，输入给数据发送模块。M端的数据发送模块执行数据获取函数getUserInfo()，从应用服务器上请求并获得数据，并将获得数据和S1、showUserInfo一起构造出固定格式的JSON数据，如{“target”: “S1”, “function”: “showUserInfo”,“data”: {...}}，传给（M-S1）数据直连通道。

如此，S1端的数据接收模块监听到（M-S1）数据直连通道有JSON数据时，从JSON数据包中提取target终端标识S1，由于标识S1和本端标识一致，将JSON数据继续输入给数据执行模块。数据执行模块接收到输入的JSON数据后，提取function事件处理函数名showUserInfo和data数据，调用JS函数showUserInfo(data)，将数据作为函数输入触发函数代码执行，进而操作页面DOM元素在浏览器上呈现效果。

而M终端到S2终端浏览器页面的事件交互过程与上述过程一样，其他如端到端之间的交互过程也是基本一致，因此不再赘述。

如此，本申请在底层上配合信令服务器，维护和交换主副端页的相关网络连接信息，支持不同终端的浏览器建立点对点连接，进而建立不同终端中浏览器页面之间的数据直连通道，将交互数据在浏览器间直接传递，实现主副终端中浏览器页面的事件和数据的直接交互。

实施例二

基于相同的构思，如图2所示，本申请还提出了一种多终端中浏览器页面直接交互的系统，包括：

主副终端，用于显示和交互前端内容，分为一个主端和一个或多个副端；基于用户选择结果，进行主副端之间的会话建立的初始化操作，并向信令服务器发送会话描述协议的网络连接信息；主端响应于用户的交互操作，触发交互事件并通过数据直连通道传输数据，以在副端上呈现交互效果；

信令服务器，作为主副端页建立点对点连接的辅助和信息交换中介，存储各端网络连接信息以及监控各端的心跳信息；响应各端心跳并向主端返回副端网络连接信息，向副端返回主端的网络连接信息，以实现点对点连接的建立，形成主端和副端之间的数据直连通道；

应用服务器，响应于各端的浏览器的访问请求，返回前端代码，使得各端的浏览器上显示相同的初始页面并提供主副端标识以供用户选择；

前端代码扩展模块，用于增加应用于终端页交互的前端框架元素，包括设置终端页标识全局变量、自定义HTML标签和属性、定义支撑自定义标签事件处理的基础JS程序和辅助JS函数，以及标识和对应事件的前端函数映射关系的数据结构，以简化交互开发以及形成实现特性内容展示和交互的标准方法；

支撑模块，包括会话建立模块、支撑主端页功能的事件检查模块和数据发送模块、支撑副端页功能的数据接收模块和数据执行模块，通过会话建立模块实现会话建立，通过事件检查模块和数据发送模块实现事件检查和数据发送，通过数据接收模块和数据执行模块实现数据接收以及数据执行，以管理和实现跨终端浏览器之间的点对点通信所需的基础功能。

实施例三

本实施例还提供了一种电子装置，参考图3，包括存储器404和处理器402，该存储器404中存储有计算机程序，该处理器402被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。

具体地，上述处理器402可以包括中央处理器（CPU），或者特定集成电路（ApplicationSpecificIntegratedCircuit，简称为ASIC），或者可以被配置成实施本申请实施例的一个或多个集成电路。

其中，存储器404可以包括用于数据或指令的大容量存储器404。举例来说而非限制，存储器404可包括硬盘驱动器（HardDiskDrive，简称为HDD）、软盘驱动器、固态驱动器（SolidStateDrive，简称为SSD）、闪存、光盘、磁光盘、磁带或通用串行总线（UniversalSerialBus，简称为USB）驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器404可包括可移除或不可移除（或固定）的介质。在合适的情况下，存储器404可在数据处理装置的内部或外部。在特定实施例中，存储器404是非易失性（Non-Volatile）存储器。在特定实施例中，存储器404包括只读存储器（Read-OnlyMemory，简称为ROM）和随机存取存储器（RandomAccessMemory，简称为RAM）。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM（ProgrammableRead-OnlyMemory，简称为PROM）、可擦除PROM（ErasableProgrammableRead-OnlyMemory，简称为EPROM）、电可擦除PROM（ElectricallyErasableProgrammableRead-OnlyMemory，简称为EEPROM）、电可改写ROM（ElectricallyAlterableRead-OnlyMemory，简称为EAROM）或闪存（FLASH）或者两个或更多个以上这些的组合。在合适的情况下，该RAM可以是静态随机存取存储器（StaticRandom-AccessMemory，简称为SRAM）或动态随机存取存储器（DynamicRandomAccessMemory，简称为DRAM），其中，DRAM可以是快速页模式动态随机存取存储器404（FastPageModeDynamicRandomAccessMemory，简称为FPMDRAM）、扩展数据输出动态随机存取存储器（ExtendedDateOutDynamicRandomAccessMemory，简称为EDODRAM）、同步动态随机存取内存（SynchronousDynamicRandom-AccessMemory，简称SDRAM）等。

存储器404可以用来存储或者缓存需要处理和/或通信使用的各种数据文件，以及处理器402所执行的可能的计算机程序指令。

处理器402通过读取并执行存储器404中存储的计算机程序指令，以实现上述实施例中的任意多终端中浏览器页面直接交互的方法。

可选地，上述电子装置还可以包括传输设备406以及输入输出设备408，其中，该传输设备406和上述处理器402连接，该输入输出设备408和上述处理器402连接。

传输设备406可以用来经由一个网络接收或者发送数据。上述的网络具体实例可包括电子装置的通信供应商提供的有线或无线网络。在一个实例中，传输设备包括一个网络适配器（Network Interface Controller，简称为NIC），其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输设备406可以为射频（Radio Frequency，简称为RF）模块，其用于通过无线方式与互联网进行通讯。

输入输出设备408用于输入或输出信息。

实施例四

本实施例还提供了一种可读存储介质，可读存储介质中存储有计算机程序，计算机程序包括用于控制过程以执行过程的程序代码，过程包括根据实施例一的多终端中浏览器页面直接交互的方法。

需要说明的是，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

通常，各种实施例可以以硬件或专用电路、软件、逻辑或其任何组合来实现。本发明的一些方面可以以硬件来实现，而其他方面可以由控制器、微处理器或其他计算设备执行的固件或软件来实现，但是本发明不限于此。尽管本发明的各个方面可以被示出和描述为框图、流程图或使用一些其他图形表示，但是应当理解，作为非限制性示例，本文中描述的这些框、装置、系统、技术或方法可以以硬件、软件、固件、专用电路或逻辑、通用硬件或控制器或其他计算设备或其某种组合来实现。

本发明的实施例可以由计算机软件来实现，该计算机软件由移动设备的数据处理器诸如在处理器实体中可执行，或者由硬件来实现，或者由软件和硬件的组合来实现。包括软件例程、小程序和/或宏的计算机软件或程序(也称为程序产品)可以存储在任何装置可读数据存储介质中，并且它们包括用于执行特定任务的程序指令。计算机程序产品可以包括当程序运行时被配置为执行实施例的一个或多个计算机可执行组件。一个或多个计算机可执行组件可以是至少一个软件代码或其一部分。另外，在这一点上，应当注意，如图中的逻辑流程的任何框可以表示程序步骤，或者互连的逻辑电路、框和功能，或者程序步骤和逻辑电路、框和功能的组合。软件可以存储在诸如存储器芯片或在处理器内实现的存储块等物理介质、诸如硬盘或软盘等磁性介质，以及诸如例如DVD及其数据变体、CD等光学介质上。物理介质是非瞬态介质。

本领域的技术人员应该明白，以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以作出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (10)

1.多终端中浏览器页面直接交互的方法，其特征在于，包括以下步骤：

S00、对前端代码进行扩展；

其中，扩展的内容包括增加应用于终端页交互的前端框架元素以及增加支撑模块，通过所述支撑模块实现会话建立、事件检查、数据发送、数据接收以及数据执行，以管理和实现跨终端浏览器之间的点对点通信所需的基础功能；

S10、以信令服务器作为主副端页建立点对点连接的辅助和信息交换中介，并通过所述信令服务器存储各端网络连接信息以及监控各端的心跳信息；

S20、通过应用服务器响应于各端的浏览器的访问请求，返回前端代码并在各端的浏览器上显示相同的初始页面并提供主副端标识以供用户选择；

S30、基于用户选择结果，进行主副端之间的会话建立的初始化操作，并向所述信令服务器发送会话描述协议的网络连接信息；

S40、所述信令服务器响应并向主端返回副端的网络连接信息，向副端返回主端的网络连接信息，以实现点对点连接的建立，形成主端和副端之间的数据直连通道；

S50、主端响应于用户的交互操作，触发交互事件并通过所述数据直连通道传输数据，以在副端上呈现交互效果。

2.如权利要求1所述的多终端中浏览器页面直接交互的方法，其特征在于，S00步骤中，增加应用于终端页交互的前端框架元素包括：设置终端页标识全局变量，用于对不同终端上浏览器页面做全局性的节点标识；自定义HTML标签元素并约定为交互内容的承载容器标签，在前端页面编码时使用；定义支撑自定义标签事件处理的基础JS程序、辅助JS函数，以及主端事件和副端函数映射关系的数据结构。

3.如权利要求2所述的多终端中浏览器页面直接交互的方法，其特征在于，S10步骤中，将所述信令服务器做成后端Web服务程序，以监听固定端口、接收HTTP Restful请求并返回响应信息。

4.如权利要求1所述的多终端中浏览器页面直接交互的方法，其特征在于，S10步骤中，所述信令服务器通过关系型数据库实现存储各端网络连接信息，网络连接信息包括主端网络连接信息表和副端网络连接信息表，所述主端网络连接信息表包含主端页标识字段和主端网络连接端点字段，副端网络连接信息表包含副端页标识字段、副端网络连接端点字段、关联主端页标识字段。

5.如权利要求4所述的多终端中浏览器页面直接交互的方法，其特征在于，所述信令服务器从所述心跳信息中提取出终端页标识和网络连接信息，并查找对应记录，比较是否存在变化，若发生变化则进行对应的更新/删除操作，以返回结果。

6.如权利要求1-5任意一项所述的多终端中浏览器页面直接交互的方法，其特征在于，所述支撑模块通过WebRTC实现会话建立，并向所述信令服务器发送基于WebRTC中的SDP会话描述协议。

7.如权利要求6所述的多终端中浏览器页面直接交互的方法，其特征在于，实现会话建立通过利用WebRTC的RTCPeerConnection对象封装出建立点对点连接的JS代码方法，利用RTCDataChannel对象封装出用于主副终端浏览器之间交互的数据直连通道的JS代码方法。

8.一种多终端中浏览器页面直接交互的系统，其特征在于，包括：

主副终端，用于显示和交互前端内容，分为一个主端和一个或多个副端；基于用户选择结果，进行主副端之间的会话建立的初始化操作，并向信令服务器发送会话描述协议的网络连接信息；主端响应于用户的交互操作，触发交互事件并通过数据直连通道传输数据，以在副端上呈现交互效果；

信令服务器，作为主副端页建立点对点连接的辅助和信息交换中介，存储各端网络连接信息以及监控各端的心跳信息；响应各端心跳并向主端返回副端的网络连接信息，向副端返回主端的网络连接信息，以实现点对点连接的建立，形成主端和副端之间的数据直连通道；

应用服务器，响应于各端的浏览器的访问请求，返回前端代码，使得各端的浏览器上显示相同的初始页面并提供主副端标识以供用户选择；

前端代码扩展模块，用于增加应用于终端页交互的前端框架元素，包括设置终端页标识全局变量、自定义HTML标签和属性、定义支撑自定义标签事件处理的基础JS程序和辅助JS函数，以及标识和对应事件的前端函数映射关系的数据结构，以简化交互开发以及形成实现特性内容展示和交互的标准方法；

支撑模块，包括会话建立模块、支撑主端页功能的事件检查模块和数据发送模块、支撑副端页功能的数据接收模块和数据执行模块，通过会话建立模块实现会话建立，通过事件检查模块和数据发送模块实现事件检查和数据发送，通过数据接收模块和数据执行模块实现数据接收以及数据执行，以管理和实现跨终端浏览器之间的点对点通信和事件数据交互所需的基础功能。

9.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行权利要求1至7任一项所述的多终端中浏览器页面直接交互的方法。

10.一种可读存储介质，其特征在于，所述可读存储介质中存储有计算机程序，所述计算机程序包括用于控制过程以执行过程的程序代码，所述过程包括根据权利要求1至7任一项所述的多终端中浏览器页面直接交互的方法。