CN115242764B - 针对前端的多端通信方法、系统、设备及存储介质 - Google Patents

针对前端的多端通信方法、系统、设备及存储介质 Download PDF

Info

Publication number
CN115242764B
CN115242764B CN202210859073.0A CN202210859073A CN115242764B CN 115242764 B CN115242764 B CN 115242764B CN 202210859073 A CN202210859073 A CN 202210859073A CN 115242764 B CN115242764 B CN 115242764B
Authority
CN
China
Prior art keywords
communication
page
class
terminal
sub
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202210859073.0A
Other languages
English (en)
Other versions
CN115242764A (zh
Inventor
张娅
张国辉
吴震操
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ping An Technology Shenzhen Co Ltd
Original Assignee
Ping An Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Ping An Technology Shenzhen Co Ltd filed Critical Ping An Technology Shenzhen Co Ltd
Priority to CN202210859073.0A priority Critical patent/CN115242764B/zh
Publication of CN115242764A publication Critical patent/CN115242764A/zh
Application granted granted Critical
Publication of CN115242764B publication Critical patent/CN115242764B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04LTRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00Network arrangements or protocols for supporting network services or applications
    • H04L67/01Protocols
    • H04L67/02Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04LTRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00Network arrangements or protocols for supporting network services or applications
    • H04L67/14Session management
    • H04L67/141Setup of application sessions

Landscapes

  • Engineering & Computer Science (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Signal Processing (AREA)
  • Computer And Data Communications (AREA)

Abstract

本发明提出一种针对前端的多端通信方法、系统、设备及存储介质,该方法包括:获取通信类别参数;根据通信类别参数,调用前端多端通信方法,以使得根据通信类别参数从预设通信方法中选取对应的目标通信方法,前端多端通信方法中包括前端多端通信类和预设通信方法,前端多端通信类包括统一格式的事件注册方法和消息发送方法;对前端多端通信类进行实例化,并利用实例化后的前端多端通信类的事件注册方法和消息发送方法,按照所述目标通信方法,实现第一端和第二端之间的通信。本发明可以降低开发者对各种通信场景的学习成本,防止开发者对不同通信场景的技术和插件产生选择困难,且代码更易于阅读和维护,可以提升开发效率,降低人力成本。

Description

针对前端的多端通信方法、系统、设备及存储介质
技术领域
本发明涉及通信技术领域,尤其涉及一种针对前端的多端通信方法、系统、设备及存储介质。
背景技术
目前前端通信中,常见的几种前端通信场景有跨组件通信、跨页面通信和sokect通信,但是不同前端通信场景所用的通信方法是不同的,开发者会根据具体通信诉求选择不同的插件,编写代码来实现,但是针对不同通信诉求,开发者在选择插件时,容易眼花缭乱,不同通信诉求对应的注册事件和发布消息的写法都不尽相同,导致代码可读性和可维护性差,需要浪费很多时间去学习、选择、开发。
发明内容
本发明提供一种针对前端的多端通信方法、系统、设备及存储介质,其主要目的在于对不同种类的前端通信方式规定统一通信格式和通信方法,有效提高通信方法代码的研发效率和测试效率。
第一方面,本发明实施例提供一种针对前端的多端通信方法,包括:
获取通信类别参数,所述通信类别参数包括跨组件通信类别参数、跨页面通信类别参数以及后端通信类别参数;
根据所述通信类别参数,调用前端多端通信方法,以使得根据所述通信类别参数从预设通信方法中选取对应的目标通信方法,所述前端多端通信方法中包括前端多端通信类和所述预设通信方法,所述前端多端通信类包括统一格式的事件注册方法和消息发送方法;
对所述前端多端通信类进行实例化,并利用实例化后的前端多端通信类的事件注册方法和消息发送方法,按照所述目标通信方法,实现第一端和第二端之间的通信。
优选地,所述前端多端通信方法通过如下方式得到:通过对events插件、iframe通信的post message方法和socket通信方法进行整合,提取出events插件、iframe通信的post message方法和socket通信方法中相同的事件注册方法和消息发送方法,对提取出来的事件注册方法和消息发送方法的输入参数和输出参数进行格式统一,将格式统一后的事件注册方法和格式统一后的消息发送方法分别作为所述前端多端通信类中的事件注册方法和消息发送方法。
优选地,所述通信类别参数为所述跨组件通信类别参数,所述对所述前端多端通信类进行实例化,并利用实例化后的前端多端通信类的事件注册方法和消息发送方法,按照所述目标通信方法,实现第一端和第二端之间的通信,包括:
对所述前端多端通信类进行实例化,得到实例化后的前端多端通信类,所述第一端为第一组件,所述第二端为第二组件;
利用实例化后的前端多端通信类中的事件注册方法,对所述第一组件进行事件监控;
若所述第一组件触发与所述事件监控相对应的事件,则通过实例化后的前端多端通信类中的消息发送方法,使得所述第二组件向所述第一组件发送消息。
优选地,所述通信类别参数为所述跨页面通信类别参数,所述对所述前端多端通信类进行实例化,并利用实例化后的前端多端通信类的事件注册方法和消息发送方法,按照所述目标通信方法,实现第一端和第二端之间的通信,包括:
对所述前端多端通信类进行实例化,得到实例化后的前端多端通信类,所述第一端为第一子页面,所述第二端为第二子页面;
若所述第一子页面和所述第二子页面为父子关系,则获取所述第二子页面对应的子命名空间,利用实例化后的前端多端通信类中的事件注册方法,对所述第二子页面进行事件监控,若所述第二子页面触发与所述事件监控相对应的事件,则根据实例化后的前端多端通信类中的消息发送方法和所述子命名空间,使得所述第一子页面向所述第二子页面发送目标消息。
优选地,还包括:
若所述第一子页面和所述第二子页面为兄弟关系,则获取所述第一子页面和所述第二子页面对应的父页面,并获取所述父页面对应的父命名空间;
对所述父页面和所述第一子页面建立连接,对所述父页面和所述第二子页面建立连接;
利用实例化后的前端多端通信类中的事件注册方法,对所述父页面进行事件监控,若所述父页面触发与所述事件监控相对应的事件,则根据实例化后的前端多端通信类中的消息发送方法和所述父命名空间,使得所述第一子页面向所述父页面发送目标消息;
利用实例化后的前端多端通信类中的事件注册方法,对所述第二子页面进行事件监控,若所述第二子页面触发与所述事件监控相对应的事件,则根据实例化后的前端多端通信类中的消息发送方法和所述子命名空间,使得所述父页面向所述第二子页面发送所述目标消息。
优选地,所述对所述父页面和所述第一子页面建立连接,包括:
通过所述第一子页面发送注册消息给所述父页面;
若所述父页面接收到所述注册消息,则向所述第一子页面发送回执消息;
若所述第一子页面接收到所述回执消息,则判断所述父页面和所述第一子页面建立连接成功,否则,判断所述父页面和所述第一子页面建立连接失败。
优选地,所述通信类别参数为所述后端通信类别参数,所述对所述前端多端通信类进行实例化,并利用实例化后的前端多端通信类的事件注册方法和消息发送方法,按照所述目标通信方法,实现第一端和第二端之间的通信,包括:
对所述前端多端通信类进行实例化,得到实例化后的前端多端通信类,所述第一端为前端,所述第二端为后端;
通过实例化后的前端多端通信类的事件注册方法,对所述后端进行监控,并接收所述后端发送的消息;
通过实例化后的前端多端通信类的消息发送方法,使得所述前端向所述后端发送消息。
第二方面,本发明实施例提供一种针对前端的多端通信系统,包括:
类别模块,用于获取通信类别参数,所述通信类别参数包括跨组件通信类别参数、跨页面通信类别参数以及后端通信类别参数;
选择模块,用于根据所述通信类别参数,调用前端多端通信方法,以使得根据所述通信类别参数从预设通信方法中选取对应的目标通信方法,所述前端多端通信方法中包括前端多端通信类和所述预设通信方法,所述前端多端通信类包括统一格式的事件注册方法和消息发送方法;
通信模块,用于对所述前端多端通信类进行实例化,并利用实例化后的前端多端通信类的事件注册方法和消息发送方法,按照所述目标通信方法,实现第一端和第二端之间的通信。
第三方面,本发明实施例提供一种计算机设备,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现上述针对前端的多端通信方法的步骤。
第四方面,本发明实施例提供一种计算机存储介质,所述计算机存储介质存储有计算机程序,所述计算机程序被处理器执行时实现上述针对前端的多端通信方法的步骤。
本发明实施例提出一种针对前端的多端通信方法、系统、设备及存储介质,通过通信类别参数来区分不同种类的多端通信,方便后续根据通信类别参数的不同,自适应调整通信方法;通过前端多端通信类对通信过程中涉及到的数据格式和方法格式进行统一,在各种通信场景下使用的格式相同,可以降低开发者对各种通信场景的学习成本,防止开发者对不同通信场景的技术和插件产生选择困难,且代码更易于阅读和维护,可以提升开发效率,降低人力成本;另,通过包含各种通信场景对应的预设通信方法,再根据通信类别参数从所有预设通信方法中选取出合适的目标通信方法,根据不同的通信场景选取不同的通信方法,实现多端通信。
附图说明
图1为本发明实施例提供的一种针对前端的多端通信方法的应用场景图;
图2为本发明实施例提供的一种针对前端的多端通信方法的流程图;
图3为本发明实施例提供的一种针对前端的多端通信系统的结构示意图;
图4为本发明实施例中提供的一种计算机设备的结构示意图。
本发明目的的实现、功能特点及优点将结合实施例,参照附图做进一步说明。
具体实施方式
应当理解,此处所描述的具体实施例仅仅用以解释本发明,并不用于限定本发明。
图1为本发明实施例提供的一种针对前端的多端通信方法的应用场景图,如图1所示,用户在客户端中输入通信类别参数,客户端接收到该通信类别参数后,将该通信类别参数发送给服务端,服务端接收到该通信类别参数后,执行该一种针对前端的多端通信方法,实现第一端和第二端之间的通信。
需要说明的是,服务端可以用独立的服务器或者是多个服务器组成的服务器集群来实现。客户端可为智能手机、平板电脑、笔记本电脑、台式计算机等,但并不局限于此。客户端和服务端可以通过蓝牙、USB(Universal Serial Bus,通用串行总线)或者其他通讯连接方式进行连接,本发明实施例在此不做限制。
前端即网站前台部分,是运行在PC端、移动端等浏览器上展现给用户浏览的网页,随着互联网技术的发展,HTML5、CSS3和前端框架的应用普及,跨平台响应式网页设计能够适应各种屏幕分辨率,合适的动效设计,给用户带来极高的用户体验。在实际网页开发过程中,前端通信是十分频繁的。在前端多端通信中,常见的多端通信场景有跨组件通信、跨页面通信和前端与后端的通信。对于跨组件通信,在常规的跨组件通信中,一般是基于前端框架提供的能力来实现的,也可以通过不限制与框架的技术方案即发布、订阅模式来实现跨组件的通信,但是市面上发布、订阅模式的相关插件较多,在选择上容易眼花缭乱;对于跨页面通信,目前在iframe通信上,是通过post message的方式来通信的,开发者需要在父页面和子页面进行事件注册,编写接受消息的监听函数和发送消息的函数,当然,同一个页面,当作为父页面和子页面不同角色的时候,在发消息时的写法是不相同的,这也使得开发者想要实现iframe通信时,需要去理解post message的使用方法以及父子关系的逻辑。对于socket通信,前端与服务端之间进行socket通信,一般选用原生的websocket对象或者sokect.io这样的插件,每个开发者在使用时,也需要去了解用法,或者因为选型的不同,写法也大不相同。基于此,本发明实施例提供一种可同时兼容跨组件通信、跨页面通信和前端与后端通信三种方式的针对前端的多端通信方法,图2为本发明实施例提供的一种针对前端的多端通信方法的流程图,如图2所示,该方法包括:
S210,获取通信类别参数,所述通信类别参数包括跨组件通信类别参数、跨页面通信类别参数以及后端通信类别参数;
首先获取通信类别参数,该通信类别参数是与通信的多端相关联的,并且是事先约定好的,举例地,组件是对数据和方法的简单封装,本发明实施例中的组件特指软件组件,为自包含的、可编程的、可重用的、与语言无关的软件单元,软件组件可以很容易被用于组装应用程序中,组件的接口和组件的实现相分离,甚至调用者使用的接口和组件并不在同一位置,调用者只需要知道接口并访问接口就可以使用组件,组件大大方便了软件的模块化开发和测试,一般而言,每个组件对应一个功能,不同组件之间进行通信在研发过程中是经常遇到的情况,如果是两个不同组件进行通信,那么就是跨组件通信,对应的通信类别参数为A;iframe是HTML标签,iframes提供了一个简单的方式把一个网站的内容嵌入到另一个网站中,iframe元素会创建包含另外一个文档的内联框架,当前页面和嵌入在当前页面上的页面之间为父子关系,两个嵌入在同一个页面上的页面为兄弟关系,在目前网页开发过程中,网页内嵌也是十分常见的情况,如果是任意页面进行通信,那么就是跨页面通信,对应的通信类别参数为B;前端作为用户与后端交互的载体,在前端与用户的交互过程中,有些事情光靠前端就可以做出响应,比如在网页上做了一个计算器的功能,当用户输入算式之后,JS就可以直接计算出结果并显示给用户,整个过程不需要服务器的参与就可以完成,但有些事情,光有前端是无法完成的,此时前端就需要交给后端来处理,拿到处理结果之后再交给用户,在这个过程中,前端可以让用户一直停留在当前页面,交互过程具有良好的连续性,如果是前端与后端通信,那么就是后端类别通信,对应的通信类别参数为C。
本发明实施例通过通信类别参数来区分不同种类的多端通信,方便后续根据通信类别参数的不同,自适应调整通信方法。
S220,根据所述通信类别参数,调用前端多端通信方法,以使得根据所述通信类别参数从预设通信方法中选取对应的目标通信方法,所述前端多端通信方法中包括前端多端通信类和所述预设通信方法,所述前端多端通信类包括统一格式的事件注册方法和消息发送方法;
然后根据该通信类别参数,调用前端多端通信方法,当该前端多端通信方法被调用后,会根据该通信类别参数,从预设通信方法中选取出与该通信类别参数相对应的目标通信方法,从而使得该目标通信方法和通信类别是相对应的。本发明实施例中预设通信方法是预先设置的通信规则,显而易见地是,不同类别的多端通信方法是不同的,因此本发明实施例中将所有多端通信方法都包括在预设通信方法中,当要从中进行选择时,根据通信类别参数选择与该通信类别参数对应的目标通信方法。本发明实施例中的前端多端通信方法可以是将每种前端多端通信方法进行整合,并采用统一的格式来进行事件注册、消息发送,本发明实施例中的前端多端通信方法被做成插件的形式,插件是指会随浏览器的启动自动执行的程序,方便开发人员进行直接调用使用,本发明实施例中前端多端通信方法包括前端多端通信类和预设通信方法,该前端多端通信类一般包括参数定义和函数定义,是将一个需要描述的事物抽象从一系列属性和方法,具体所包含的属性和方法可以根据实际情况进行确定,本发明实施例在此不做具体限定。另外,该前端多端通信类内部包括事件注册方法和消息发送方法,该时间注册方法用来进行注册事件,消息发送方法用来发送消息,事件注册方法和消息发送方法可以被看做是两个函数,这两个函数先在前端多端通信类中进行声明。还需要说明的是,为了使得开发过程中的代码简洁高效,方便阅读理解,本发明实施例中对前端多端通信方法中涉及到的输入参数、输出参数这些统一格式,具体所选择的格式可以根据实际情况进行选择,本发明实施例在此不做具体限定,提升开发效率,降低人力成本。
本发明实施例中通过前端多端通信类对通信过程中涉及到的数据格式和方法格式进行统一,在各种通信场景下使用的格式相同,可以降低开发者对各种通信场景的学习成本,防止开发者对不同通信场景的技术和插件产生选择困难,且代码更易于阅读和维护,可以提升开发效率,降低人力成本;另,通过包含各种通信场景对应的预设通信方法,再根据通信类别参数从所有预设通信方法中选取出合适的目标通信方法,根据不同的通信场景选取不同的通信方法,实现多端通信。
S230,对所述前端多端通信类进行实例化,并利用实例化后的前端多端通信类的事件注册方法和消息发送方法,按照所述目标通信方法,实现第一端和第二端之间的通信。
最后对前端多端通信类进行实例化,实例化是指在面向对象的编程中,把用类创建对象的过程称为实例化,是将一个抽象的概念类,具体到该类实物的过程,类不同于函数,定义完之后无法直接使用,因为类只是一个抽象的概念,需要通过关键字new来实例化类,才可以使用,类实例化的语法格式如下:变量名=new类名([构造函数])。其中,变量名可以为任何PHP变量的名称,构造参数取决于类的构造函数,若无构造函数,则圆括号中为空,本发明实施例中crossEvents来表示前端多端通信类。然后利用实例化后的前端多端通信类的事件注册方法和消息发送方法,按照目标通信方法中规定的通信规则,实现第一端和第二端之间的通信。
本发明实施例提供一种针对前端的多端通信方法,通过通信类别参数来区分不同种类的多端通信,方便后续根据通信类别参数的不同,自适应调整通信方法;通过前端多端通信类对通信过程中涉及到的数据格式和方法格式进行统一,在各种通信场景下使用的格式相同,可以降低开发者对各种通信场景的学习成本,防止开发者对不同通信场景的技术和插件产生选择困难,且代码更易于阅读和维护,可以提升开发效率,降低人力成本;另,通过包含各种通信场景对应的预设通信方法,再根据通信类别参数从所有预设通信方法中选取出合适的目标通信方法,根据不同的通信场景选取不同的通信方法,实现多端通信。
在上述实施例的基础上,优选地,所述前端多端通信方法通过如下方式得到:通过对events插件、iframe通信的post message方法和socket通信方法进行整合,提取出events插件、iframe通信的postmessage方法和socket通信方法中相同的事件注册方法和消息发送方法,对提取出来的事件注册方法和消息发送方法的输入参数和输出参数进行格式统一,将格式统一后的事件注册方法和格式统一后的消息发送方法分别作为所述前端多端通信类中的事件注册方法和消息发送方法。
具体地,本发明实施例中通过对events插件、iframe通信的post message方法和socket通信方法进行整合,具体整合方法是选取出这三种实现方法中所设计的参数和函数,将这些参数和函数提取出来,并经过统一格式处理,将统一格式后的参数作为前端多端通信类中的参数,将统一格式后的函数作为前端多端通信类中的函数,通过代码整合设计、封装,本发明实施例将发布、订阅模式的插件events和原生iframe通信postmessage、原生webscoket进行整合,得到该前端多端通信方法,便于开发者使用和理解,无任何其他学习成本,快速进行开发。
在上述实施例的基础上,优选地,若所述通信类别参数为所述跨组件通信类别参数,所述对所述前端多端通信类进行实例化,并利用实例化后的前端多端通信类的事件注册方法和消息发送方法,按照所述目标通信方法,实现第一端和第二端之间的通信,包括:
对所述前端多端通信类进行实例化,得到实例化后的前端多端通信类,所述第一端为第一组件,所述第二端为第二组件;
利用实例化后的前端多端通信类中的事件注册方法,对所述第一组件进行事件监控;
若所述第一组件触发与所述事件监控相对应的事件,则通过实例化后的前端多端通信类中的消息发送方法,使得所述第二组件向所述第一组件发送消息。
具体地,针对两个组件之间的通信,先对前端多端通信类进行实例化,进行实例化后,只有进行实例化后前端多端通信类中的事件注册方法和消息发送方法才能使用,然后利用实例化后的前端多端通信类中的事件注册方法,对第一组件进行事件监控,在实施过程中通过如下代码对第一组件进行事件监控:
crossEvents.on("name.setName",(data)=>{
//do something
})
此处,crossEvents即为实例化后的前端多端通信类,on表示事件注册方法,当第一组件和第二组件进行通信时,由于第一组件和第二组件属于同一个命名空间,因此,当第二组件需要向第一组件发送消息时,直接调用实例化后的前端多端通信类的消息发送方法即可,在实施过程中通过如下代码使得第二组件向第一组件发送消息:
crossEvents.send({action:"name.setName",{age:1}})
此处,send即表示消息发送方法,age:1为上一步中(data)那里输入的数据。
还需要说明的是,如果第一端为组件,第二端为页面,目标通信方法如下:
先对前端多端通信类进行实例化,进行实例化后,只有进行实例化后前端多端通信类中的事件注册方法和消息发送方法才能使用,然后利用实例化后的前端多端通信类中的事件注册方法,对组件进行事件监控,在实施过程中通过如下代码对组件进行事件监控:
crossEvents.on("name.setName",(data)=>{
//do something
})
此处,crossEvents即为实例化后的前端多端通信类,on表示事件注册方法,当组件和页面进行通信时,由于组件和页面不属于同一个命名空间,因此需要获取页面所在的命名空间,当组件需要向页面发送消息时,根据该页面所在的命名空间,直接调用实例化后的前端多端通信类的消息发送方法即可,在实施过程中通过如下代码使得第二组件向第一组件发送消息:
crossEvents.send({target:"A",action:"name.setName",{age:1}})
此处,A表示页面所在的命名空间。
在上述实施例的基础上,优选地,若所述通信类别参数为所述跨页面通信类别参数,所述对所述前端多端通信类进行实例化,并利用实例化后的前端多端通信类的事件注册方法和消息发送方法,按照所述目标通信方法,实现第一端和第二端之间的通信,包括:
对所述前端多端通信类进行实例化,得到实例化后的前端多端通信类,所述第一端为第一子页面,所述第二端为第二子页面;
若所述第一子页面和所述第二子页面为父子关系,则获取所述第二子页面对应的子命名空间,利用实例化后的前端多端通信类中的事件注册方法,对所述第二子页面进行事件监控,若所述第二子页面触发与所述事件监控相对应的事件,则根据实例化后的前端多端通信类中的消息发送方法和所述子命名空间,使得所述第一子页面向所述第二子页面发送目标消息。
具体地,如果第一端和第二端之间的通信为跨页面通信,则先根据两个页面之间的关系确定具体的通信方法,如果两个页面之间为父子关系,则可以直接进行通信,如果两个页面之间为兄弟关系,则需要通过两个页面对应的共同父页面间接进行通信。
如果第一子页面和第二子页面为父子关系,则目标通信方法如下:
对前端多端通信类进行实例化,得到实例化后的前端多端通信类,并且使得第一子页面和第二子页面建立连接,同时并获取第二子页面对应的子命名空间,然后利用实例化后的前端多端通信类中的事件注册方法,对第二子页面进行事件监控,具体监控方法与上述相同,详情请参考上述监控过程,本发明实施例在此不再赘述。如果第二子页面触发与事件监控相对应的事件,则根据实例化后的前端多端通信类中的消息发送方法和第二子页面对应的子命名空间,使得第一子页面向第二子页面发送目标消息,具体消息发送方法与上述相同,详情请参考上述监控过程,本发明实施例在此不再赘述。
在上述实施例的基础上,优选地,还包括:
若所述第一子页面和所述第二子页面为兄弟关系,则获取所述第一子页面和所述第二子页面对应的父页面,并获取所述父页面对应的父命名空间;
对所述父页面和所述第一子页面建立连接,对所述父页面和所述第二子页面建立连接;
利用实例化后的前端多端通信类中的事件注册方法,对所述父页面进行事件监控,若所述父页面触发与所述事件监控相对应的事件,则根据实例化后的前端多端通信类中的消息发送方法和所述父命名空间,使得所述第一子页面向所述父页面发送目标消息;
利用实例化后的前端多端通信类中的事件注册方法,对所述第二子页面进行事件监控,若所述第二子页面触发与所述事件监控相对应的事件,则根据实例化后的前端多端通信类中的消息发送方法和所述子命名空间,使得所述父页面向所述第二子页面发送所述目标消息。
具体地,如果第一子页面和第二子页面为兄弟关系,则先获取第一子页面和第二子页面对应的共同父页面,获取该父页面对应的命名空间、第一子页面对应的命名空间和第二子页面对应的命名空间,在对前端多端类进行实例化后,对父页面和第一子页面建立连接,对父页面和第二子页面建立连接,建立连接是指建立通信连接,然后利用实例化后的前端多端通信类中的事件注册方法对父页面进行事件监控,如果父页面触发与事件监控相对应的事件,则根据实例化后的前端多端通信类中的消息发送方法和父命名空间,使得所述第一子页面向所述父页面发送目标消息,由于第一子页面和父页面处于不同命名空间,因此本发明实施例中通过父命名空间代表父页面所处空间,命名空间可以看做是一个独一无二的身份标识,类似于身份证ID。
第一子页面向父页面发送消息成功后,父页面再将该消息发送给第二子页面,具体步骤如下:利用实例化后的前端多端通信类中的事件注册方法,对第二子页面进行事件监控,如果第二子页面触发与事件监控相对应的事件,则根据实例化后的前端多端通信类中的消息发送方法和子命名空间,使得父页面向第二子页面发送目标消息。同样地,子命名空间也是用来代表子页面所在的空间,通过该子命名空间可以标识出第二子页面所在的空间。
通过以上可知,对于不同类型的通信场景,先为第一端或第二端进行前端多端通信类的实例化,得到实例化后的前端多端通信类,并且为该第一端或第二端赋予一个独一无二的命名空间,然后通过实例化后的前端多端通信类中的事件注册方法,注册事件。并通过实例化后的前端多端通信类中的消息发送方法,发送消息。
在上述实施例的基础上,优选地,所述对所述父页面和所述第一子页面建立连接,包括:
通过所述第一子页面发送注册消息给所述父页面;
若所述父页面接收到所述注册消息,则向所述第一子页面发送回执消息;
若所述第一子页面接收到所述回执消息,则判断所述父页面和所述第一子页面建立连接成功,否则,判断所述父页面和所述第一子页面建立连接失败。
具体地,本发明实施例中的第一子页面和父页面通过TCP通信连接,第一子页面先向父页面发送注册消息,父页面接收到该注册消息后,向第一子页面发送回执消息,如果第一子页面接收到该回执消息,就判断父页面和第一子页面建立连接成功,否则,父页面和第一子页面建立连接失败。
在上述实施例的基础上,优选地,所述通信类别参数为所述后端通信类别参数,所述对所述前端多端通信类进行实例化,并利用实例化后的前端多端通信类的事件注册方法和消息发送方法,按照所述目标通信方法,实现第一端和第二端之间的通信,包括:
对所述前端多端通信类进行实例化,得到实例化后的前端多端通信类,所述第一端为前端,所述第二端为后端;
通过实例化后的前端多端通信类的事件注册方法,对所述后端进行监控,并接收所述后端发送的消息;
通过实例化后的前端多端通信类的消息发送方法,使得所述前端向所述后端发送消息。
具体地,如果是前端和后端之间进行通信,则利用传统的socket通信,为每个后端socket服务进行前端多端通信类进行实例化,得到实例化后的前端多端通信类,然后通过实例化后的前端多端通信类的事件注册方法,对后端进行监控,并接收后端发送的消息;通过实例化后的前端多端通信类的消息发送方法,使得前端向后端发送消息。
还需要说明的是,该前端多端通信方法中还包括日志记录函数,该日志记录函数会记录每次通信的日志,便于后续调试,并且日志记录的数量可以通过配置来修改。有了通信记录日志,便于开发调试,不再无迹可寻。
图3为本发明实施例提供的一种针对前端的多端通信系统的结构示意图,如图3所示,该系统包括类别模块310、选择模块320和通信模块330,其中:
类别模块310用于获取通信类别参数,所述通信类别参数包括跨组件通信类别参数、跨页面通信类别参数以及后端通信类别参数;
选择模块320用于根据所述通信类别参数,调用前端多端通信方法,以使得根据所述通信类别参数从预设通信方法中选取对应的目标通信方法,所述前端多端通信方法中包括前端多端通信类和所述预设通信方法,所述前端多端通信类包括统一格式的事件注册方法和消息发送方法;
通信模块330用于对所述前端多端通信类进行实例化,并利用实例化后的前端多端通信类的事件注册方法和消息发送方法,按照所述目标通信方法,实现第一端和第二端之间的通信。
本实施例为与上述方法对应的系统实施例,其具体执行过程与上述方法实施例相同,详情请参考上述方法实施例,本系统实施例在此不再赘述。
在上述实施例的基础上,优选地,所述选择模块中包括选择单元,所述选择单元用于获取所述前端多端通信方法,通过对events插件、iframe通信的postmessage方法和socket通信方法进行整合,提取出events插件、iframe通信的postmessage方法和socket通信方法中相同的事件注册方法和消息发送方法,对提取出来的事件注册方法和消息发送方法的输入参数和输出参数进行格式统一,将格式统一后的事件注册方法和格式统一后的消息发送方法分别作为所述前端多端通信类中的事件注册方法和消息发送方法。
在上述实施例的基础上,优选地,所述通信类别参数为所述跨组件通信类别参数,所述通信模块包括第一实例化单元、第一监控单元和第一发送单元,其中:
所述第一实例化单元用于对所述前端多端通信类进行实例化,得到实例化后的前端多端通信类,所述第一端为第一组件,所述第二端为第二组件;
所述第一监控单元用于利用实例化后的前端多端通信类中的事件注册方法,对所述第一组件进行事件监控;
所述第一发送单元用于若所述第一组件触发与所述事件监控相对应的事件,则通过实例化后的前端多端通信类中的消息发送方法,使得所述第二组件向所述第一组件发送消息。
在上述实施例的基础上,优选地,所述通信类别参数为所述跨页面通信类别参数,所述通信模块包括第二实例化单元、第二监控单元和第二发送单元,其中:
所述第二实例化单元用于对所述前端多端通信类进行实例化,得到实例化后的前端多端通信类,所述第一端为第一子页面,所述第二端为第二子页面;
所述第二监控单元用于若所述第一子页面和所述第二子页面为父子关系,则获取所述第二子页面对应的子命名空间,利用实例化后的前端多端通信类中的事件注册方法,对所述第二子页面进行事件监控;
所述第二发送单元用于若所述第二子页面触发与所述事件监控相对应的事件,则根据实例化后的前端多端通信类中的消息发送方法和所述子命名空间,使得所述第一子页面向所述第二子页面发送目标消息。
在上述实施例的基础上,优选地,所述通信类别参数为所述跨页面通信类别参数,所述选择模块包括第三实例化单元、第三监控单元和第三发送单元,其中:
所述第三实例化单元用于若所述第一子页面和所述第二子页面为兄弟关系,则获取所述第一子页面和所述第二子页面对应的父页面,并获取所述父页面对应的父命名空间,对所述父页面和所述第一子页面建立连接,对所述父页面和所述第二子页面建立连接;
所述第三监控单元用于利用实例化后的前端多端通信类中的事件注册方法,对所述父页面进行事件监控,若所述父页面触发与所述事件监控相对应的事件,则根据实例化后的前端多端通信类中的消息发送方法和所述父命名空间,使得所述第一子页面向所述父页面发送目标消息;
所述第三监控单元用于利用实例化后的前端多端通信类中的事件注册方法,对所述第二子页面进行事件监控,若所述第二子页面触发与所述事件监控相对应的事件,则根据实例化后的前端多端通信类中的消息发送方法和所述子命名空间,使得所述父页面向所述第二子页面发送所述目标消息。
在上述实施例的基础上,优选地,所述第三实例化单元还包括注册单元、回执单元和连接单元,其中:
所述注册单元用于通过所述第一子页面发送注册消息给所述父页面;
所述回执单元用于若所述父页面接收到所述注册消息,则向所述第一子页面发送回执消息;
所述连接单元用于若所述第一子页面接收到所述回执消息,则判断所述父页面和所述第一子页面建立连接成功,否则,判断所述父页面和所述第一子页面建立连接失败。
在上述实施例的基础上,优选地,所述通信类别参数为所述后端通信类别参数,所述选择模块包括第四实例化单元、第四监控单元和第四发送单元,其中:
所述第四实例化单元用于对所述前端多端通信类进行实例化,得到实例化后的前端多端通信类,所述第一端为前端,所述第二端为后端;
所述第四监控单元用于通过实例化后的前端多端通信类的事件注册方法,对所述后端进行监控,并接收所述后端发送的消息;
所述第四发送单元用于通过实例化后的前端多端通信类的消息发送方法,使得所述前端向所述后端发送消息。
上述针对前端的多端通信系统中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中,也可以以软件形式存储于计算机设备中的存储器中,以便于处理器调用执行以上各个模块对应的操作。
图4为本发明实施例中提供的一种计算机设备的结构示意图,该计算机设备可以是服务器,其内部结构图可以如图4所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中,该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括计算机存储介质、内存储器。该计算机存储介质存储有操作系统、计算机程序和数据库。该内存储器为计算机存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储执行针对前端的多端通信方法过程中生成或获取的数据,如通信类别参数。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种针对前端的多端通信方法。
在一个实施例中,提供了一种计算机设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,处理器执行计算机程序时实现上述实施例中的针对前端的多端通信方法的步骤。或者,处理器执行计算机程序时实现针对前端的多端通信系统这一实施例中的各模块/单元的功能。
在一实施例中,提供一计算机存储介质,该计算机存储介质上存储有计算机程序,该计算机程序被处理器执行时实现上述实施例中针对前端的多端通信方法的步骤。或者,该计算机程序被处理器执行时实现上述针对前端的多端通信系统这一实施例中的各模块/单元的功能。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的计算机程序可存储于一非易失性计算机可读取存储介质中,该计算机程序在执行时,可包括如上述各方法的实施例的流程。其中,本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用,均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限,RAM以多种形式可得,诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
所属领域的技术人员可以清楚地了解到,为了描述的方便和简洁,仅以上述各功能单元、模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能单元、模块完成,即将所述装置的内部结构划分成不同的功能单元或模块,以完成以上描述的全部或者部分功能。
以上所述实施例仅用以说明本发明的技术方案,而非对其限制;尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围,均应包含在本发明的保护范围之内。

Claims (10)

1.一种针对前端的多端通信方法,其特征在于,包括:
获取通信类别参数,所述通信类别参数包括跨组件通信类别参数、跨页面通信类别参数以及后端通信类别参数;
根据所述通信类别参数,调用前端多端通信方法,以使得根据所述通信类别参数从预设通信方法中选取对应的目标通信方法,所述前端多端通信方法中包括前端多端通信类和所述预设通信方法,所述前端多端通信类包括统一格式的事件注册方法和消息发送方法;
对所述前端多端通信类进行实例化,并利用实例化后的前端多端通信类的事件注册方法和消息发送方法,按照所述目标通信方法,实现第一端和第二端之间的通信。
2.根据权利要求1所述的针对前端的多端通信方法,其特征在于,所述前端多端通信方法通过如下方式得到:
通过对第一通信方法、第二通信方法和第三通信方法进行整合,提取出所述第一通信方法、所述第二通信方法和所述第三通信方法中相同的事件注册方法和消息发送方法,对提取出来的事件注册方法和消息发送方法的输入参数和输出参数进行格式统一,将格式统一后的事件注册方法和格式统一后的消息发送方法分别作为所述前端多端通信类中的事件注册方法和消息发送方法;
其中,所述第一通信方法为events插件,所述第二通信方法为iframe通信的postmessage方法,所述第三通信方法为socket通信方法。
3.根据权利要求1所述的针对前端的多端通信方法,其特征在于,所述通信类别参数为所述跨组件通信类别参数,所述对所述前端多端通信类进行实例化,并利用实例化后的前端多端通信类的事件注册方法和消息发送方法,按照所述目标通信方法,实现第一端和第二端之间的通信,包括:
对所述前端多端通信类进行实例化,得到实例化后的前端多端通信类,所述第一端为第一组件,所述第二端为第二组件;
利用实例化后的前端多端通信类中的事件注册方法,对所述第一组件进行事件监控;
若所述第一组件触发与所述事件监控相对应的事件,则通过实例化后的前端多端通信类中的消息发送方法,使得所述第二组件向所述第一组件发送消息。
4.根据权利要求1所述的针对前端的多端通信方法,其特征在于,所述通信类别参数为所述跨页面通信类别参数,所述对所述前端多端通信类进行实例化,并利用实例化后的前端多端通信类的事件注册方法和消息发送方法,按照所述目标通信方法,实现第一端和第二端之间的通信,包括:
对所述前端多端通信类进行实例化,得到实例化后的前端多端通信类,所述第一端为第一子页面,所述第二端为第二子页面;
若所述第一子页面和所述第二子页面为父子关系,则获取所述第二子页面对应的子命名空间,利用实例化后的前端多端通信类中的事件注册方法,对所述第二子页面进行事件监控;
若所述第二子页面触发与所述事件监控相对应的事件,则根据实例化后的前端多端通信类中的消息发送方法和所述子命名空间,使得所述第一子页面向所述第二子页面发送目标消息。
5.根据权利要求4所述的针对前端的多端通信方法,其特征在于,还包括:
若所述第一子页面和所述第二子页面为兄弟关系,则获取所述第一子页面和所述第二子页面对应的父页面,并获取所述父页面对应的父命名空间;
对所述父页面和所述第一子页面建立连接,对所述父页面和所述第二子页面建立连接;
利用实例化后的前端多端通信类中的事件注册方法,对所述父页面进行事件监控,若所述父页面触发与所述事件监控相对应的事件,则根据实例化后的前端多端通信类中的消息发送方法和所述父命名空间,使得所述第一子页面向所述父页面发送目标消息;
利用实例化后的前端多端通信类中的事件注册方法,对所述第二子页面进行事件监控,若所述第二子页面触发与所述事件监控相对应的事件,则根据实例化后的前端多端通信类中的消息发送方法和所述子命名空间,使得所述父页面向所述第二子页面发送所述目标消息。
6.根据权利要求5所述的针对前端的多端通信方法,其特征在于,所述对所述父页面和所述第一子页面建立连接,包括:
通过所述第一子页面发送注册消息给所述父页面;
若所述父页面接收到所述注册消息,则向所述第一子页面发送回执消息;
若所述第一子页面接收到所述回执消息,则判断所述父页面和所述第一子页面建立连接成功,否则,判断所述父页面和所述第一子页面建立连接失败。
7.根据权利要求1所述的针对前端的多端通信方法,其特征在于,所述通信类别参数为所述后端通信类别参数,所述对所述前端多端通信类进行实例化,并利用实例化后的前端多端通信类的事件注册方法和消息发送方法,按照所述目标通信方法,实现第一端和第二端之间的通信,包括:
对所述前端多端通信类进行实例化,得到实例化后的前端多端通信类,所述第一端为前端,所述第二端为后端;
通过实例化后的前端多端通信类的事件注册方法,对所述后端进行监控,并接收所述后端发送的消息;
通过实例化后的前端多端通信类的消息发送方法,使得所述前端向所述后端发送消息。
8.一种针对前端的多端通信系统,其特征在于,包括:
类别模块,用于获取通信类别参数,所述通信类别参数包括跨组件通信类别参数、跨页面通信类别参数以及后端通信类别参数;
选择模块,用于根据所述通信类别参数,调用前端多端通信方法,以使得根据所述通信类别参数从预设通信方法中选取对应的目标通信方法,所述前端多端通信方法中包括前端多端通信类和所述预设通信方法,所述前端多端通信类包括统一格式的事件注册方法和消息发送方法;
通信模块,用于对所述前端多端通信类进行实例化,并利用实例化后的前端多端通信类的事件注册方法和消息发送方法,按照所述目标通信方法,实现第一端和第二端之间的通信。
9.一种计算机设备,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,其特征在于,所述处理器执行所述计算机程序时实现如权利要求1至7中任一项所述针对前端的多端通信方法的步骤。
10.一种计算机存储介质,所述计算机存储介质存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述针对前端的多端通信方法的步骤。
CN202210859073.0A 2022-07-21 2022-07-21 针对前端的多端通信方法、系统、设备及存储介质 Active CN115242764B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210859073.0A CN115242764B (zh) 2022-07-21 2022-07-21 针对前端的多端通信方法、系统、设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210859073.0A CN115242764B (zh) 2022-07-21 2022-07-21 针对前端的多端通信方法、系统、设备及存储介质

Publications (2)

Publication Number Publication Date
CN115242764A CN115242764A (zh) 2022-10-25
CN115242764B true CN115242764B (zh) 2023-10-27

Family

ID=83672793

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210859073.0A Active CN115242764B (zh) 2022-07-21 2022-07-21 针对前端的多端通信方法、系统、设备及存储介质

Country Status (1)

Country Link
CN (1) CN115242764B (zh)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103166964A (zh) * 2013-03-06 2013-06-19 中国人民解放军国防科学技术大学 用于超级计算系统监控的前后端实时通信方法
CN103905435A (zh) * 2014-03-14 2014-07-02 北京六间房科技有限公司 一种前端页面与后端服务器通信方法
CN113157272A (zh) * 2021-05-14 2021-07-23 中国建设银行股份有限公司 一种自动化生成参数的方法和装置
CN113709171A (zh) * 2021-09-01 2021-11-26 北京沃东天骏信息技术有限公司 一种用于跨组件状态通信的方法和装置

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2006012014A2 (en) * 2004-06-28 2006-02-02 Jen-Wei Kuo Security protection apparatus and methods for endpoint computing systems
US10616038B2 (en) * 2014-06-24 2020-04-07 Vmware, Inc. Method and system for clustering event messages and managing event-message clusters
US10915599B2 (en) * 2018-11-15 2021-02-09 Elementor Ltd. System and method for producing transferable, modular web pages
US11258883B2 (en) * 2020-04-08 2022-02-22 Sap Se Generic communication layer

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103166964A (zh) * 2013-03-06 2013-06-19 中国人民解放军国防科学技术大学 用于超级计算系统监控的前后端实时通信方法
CN103905435A (zh) * 2014-03-14 2014-07-02 北京六间房科技有限公司 一种前端页面与后端服务器通信方法
CN113157272A (zh) * 2021-05-14 2021-07-23 中国建设银行股份有限公司 一种自动化生成参数的方法和装置
CN113709171A (zh) * 2021-09-01 2021-11-26 北京沃东天骏信息技术有限公司 一种用于跨组件状态通信的方法和装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
基于Flutter跨平台的畅享健康移动终端应用的设计与研究;郭方涛;中国优秀硕士学位论文全文数据库 信息科技辑(第1期);第E054-82页 *

Also Published As

Publication number Publication date
CN115242764A (zh) 2022-10-25

Similar Documents

Publication Publication Date Title
US10726195B2 (en) Filtered stylesheets
CN110198247B (zh) 接口测试方法及系统
JP2019520624A (ja) ページコンポーネント動的レイアウト
CN111782330B (zh) 一种基于Web应用的页面数据获取方法、装置及设备
CN109840083B (zh) 网页组件模板构建方法、装置、计算机设备和存储介质
CN110727429B (zh) 一种前端页面的生成方法、装置及设备
CN110704783A (zh) 基于自定义协议的h5页面与原生app的交互方法和装置
CN111858376A (zh) 请求报文生成方法和接口测试方法
CN113010827A (zh) 页面渲染方法、装置、电子设备以及存储介质
CN111666199B (zh) 在智能终端上执行的调试方法以及软件调试器
CN112395098A (zh) 应用程序接口调用方法、装置、存储介质和电子设备
US11687326B2 (en) Method and apparatus for data interaction
CN115242764B (zh) 针对前端的多端通信方法、系统、设备及存储介质
CN115809056B (zh) 组件复用实现方法、装置和终端设备、可读存储介质
CN110825622A (zh) 软件测试方法、装置、设备和计算机可读介质
CN111767498A (zh) 一种实现文件信息共享的方法和装置
WO2022099913A1 (zh) 界面配置方法、装置、设备及介质
CN113626392A (zh) 文档数据更新的方法和装置、电子设备和存储介质
CN115525305A (zh) 数据处理、应用启动方法、装置、计算机设备和存储介质
CN111966347A (zh) 前端驱动后端服务的方法、装置、设备和存储介质
CN110505258A (zh) 网页加载及响应方法、装置、计算机设备和存储介质
CN112306324B (zh) 信息处理方法、装置、设备和介质
CN114816385B (zh) 一种异构系统的集成方法、装置和设备以及存储介质
CN115185513A (zh) 界面的更新方法及装置、存储介质、计算机设备
CN116400959A (zh) 一种前端功能扩展装置、方法、设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant