A large-screen data visualization communication method and device

Abstract

This invention provides a large-screen data visualization communication method and device. First, it binds internal proprietary components and external third-party pages through a unified communication management center service. Then, it uses the unified communication management center service to determine the associated components based on the binding relationship and distribute requests, thereby realizing the linkage operation between the large-screen components and the external pages. This enables real-time interaction between the internal proprietary components of the server and the third-party pages, ensuring real-time performance and flexibility.

Description

Technical Field

[0001] This invention relates to the field of large-screen data visualization application development, and in particular to a large-screen data visualization communication method and device. Background Technology

[0002] Large-screen data visualization refers to applications that provide functional modules such as data source management, component management, and large-screen designers to enable the rapid drag-and-drop configuration generation of large-screen pages.

[0003] The design and communication methods for large screens refer to configuring the large screen, designing components, configuring data sources, and managing the large screen management module to achieve component types, sizes, coordinates, data binding, linked events, and data encryption. Currently, the communication or linkage methods between components and interface services, as well as between components, are all based on the same large screen design platform. When encountering collaborative display of components across different large screen design platforms, most cross-platform components on large screen design platforms simply embed and integrate via iframes, making linkage between components very difficult, and resulting in poor real-time performance and flexibility in data communication and interaction.

[0004] Existing technical solutions typically use HTTPS instead of HTTP for communication, relying on an information security channel built with HTTPS or an identity verification mechanism to ensure data security during transmission and prevent unauthorized requests. However, in the communication process between large-screen components and server services, factors such as cost, resources, and technology limit the practical use of HTTPS. This includes both one-way authentication HTTPS and two-way authentication HTTPS between the server and client. The trust chain system of SSL certificates is not secure, and when using iframes to embed external third-party pages, real-time interaction between the server's internal components and third-party pages cannot be achieved through HTTPS, making linkage with third-party pages extremely difficult. Summary of the Invention

[0005] (a) Technical problems to be solved

[0006] To address the aforementioned problems in the prior art, this invention provides a large-screen data visualization communication method and apparatus that can improve the real-time performance and flexibility of third-party page access.

[0007] (II) Technical Solution

[0008] To achieve the above objectives, the technical solution adopted by the present invention is as follows:

[0009] A large-screen data visualization communication method includes the following steps:

[0010] S1. Receive a page linkage request, and establish a binding relationship and link communication between the large screen component and the external page according to the page linkage request;

[0011] S2. When a trigger request is received from the active triggering party, the component of the passive triggering party is determined according to the binding relationship and a linkage request is distributed. The active triggering party and the passive triggering party are one of the large screen component and the external page, respectively. The linkage request is used to enable the large screen component and the external page to perform linkage operations according to the trigger request.

[0012] S3. Return the real-time page generated by the linkage operation to the client.

[0013] To achieve the above objectives, another technical solution adopted by the present invention is as follows:

[0014] A large-screen data visualization and communication device includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the program, it performs the following steps:

[0015] S1. Receive a page linkage request, and establish a binding relationship and link communication between the large screen component and the external page according to the page linkage request;

[0016] S2. When a trigger request is received from the active triggering party, the component of the passive triggering party is determined according to the binding relationship and a linkage request is distributed. The active triggering party and the passive triggering party are one of the large screen component and the external page, respectively. The linkage request is used to enable the large screen component and the external page to perform linkage operations according to the trigger request.

[0017] S3. Return the real-time page generated by the linkage operation to the client.

[0018] (III) Beneficial Effects

[0019] The beneficial effects of this invention are as follows: First, the unified communication management center service is used to bind internal proprietary components and external third-party pages respectively. Then, the unified communication management center service is used to determine the associated components and distribute requests according to the binding relationship, thereby realizing the linkage operation between the large screen components and the external pages. This achieves real-time interaction between the internal proprietary components of the server and the third-party pages, ensuring real-time performance and flexibility. Attached Figure Description

[0020] Figure 1 This is a flowchart of a large-screen data visualization communication method according to an embodiment of the present invention;

[0021] Figure 2 This is a schematic diagram of the overall structure of the large-screen data visualization and communication device according to an embodiment of the present invention;

[0022] Figure 3 This is a flowchart of Embodiment 2 of the present invention.

[0023] [Explanation of Labels in the Attached Image]

[0024] 1: Large-screen data visualization and communication device;

[0025] 2: Memory;

[0026] 3: Processor. Detailed Implementation

[0027] To better explain and facilitate understanding of the present invention, the present invention will be described in detail below with reference to the accompanying drawings and specific embodiments.

[0028] Example 1

[0029] Please refer to Figure 1 A large-screen data visualization communication method includes the following steps:

[0030] S1. Receive a page linkage request, and establish a binding relationship and link communication between the large screen component and the external page according to the page linkage request;

[0031] The connection communication mentioned above is a long-lived socket connection communication.

[0032] The binding relationship includes the linkage between the large-screen component and the external page, as well as the pre-agreed configuration parameters between them. The linkage relationship includes active triggering, passive triggering, and mutual triggering. Active triggering means that the linkage event of the large-screen component can trigger the external page; passive triggering means that the large-screen component can be triggered by the linkage event of the external page; mutual triggering means that the linkage event of the large-screen component can trigger the external page, and the linkage event of the external page can also trigger the large-screen component.

[0033] S2. When a trigger request is received from the active triggering party, the component of the passive triggering party is determined according to the binding relationship and a linkage request is distributed. The active triggering party and the passive triggering party are one of the large screen component and the external page, respectively. The linkage request is used to enable the large screen component and the external page to perform linkage operations according to the trigger request.

[0034] Due to the different linkage relationships, the active trigger and the passive trigger will be different. For example, if the linkage relationship is active trigger, the large screen component is the active trigger and the external page is the passive trigger, and vice versa. Therefore, in step S2, the linkage request is only distributed when the active trigger and the passive trigger meet the binding relationship. That is, if the linkage relationship is active trigger, the linkage request will not be distributed when the external page wants to actively trigger, because it does not meet the linkage relationship agreed upon at the beginning.

[0035] Then step S2 is specifically as follows:

[0036] When a trigger request containing configuration parameters is received from a large screen component or an external page, the associated component is determined according to the binding relationship and a linkage request containing configuration parameters is distributed. The linkage request is used to enable the large screen component and the external page to perform linkage operations according to the configuration parameters.

[0037] For example, a third party provides a map component, and the large screen component and the third party pre-negotiate the map area code. When the large screen component triggers a click event on a map area, it generates areaCode=0591 and sends it to the unified communications management center service. The unified communications management center service then distributes a request including this area parameter to the third party based on the binding relationship. The map component on the third party then performs a business query based on the areaCode and returns the corresponding map page to the large screen component for display.

[0038] S3. Return the real-time page generated by the linkage operation to the client.

[0039] In this embodiment, the large screen component is rendered either by server-side rendering or client-side rendering.

[0040] The specific process of server-side rendering includes:

[0041] After receiving the request, the system concatenates the corresponding data, renders the entire webpage, and returns it to the client.

[0042] The specific client-side rendering process includes:

[0043] Upon receiving a request containing the client signature identifier, a verification operation is performed. If the verification is successful, a mapping relationship is generated between the unique login identifier and the user identifier and the client signature identifier, respectively. At the same time, the message containing the client signature identifier, user identifier and unique login identifier is encrypted and returned to the client.

[0044] The message is used to instruct the client to decrypt the data, and then encrypt and store the data containing the unique login identifier after reordering the strings for subsequent interaction.

[0045] The unique login identifier must be included in the page linkage request and trigger request.

[0046] The messages for the page linkage request and the trigger request are messages that have been signed and encrypted using a pre-agreed algorithm and a client signature identifier.

[0047] The agreed-upon algorithm is the AES symmetric encryption algorithm. The signature identifier is located in the message header, and the request content is encrypted by the AES symmetric encryption algorithm and placed in the message body.

[0048] Example 2

[0049] Please refer to Figure 3 The difference between this embodiment and Embodiment 1 is that this embodiment will further explain how the above-mentioned large-screen data visualization communication method of the present invention is implemented in conjunction with a specific application scenario:

[0050] 1. Add the rendering method and whether to encrypt for all components in the configuration. The rendering method is either server-side rendering or client-side rendering.

[0051] 2. When using server-side rendering, the HTML rendered on the server does not need to wait until all JavaScript has been downloaded and executed before it is displayed.

[0052] After receiving a request from the client, the server manipulates the webpage file, imports the corresponding data into the file, concatenates the data, renders the entire webpage, and sends it to the client. The client receives the webpage file from the server and renders it directly without any further action. Therefore, components using this method will see a fully rendered page much faster. Furthermore, the data retrieval process is completed on the server during the first access, potentially resulting in a faster database connection compared to a request initiated from the client. Simultaneously, since all page rendering and data requests are completed on the server, network requests related to components rendered in this way cannot be simulated in browsers or other packet sniffing tools, thus compromising security.

[0053] 3. When using client-side rendering, the decision to encrypt data can be made based on business needs. This invention encrypts the data using the RSA encryption algorithm. A pair of encryption keys is pre-generated, with a universal RSA asymmetric encryption public key pre-installed on the client and a corresponding private key on the server. When a user logs into the large screen, the client uses a random number algorithm to generate an 8-bit random signature identifier (client_token), merges it with other login information, encrypts it using the client's built-in public key and an asymmetric encryption algorithm (RSA), and submits it to the server. The generated random signature identifier (client_token) must be encrypted and securely stored.

[0054] After receiving a user login request message, the server decrypts the message using its private key and verifies the login operation. If the login is successful, the server generates a unique server login identifier (server_code), a user identifier (user_id), and a client signature identifier (client_token), establishes a binding relationship, saves it in the cache system, and returns the unique server login identifier (server_code) and other information to the client. The returned data is encrypted using a symmetric encryption algorithm (AES) agreed upon with the client. After receiving the login response, the client decrypts it using the agreed-upon symmetric encryption algorithm (AES), processes the server's response, and re-encodes the decrypted unique server login identifier (server_code), its own signature identifier (client_token), and user identifier (user_id) in the returned message, then encrypts and stores these parameters. All subsequent client-server interactions will use these parameters.

[0055] 4. Both client-side native technologies and server-side interface requests must carry a unique server login identifier (server_code) in the request message. The interface message must first be signed using the client signature identifier (client_token) according to the agreed algorithm, and the signature identifier data is placed in the request message header. The request content is encrypted using the agreed symmetric encryption algorithm (AES) and placed in the request message body.

[0056] 5. After receiving the request, the server first decrypts the message body using the agreed symmetric encryption algorithm (AES) to obtain the server's unique login identifier (server_code) and find the corresponding client signature identifier (client_token) from the cache. Then, the server signs and encrypts the message using the client signature identifier according to the agreed algorithm. The server compares and verifies the signature calculated by the server with the signature in the client request message header to ensure that the request is valid.

[0057] The above steps have completed the communication method between the client's native interface and the server request.

[0058] 6. The subsequent steps are the focus of this invention, where the communication method is used in h5 for communication.

[0059] 6.1 The H5 page and the server agree to call the API, based on the RESTful API style. Leveraging its software architecture and design style makes the software clearer, simpler, more layered, and more maintainable. The API content includes headers and an encrypted payload of the request content. Parameters are formatted as follows:

[0060] {"headers":"Signature identifier data generated in step 4",

[0061] "payload":"Step 4: Generate the encrypted request message string"

[0062] };

[0063] 6.2 The server intercepts H5 requests by making judgments. For every request from the client, the server must respond. The response includes an HTTP status code and data. Step 5 involves retrieving the returned content, parsing it, and converting it into the format required by the client. Parameters are formatted as follows:

[0064] {

[0065] "payload":"Returns encrypted message string"

[0066] };

[0067] 6.3 After receiving the content returned by the server through the client's native interface, the H5 function continues with subsequent business operations after decrypting the content.

[0068] 7. In scenarios where large-screen components and external pages are displayed together, a protocol specification has been designed. The main contents of the specification are as follows:

[0069] The system involves three trigger parameters: an active trigger component (aId), a passive trigger component (pId), and a JSON-formatted string (params). The steps are as follows: First, in the component configuration, select the trigger mode for the component: active trigger, passive trigger, or mutual trigger. Then, in the component configuration, configure the URL of the external third-party page to be displayed in the iframe, and simultaneously select the binding of the page trigger relationship (active trigger, passive trigger, or mutual trigger) embedded in the iframe component. Configure the parameters according to the pre-agreed parameters with the third party. When any trigger mode meets the trigger condition, a request will be sent carrying the configured parameters. After processing by the unified communication management center service, the parameter interaction effect is achieved. The external page is developed and provided based on the protocol specifications. On the large screen, the screen transitions from edit mode to non-editable mode after publication. Both the custom large screen component and the external page are registered with the unified communication management center service and establish long-lived socket connections to maintain communication. After registration, when the triggering condition is met by the active triggering party, the active triggering party initiates communication with the unified communications management center service according to the configured protocol specifications, carrying the configured parameters. The unified communications management center service finds the associated component based on the binding relationship and carries the parameters to the passive triggering party via the socket protocol, thus completing the real-time, parameter-carrying interaction between the active and passive triggering components. The parameter encryption uses the scheme in step 6 to ensure data security.

[0070] This invention breaks away from the previous model where H5 functions could only communicate with the server using HTTPS in a secure communication scenario between H5 and the server. It cleverly utilizes client-side and server-side rendering development technologies and designs an interface for secure communication with the server. This avoids the security problems of using general communication methods to a certain extent. When displaying with third-party pages, it uses socket protocol communication, establishes a unified communication management center service, designs a protocol specification, and combines it with secure communication methods with the server to solve the problem of real-time linkage with third-party pages, ensuring real-time performance and flexibility.

[0071] Example 3

[0072] Please refer to Figure 2 A large-screen data visualization communication device 1 includes a memory 2, a processor 3, and a computer program stored on the memory 2 and capable of running on the processor 3. When the processor 3 executes the program, it implements the various steps in Embodiment 1.

[0073] The above description is merely an embodiment of the present invention and does not limit the patent scope of the present invention. Any equivalent modifications made based on the content of the present invention specification and drawings, or direct or indirect applications in related technical fields, are similarly included within the patent protection scope of the present invention.

Claims

1. A large-screen data visualization communication method, characterized in that, Including the following steps: S1. Receive a page linkage request, and establish a binding relationship and link communication between the large screen component and the external page according to the page linkage request. The binding relationship includes the linkage relationship between the large screen component and the external page and the pre-agreed configuration parameters. S2. When a trigger request is received from the active triggering party, the linkage request is distributed to the passive triggering party according to the binding relationship. The active triggering party and the passive triggering party are one of the large screen component and the external page, respectively. The linkage request is used to enable the large screen component and the external page to perform linkage operations according to the trigger request. S3. Return the real-time page generated by the linkage operation to the client; Step S2 is as follows: When a trigger request containing configuration parameters is received from a large screen component or an external page, the associated component is determined according to the binding relationship and a linkage request containing configuration parameters is distributed. The linkage request is used to enable the large screen component and the external page to perform linkage operations according to the configuration parameters.

2. The large-screen data visualization and communication method according to claim 1, characterized in that, The connection communication is a long-lived socket connection communication.

3. The large-screen data visualization and communication method according to claim 1, characterized in that, The large screen component is rendered either by server-side rendering or client-side rendering.

4. The large-screen data visualization communication method according to claim 3, characterized in that, The specific process of server-side rendering includes: After receiving the request, the system concatenates the corresponding data, renders the entire webpage, and returns it to the client.

5. The large-screen data visualization communication method according to claim 3, characterized in that, The specific client-side rendering process includes: Upon receiving a request containing the client signature identifier, a verification operation is performed. If the verification is successful, a mapping relationship is generated between the unique login identifier and the user identifier and the client signature identifier, respectively. At the same time, the message containing the client signature identifier, user identifier and unique login identifier is encrypted and returned to the client. The message is used to instruct the client to decrypt the data, and then encrypt and store the data containing the unique login identifier after reordering the strings for subsequent interaction.

6. The large-screen data visualization communication method according to claim 4, characterized in that, The unique login identifier must be included in the page linkage request and trigger request. The messages for the page linkage request and the trigger request are messages that have been signed and encrypted using a pre-agreed algorithm and a client signature identifier.

7. The large-screen data visualization communication method according to claim 6, characterized in that, The agreed-upon algorithm is the AES symmetric encryption algorithm. The signature identifier is located in the message header, and the request content is encrypted by the AES symmetric encryption algorithm and placed in the message body.

8. A large-screen data visualization communication device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it performs the following steps: S1. Receive a page linkage request, and establish a binding relationship and link communication between the large screen component and the external page according to the page linkage request. The binding relationship includes the linkage relationship between the large screen component and the external page and the pre-agreed configuration parameters. S2. When a trigger request is received from the active triggering party, the linkage request is distributed to the passive triggering party according to the binding relationship. The active triggering party and the passive triggering party are one of the large screen component and the external page, respectively. The linkage request is used to enable the large screen component and the external page to perform linkage operations according to the trigger request. S3. Return the real-time page generated by the linkage operation to the client; Step S2 is as follows: When a trigger request containing configuration parameters is received from a large screen component or an external page, the associated component is determined according to the binding relationship and a linkage request containing configuration parameters is distributed. The linkage request is used to enable the large screen component and the external page to perform linkage operations according to the configuration parameters.

Images