System.ArgumentOutOfRangeException: 索引和长度必须引用该字符串内的位置。 参数名: length 在 System.String.Substring(Int32 startIndex, Int32 length) 在 zhuanliShow.Bind() 多终端中浏览器页面直接交互的方法、系统及其应用技术方案_技高网

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

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

【技术实现步骤摘要】

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


技术介绍

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

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

3、为此现有技术通常采用以下方法实现:

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

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

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


技术实现思路

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

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

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

4、s00、对前端代码进行扩展;

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

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

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

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

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

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

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

12、进一步地,s10步骤中,将信令服务器做成后端web服务程序,以监听固定端口、接收http restful请求并返回响应信息。

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

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

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

16、进一步地,实现会话建立通过利用webrtc的rtcpeerconnection对象封装出建立点对点连接的js代码方法,利用rtcdatachannel对象封装出用于主副终端浏览器之间交互的数据直连通道的js代码方法。

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

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

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

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

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

22、支撑模块,包括会话建立模块、支撑主端页功能的事件检查模块和数据发送模块、支撑副端页功能的数据接收模块和数据执行模块,通过会话建立模块实现会话建立,通过事件检查模块和数据发送模块实现事件检查和数据发送,通过数据接收模块和数据执行模块实现数据接收以及数据执行,以管理本文档来自技高网...

【技术保护点】

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

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.一种多终端中浏览器页面直接交互的系统,其特征在于,包括:

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

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

...

【技术特征摘要】

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

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

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

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

5.如权利要求4所述的多终端中浏览器页面直接交互的方法,其特征在于,所述信令服务器从所述...

【专利技术属性】
技术研发人员:郁强薛炜王文亮胡莉沙
申请(专利权)人:城云科技中国有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1