前端实现跨平台实时数据传输方法、第三方应用及系统与流程

本发明涉及跨平台数据传输，特别涉及一种前端实现跨平台实时数据传输方法、第三方应用及系统。

背景技术：

1、针对部署在两个不同环境下的平台，想要实现跨平台之间的实时数据传输现有的做法是：可以通过websocket技术来实现，该技术可以在浏览器和服务器之间建立一个持久性的双向通信通道。这样一来，前端就可以在任何平台上实时地接收后端传来的数据。

2、websocket是一种基于tcp协议的双向通信协议，它可以在浏览器和服务器之间建立持久连接，实现实时数据传输。websocket的实现原理是通过http协议进行握手，然后升级为websocket协议。具体来说，客户端向服务器发送一个http请求，请求头中包含upgrade字段，值为websocket，表示要升级为websocket协议。服务器收到请求后，返回一个http响应，响应头中也包含upgrade字段，值为websocket，表示同意升级为websocket协议。客户端收到响应后，就可以开始使用websocket协议进行双向通信了。在通信过程中，客户端和服务器可以互相发送消息，而不必每次都建立新的连接。这种持久连接的特性使得websocket在实时通信方面具有很大的优势。

3、但是同时也存在以下几个缺陷：

4、兼容性问题：websocket是html5中新增的协议，因此在一些老旧的浏览器中可能无法支持。此外，一些防火墙和代理服务器也可能会阻止websocket连接，导致无法正常使用。

5、(2)安全问题：由于websocket是一种双向通信协议，因此存在一定的安全风险。例如，攻击者可以通过websocket连接发送恶意代码或者进行ddos攻击等。

6、(3)性能问题：由于websocket是基于tcp协议的，因此在高并发场景下可能会出现性能瓶颈。此外，由于websocket连接是长连接，因此会占用一定的服务器资源。

7、(4)可靠性问题：由于websocket连接是长连接，因此在网络不稳定或者服务器出现故障时，可能会导致连接中断或者消息丢失等问题；

8、上述做法并不能很好的满足两个平台直接的数据传递，因此需要设计一种在性能及数据传递的实时性等方面的解决方案。

技术实现思路

1、本发明的提供一种前端实现跨平台实时数据传输方法、第三方应用及系统，使用iframe嵌套进行实时数据传递可以提高系统的实时性和可扩展性，同时也具有很好的兼容性和跨域支持。

2、第一方面，提供一种前端实现跨平台实时数据传输方法，应用于第三方应用，包括以下步骤：

3、基于iframe被嵌套至目标应用中；

4、调用postmessage发送目标信息至目标应用；

5、接收目标应用根据所述目标信息发送的响应信息。

6、根据第一方面，在第一方面的第一种可能的实现方式中，所述“调用postmessage发送目标信息至目标应用”步骤，具体包括以下步骤：

7、基于window.onload将目标信息进行绑定，并调用postmessage发送绑定后的目标信息至目标应用。

8、根据第一方面，在第一方面的第二种可能的实现方式中，所述“接收目标应用根据所述目标信息发送的响应信息”步骤，具体包括以下步骤：

9、监听message事件，并通过event.data属性接收目标应用根据所述目标信息发送的响应信息。

10、根据第一方面，在第一方面的第三种可能的实现方式中，所述“基于iframe嵌套至目标应用中”步骤之前，具体包括以下步骤：

11、基于vue全局错误检测方法检测是否能接收成功目标应用发送的目标请求，当检测到未接收成功所述目标请求时，得到允许访问提示。

12、第二方面，提供了一种第三方应用，包括：

13、嵌套模块，用于基于iframe被嵌套至目标应用中；

14、目标信息发送模块，与所述嵌套系统通信连接，用于调用postmessage发送目标信息至目标应用；以及，

15、响应模块，与所述目标信息发送模块通信连接，用于接收目标应用根据所述目标信息发送的响应信息。

16、根据第二方面，在第二方面的第一种可能的实现方式中，所述目标信息发送模块还用于，基于window.onload将目标信息进行绑定，并调用postmessage发送绑定后的目标信息至目标应用。

17、根据第二方面，在第二方面的第二种可能的实现方式中，所述响应模块还用于，监听message事件，并通过event.data属性接收目标应用根据所述目标信息发送的响应信息。

18、根据第二方面，在第二方面的第三种可能的实现方式中，还包括与所述嵌套模块通信连接的全局检测模块，用于基于vue全局错误检测方法检测是否能接收成功目标应用发送的目标请求，当检测到未接收成功所述目标请求时，得到允许访问提示。

19、第二方面，提供了一种前端实现跨平台实时数据传输系统，包括：

20、所述目标应用，用于基于iframe嵌套第三方应用；

21、所述第三方应用，与所述目标应用通信连接，用于基于window.onload将目标信息进行绑定，并调用postmessage发送绑定后的目标信息至目标应用；

22、所述目标应用，用于监听message事件，并通过event.data属性接收所述目标信息，并根据所述目标信息调用postmessage发送响应信息至第三方应用；

23、所述第三方应用，用于监听message事件，并通过event.data属性接收所述响应信息。

24、根据第三方面，在第三方面的第一种可能的实现方式中，所述目标应用，还用于在基于iframe嵌套第三方应用之前，发送目标请求至第三方应用；

25、所述第三方应用，还用于基于vue全局错误检测方法检测是否能接收成功所述目标请求，当检测到未接收成功所述目标请求时，得到允许访问提示。

26、与现有技术相比，本发明的优点如下：通过iframe的方式进行跨平台数据传输，主要是在目标应用里面把第三方应用通过iframe给嵌套进来，首先得在第三方应用里面加上数据传输的逻辑，通过postmessage方法把获取到的目标信息传递到目标应用中来，再接收目标应用根据所述目标信息发送的响应信息。因此使用iframe嵌套进行实时数据传递可以提高系统的实时性和可扩展性，同时也具有很好的兼容性和跨域支持。

技术特征：

1.一种前端实现跨平台实时数据传输方法，应用于第三方应用，其特征在于，包括以下步骤：

2.如权利要求1所述的前端实现跨平台实时数据传输方法，其特征在于，所述“调用postmessage发送目标信息至目标应用”步骤，具体包括以下步骤：

3.如权利要求1所述的前端实现跨平台实时数据传输方法，其特征在于，所述“接收目标应用根据所述目标信息发送的响应信息”步骤，具体包括以下步骤：

4.如权利要求1所述的前端实现跨平台实时数据传输方法，其特征在于，所述“基于iframe嵌套至目标应用中”步骤之前，具体包括以下步骤：

5.一种第三方应用，其特征在于，包括：

6.如权利要求5所述的第三方应用，其特征在于，所述目标信息发送模块还用于，基于window.onload将目标信息进行绑定，并调用postmessage发送绑定后的目标信息至目标应用。

7.如权利要求5所述的第三方应用，其特征在于，所述响应模块还用于，监听message事件，并通过event.data属性接收目标应用根据所述目标信息发送的响应信息。

8.如权利要求5所述的第三方应用，其特征在于，还包括与所述嵌套模块通信连接的全局检测模块，用于基于vue全局错误检测方法检测是否能接收成功目标应用发送的目标请求，当检测到未接收成功所述目标请求时，得到允许访问提示。

9.一种前端实现跨平台实时数据传输系统，其特征在于，包括：

10.如权利要求9所述的前端实现跨平台实时数据传输系统，其特征在于，

技术总结
本发明公开了一种前端实现跨平台实时数据传输方法、第三方应用及系统，其方法包括以下步骤：基于iframe被嵌套至目标应用中；调用postMessage发送目标信息至目标应用；接收目标应用根据所述目标信息发送的响应信息；使用iframe嵌套进行实时数据传递可以提高系统的实时性和可扩展性，同时也具有很好的兼容性和跨域支持。

技术研发人员：丁成林,任明,胡秋婷,程文高,陈家豪
受保护的技术使用者：武汉中科通达高新技术股份有限公司
技术研发日：
技术公布日：2024/1/15