Large project tree engineering data loading method and system based on Web side

Abstract

The invention discloses a large project tree engineering data loading method and system based on a Web end, and the method comprises the steps: enabling a project by a user, and checking whether a local IndexedDB database exists or not; subscribing SSE message pushing, and registering a callback function; if yes, calling a data service interface to obtain project tree basic information, obtaining project tree node id related data in an IndexedDB database, and if not, calling the service interface to obtain node data and storing the data in the database; otherwise, comparing whether the hash value recorded in the database is the same as the hash value in the project tree node basic information or not; the user operates the node data, generates a hash value after node updating, and pushes an updating message to all users who open the current project through SSE service; and after the user receives the update message, triggering a callback function, and performing data synchronization of the project engineering again to complete current data loading. According to the invention, the secondary opening time of the project engineering is accelerated, the server pressure is reduced, and the user experience is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of database and network communication, and in particular to a method and system for loading engineering data of a large project tree based on a Web terminal. Background Art

[0002] IndexedDB is a local database provided by the browser. It provides a set of underlying APIs (Application Programming Interface) for storing large amounts of structured data (including files / binary large objects) on the client side and supports high-performance search of data using indexes. The data has the following features: 1. Key-value pair storage; 2. Asynchronous; 3. Support for transactions; 4. Same-origin restrictions; 5. Large storage space; 6. Support for binary storage.

[0003] HTTP (Hypertext Transfer Protocol) is one of the most widely used and adopted Internet application protocols. Compared with HTTP / 1.1, HTTP / 2 supports binary framing, priority sorting, header compression, multiplexing, and server push, and has the advantages of high robustness, high performance, and low network overhead.

[0004] SSE (Server-Sent Events) is a server push technology based on the http protocol. Data can only be pushed from the server to the client in one direction.

[0005] The existing technology mainly uses the following two methods to load large project tree projects:

[0006] 1. Load the complete project tree project at one time, including sub-node data;

[0007] 2. Load the project tree on the left, and call the data service to obtain the latest data each time you enter a child node;

[0008] Although the above two methods can ensure that the current data is consistent with the server, data loading is slow, there is no splitting of atomic operations, and redundant and repeated data are requested multiple times, which increases server pressure and provides a poor user experience. Summary of the invention

[0009] The purpose of the present invention is to provide a method and system for loading data of a large project tree project based on a Web terminal, construct an IndexedDB database cache, improve the loading process of a large project tree project of a multi-level directory file, reduce server pressure, and achieve data synchronization.

[0010] In order to solve the above technical problems, the present invention adopts the following technical solutions:

[0011] A method for loading engineering data of a large project tree based on a Web terminal includes the following steps:

[0012] S1. The user opens the project and checks whether the local IndexedDB database exists. If not, the database table information is initialized. Otherwise, the existing local database table information is used. At the same time, the user subscribes to the SSE (Server-Sent Events) message push and registers the callback function.

[0013] S2. Call the data service interface to obtain the basic information of the project tree, and obtain the project tree node id related data in the IndexedDB database. If it does not exist, call the service interface to obtain the node data and store the data in the database; otherwise, compare the hash value recorded in the database with the hash value in the basic information of the project tree node to see if they are the same. If they are different, call the service interface to obtain the node data and update the database information. If they are the same, use the data already existing in the local database.

[0014] S3. The user operates the node data, and the service interface generates the updated hash value of the node and pushes the update message to all users who open the current project through the SSE service.

[0015] S4. After the user receives the update message of the SSE service, the callback function in step S1 is triggered, and the process returns to step S2 to synchronize the project data and complete the current data loading.

[0016] Furthermore, in step S2, the hash value identifies the uniqueness of the current record content, and the hash value is generated using the MD5 information digest algorithm.

[0017] Furthermore, in step S2, when the project is loaded for the first time, it is necessary to obtain the data of the project tree and each project tree node from the backend service interface, and generate a set number of service interface requests.

[0018] Furthermore, the service interface request includes basic information of the project tree structure, the size of the first request response packet, the response time, SSE push, and query, addition, deletion, and modification of a single tree node data.

[0019] The basic information of the project tree structure includes the child node ID and the data verification mark hash.

[0020] Furthermore, in step S2, the commonly used HTTP / 1.1 is upgraded to HTTP / 2 using SSL digital certificates, which greatly reduces the time consumed in establishing connections with the server for multiple requests based on the multiplexing feature.

[0021] Furthermore, in step S3, the operations performed on the node data include adding, modifying, and deleting the node data.

[0022] The present invention also proposes a system for loading engineering data of a large project tree based on a Web terminal, comprising:

[0023] The data preparation module is used by users to open the project and check whether the local IndexedDB database exists. If not, the database table information is initialized. Otherwise, the existing local database table information is used. At the same time, the SSE message push is subscribed and the callback function is registered.

[0024] The data update module is used to call the data service interface to obtain the basic information of the project tree, and obtain the project tree node id related data in the IndexedDB database. If it does not exist, call the service interface to obtain the node data and store the data in the database; otherwise, compare the hash value recorded in the database with the hash value in the basic information of the project tree node to see if they are the same. If they are different, call the service interface to obtain the node data and update the database information. If they are the same, use the data already existing in the local database.

[0025] The information push module is used for users to operate node data. The service interface generates the updated hash value of the node and pushes the update message to all users who open the current project through the SSE service.

[0026] The data loading module is used to trigger the callback function in the data preparation module after the user receives the update message of the SSE service, return to the data update module, synchronize the project data, and complete the current data loading.

[0027] The present invention also proposes an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the steps of the large-scale project tree engineering data loading method based on the Web as described above are implemented.

[0028] The present invention also proposes a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is run by a processor, the method for loading engineering data of a large project tree based on a Web terminal is executed.

[0029] Compared with the prior art, the present invention adopts the above technical solution and has the following technical effects:

[0030] 1. The method proposed in the present invention speeds up the time for the second opening of a project. When the project data is not updated, only the basic information of the project tree needs to be requested, and the node data is read from the IndexedDB database.

[0031] 2. The method proposed in the present invention is actively pushed by the server to update the IndexedDB database cache to achieve data synchronization.

[0032] 3. The method proposed in the present invention performs a global search of text on the front-end web page without requiring a server to provide service support.

[0033] 4. The method proposed in the present invention reduces server pressure and improves user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0034] Figure 1 It is an overall implementation flow chart of the present invention. DETAILED DESCRIPTION

[0035] The present invention will be further described below in conjunction with the accompanying drawings. The following embodiments are only used to more clearly illustrate the technical solution of the present invention, and cannot be used to limit the protection scope of the present invention.

[0036] To achieve the above purpose, the present invention proposes a method for loading engineering data of a large project tree based on a Web terminal, such as Figure 1 As shown, the specific steps are as follows:

[0037] S1. Open the project in the browser and check whether the local IndexedDB database exists. If not, initialize the database table information. Otherwise, use the existing local database table information. At the same time, subscribe to SSE (Server-SentEvents) message push and register the callback function.

[0038] S2. Call the data service interface to obtain the basic information of the project tree, and obtain the project tree node id related data in the IndexedDB database. If it does not exist, call the service interface to obtain the node data and store the data in the database; otherwise, compare the hash value recorded in the database with the hash value in the basic information of the project tree node to see if they are the same. If they are different, the record is considered invalid or does not exist, and call the service interface to obtain the node data and update the database information. If they are the same, use the data already existing in the local database.

[0039] The hash value identifies the uniqueness of the current record content, and the hash value is generated using the MD5 information digest algorithm.

[0040] When loading an item for the first time, it is necessary to obtain the data of the project tree and each project tree node from the backend service interface, generating a large number of service interface requests. If the number of tree nodes is m, the number of requests is m+1.

[0041] The service interface request includes the basic information of the project tree structure, reducing the size of the first request response package, speeding up the response time, SSE push, and querying, adding, deleting, and modifying the data of a single tree node; the basic information of the project tree structure includes the child node ID and the data verification mark hash.

[0042] The data types are:

[0043] interface ProjectTreeLeaf{

[0044] id:number;

[0045] hash: string;

[0046] children:ProjectTreeLeaf[];

[0047] }

[0048] When project data changes, push messages to all browsers that have the current project open.

[0049] In this embodiment, the PLC project tree is:

[0050] Device

[0051] Application

[0052] GlobalVars (global variable table)

[0053] DUT (custom data type)

[0054] POU (PLC program)

[0055] Task

[0056] POU_INSTANCE (POU instance)

[0057] Configuration (communication protocol stack configuration)

[0058] ModbusTCP

[0059] ModbusRTU

[0060] EtherCAT

[0061] Powerlink

[0062] In order to optimize the loading time, the commonly used HTTP / 1.1 is upgraded to HTTP / 2 using SSL digital certificates. Based on the multiplexing feature, the time consumed when multiple requests establish connections with the server is greatly reduced (HTTP / 2 is an existing technology, but its popularity is low, and HTTP / 1.1 is still commonly used).

[0063] S3. The browser adds, modifies, and deletes node data. The service interface generates an updated hash value for the node and pushes update messages to all browsers that open the current project through the SSE service.

[0064] S4. After the browser receives the update message from the SSE service, it triggers the callback function in step S1 and returns to step S2 to synchronize the project data and complete the current data loading. This step is always in a passive trigger state. As long as a user updates the data of the current project, the data loading process will be executed to ensure that the local database is the latest data, which is used to complete the multi-person collaborative editing based on steps S2 and S3.

[0065] The local database generated based on the above steps is always kept up to date and consistent with the backend database data. Therefore, database query actions such as global search can be directly queried through the local database without calling the backend service interface.

[0066] In this embodiment:

[0067] Browsers A and B open the project at the same time. When browser B modifies the project data, browser A also receives the service push and refreshes the current project data to ensure data synchronization between the client and the server and data synchronization during collaborative editing by multiple users.

[0068] Browser A opens the project for the first time, loads the project structure tree and all sub-node data and stores them in the IndexedDB database, and after viewing the project, closes the current project; Browser B opens the project, updates the data of the sub-node "Global Variable Table", and submits the data to the server; Browser A reopens the project, loads the project structure tree, and compares the hash value of the local node data, and finds that the cache data of the "Global Variable Table" is invalid. It only needs to reload the node data of the "Global Variable Table" and store it in IndexedDB. Compared with the first loading of the project, loading all sub-nodes is optimized to only loading sub-nodes with invalid cache.

[0069] Performing a global search for node data in the IndexedDB database on the web is particularly advantageous when querying node-related information, such as querying which "POU programs" use the variable "GlobalVar0" in the "global variable table". This eliminates the need to perform a database joint table query on the server side, greatly reducing the server's request pressure and resource usage.

[0070] The embodiment of the present invention also proposes a large-scale project tree engineering data loading system based on the Web terminal, including a data preparation module, a data update module, an information push module, a data loading module and a computer program that can be run on a processor. It should be noted that each module in the above system corresponds to the specific steps of the method provided in the embodiment of the present invention, and has the corresponding functional modules and beneficial effects of the execution method. For technical details not described in detail in this embodiment, please refer to the method provided in the embodiment of the present invention.

[0071] The embodiment of the present invention further provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor. It should be noted that when the processor executes the computer program, the specific steps of the method provided in the embodiment of the present invention are corresponding to the specific steps of the method provided in the embodiment of the present invention, and the processor has the functional modules and beneficial effects corresponding to the execution method. For technical details not described in detail in this embodiment, please refer to the method provided in the embodiment of the present invention.

[0072] The embodiment of the present invention further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program. It should be noted that when the computer program is executed by the processor, it corresponds to the specific steps of the method provided in the embodiment of the present invention, and has the functional modules and beneficial effects corresponding to the execution method. For technical details not described in detail in this embodiment, please refer to the method provided in the embodiment of the present invention.

[0073] The above is only a preferred embodiment of the present invention. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the technical principles of the present invention. These improvements and modifications should also be regarded as the scope of protection of the present invention.

Claims

1. A method for loading engineering data of a large project tree based on a Web terminal, characterized in that: include: S1. The user opens the project and checks whether the local IndexedDB database exists. If not, the database table information is initialized. Otherwise, the existing local database table information is used. At the same time, the user subscribes to the SSE message push and registers the callback function. S2. Call the data service interface to obtain the basic information of the project tree, and obtain the project tree node id related data in the IndexedDB database. If it does not exist, call the service interface to obtain the node data and store the data in the database; otherwise, compare the hash value recorded in the database with the hash value in the basic information of the project tree node to see if they are the same. If they are different, call the service interface to obtain the node data and update the database information. If they are the same, use the data already existing in the local database; S3. The user operates the node data, and the service interface generates the updated hash value of the node and pushes the update message to all users who open the current project through the SSE service; S4. After the user receives the update message of the SSE service, the callback function in step S1 is triggered, and the process returns to step S2 to synchronize the project data and complete the current data loading.

2. The method for loading large-scale project tree engineering data based on the Web terminal according to claim 1 is characterized in that: In step S2, the MD5 information digest algorithm is used to generate a hash value, and the hash value identifies the uniqueness of the current record content.

3. The method for loading large-scale project tree engineering data based on the Web terminal according to claim 1 is characterized in that: In step S2, when the project is loaded for the first time, it is necessary to obtain the data of the project tree and each project tree node from the backend service interface, and generate a set number of service interface requests.

4. The method for loading large-scale project tree engineering data based on the Web terminal according to claim 3 is characterized in that: The service interface request includes basic information of the project tree structure, the size of the first request response package, the response time, SSE push, and query, add, delete, and modify the data of a single tree node; The basic information of the project tree structure includes the child node ID and the data verification mark hash.

5. The method for loading large-scale project tree engineering data based on the Web terminal according to claim 1 is characterized in that: In step S2, the commonly used HTTP / 1.1 is upgraded to HTTP / 2 using an SSL digital certificate, and based on the multiplexing feature, the time consumed when multiple requests are made to establish connections with the server is reduced.

6. The method for loading large-scale project tree engineering data based on the Web terminal according to claim 1 is characterized in that: In step S3, operations on node data include adding, modifying, and deleting node data.

7. A system for the Web-based large-scale project tree engineering data loading method according to claim 1, characterized in that: include: The data preparation module is used by users to open the project and check whether the local IndexedDB database exists. If not, the database table information is initialized. Otherwise, the existing local database table information is used. At the same time, the SSE message push is subscribed and the callback function is registered. The data update module is used to call the data service interface to obtain the basic information of the project tree, and obtain the project tree node id related data in the IndexedDB database. If it does not exist, call the service interface to obtain the node data and store the data in the database; otherwise, compare the hash value recorded in the database with the hash value in the basic information of the project tree node to see if they are the same. If they are different, call the service interface to obtain the node data and update the database information. If they are the same, use the data already existing in the local database; The information push module is used for users to operate node data. The service interface generates the updated hash value of the node and pushes the update message to all users who open the current project through the SSE service; The data loading module is used to trigger the callback function in the data preparation module after the user receives the update message of the SSE service, return to the data update module, synchronize the project data, and complete the current data loading.

8. An electronic 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 computer program, the steps of the Web-based large-scale project tree engineering data loading method described in any one of claims 1 to 6 are implemented.

9. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the Web-based large-scale project tree engineering data loading method described in any one of claims 1 to 6 is executed.

Images