A multi-terminal hybrid data transmission display system, method and storage medium

Abstract

This invention relates to the field of data transmission technology, and in particular to a multi-terminal hybrid data transmission and display system, method, and storage medium. The invention classifies bond information and bond attributes with low change frequency in the bond server as static data, and classifies quotation information and transaction information with high-frequency changes based on real-time market conditions as dynamic data. Through a collaborative architecture of client, server, web interface, and local database, the client acquires and stores static data in the main table of the local database based on a first preset period. This eliminates the need for the server to repeatedly push large amounts of static data when market data changes, significantly reducing network transmission overhead and the bandwidth and memory pressure caused by centralized queries. By distributing data processing to the client's local machine, the reliance on a dedicated high-performance database is reduced, and cross-platform redundant development is avoided. While increasing the data processing threshold, this significantly reduces R&D costs.

Description

Technical Field

[0001] This invention relates to the field of data transmission technology, and in particular to a multi-terminal hybrid data transmission display system, method, and storage medium. Background Technology

[0002] In the field of data transmission technology, characterized by high data update frequency and massive data volume, existing solutions primarily focus on adopting a pure native client architecture or relying on custom-designed high-performance database systems. However, implementations based on pure native clients require repeated development on different operating system platforms, leading to a significant increase in R&D and maintenance costs; while custom-designed high-performance databases require in-depth customization and R&D for high-frequency market data business scenarios, also resulting in high technical costs.

[0003] Furthermore, in the real-time data push stage, existing technologies often reach their limits when pushing data to clients via WebSocket at rates exceeding 150 records per second. This can easily lead to connection interruptions and other issues, making it difficult to meet the business needs of high-frequency market data scenarios requiring real-time aggregation and computational optimization of over one million data records daily. Secondly, regarding front-end data rendering, existing technologies place immense pressure on page rendering when data volumes are too high, easily causing interface lag or even crashes. This is especially true in scenarios requiring real-time rendering of over 300,000 data records and complex parent-child row expansion / collapse functions; even using table rendering methods is difficult to implement due to a lack of relevant technical documentation. Thirdly, at the back-end real-time data processing level, facing the need for real-time filtering and sorting of over 300,000 data records, traditional centralized database systems suffer from extremely high network overhead and query pressure due to the need for massive network data transmission and centralized query processing, limiting system scalability and responsiveness.

[0004] In summary, existing technical solutions generally suffer from significant performance bottlenecks and excessively high costs when dealing with real-time push, front-end rendering, and back-end filtering of high-frequency, massive data. There is an urgent need for a comprehensive technical solution that can balance efficient data transmission and processing capabilities with lower implementation costs. Summary of the Invention

[0005] The present invention aims to provide a multi-terminal hybrid data transmission and display system, method and storage medium to solve the refresh performance problem of high-frequency data in the prior art, improve the high-frequency data push capability, and reduce the consumption and demand of high-performance database and network resources while increasing the data volume processing threshold, thereby reducing R&D costs and technical costs.

[0006] To achieve the above objectives, a first aspect of the present invention provides a multi-terminal hybrid data transmission and display system, comprising a client, a server, a web page, and a local database; wherein: The local database has a main table, which is used to store data. The server is used to receive static data and dynamic data, and after receiving the dynamic data, pushes market update signals and the dynamic data to the client; wherein, the static data includes bond information and bond attributes, and the dynamic data includes quotation information and transaction information; The client is used to obtain static data from the server based on a first preset period, and then store the static data in the main table of the local database; The client responds to the first query request from the web page, obtains the first query data group from the main table of the local database, and then transmits the first query data group to the web page. The client responds to the market update signal from the server, receives the dynamic data pushed by the server, and updates the main table of the local database and the first query data group based on the dynamic data, thereby obtaining the second query data group, and transmitting the second query data group to the web page. The web page responds to the user's operation by sending a first query request to the client, thereby receiving the first query data group, rendering the first query data group into a first query data image, and then displaying the first query data image on the web page. The web page is used to receive the second query data group, thereby rendering the second query data group into a second query data image, and then causing the web page to update and display the first query data image with the second query data image.

[0007] The aforementioned multi-terminal hybrid data transmission and display system is suitable for processing bond information, bond attributes, price quotes, and transaction information in bond trading systems, which are updated frequently and have a large total data volume. This invention classifies bond information and bond attributes with low change frequency in the bond server as static data, and price quotes and transaction information that change frequently based on real-time market conditions as dynamic data. Through a collaborative architecture of client, server, web interface, and local database, the client acquires and stores static data in the main table of the local database based on a first preset period. This eliminates the need for the server to repeatedly push large amounts of static data when market data changes, significantly reducing network transmission overhead and the bandwidth and memory pressure caused by centralized queries.

[0008] Meanwhile, when the client responds to a query request from the web page, it directly extracts the corresponding first query data group from the local database based on the query data range. This fully utilizes local resources to perform data querying and filtering, eliminating the need to interact with the centralized database on the server through network communication. This saves network transmission time and server network transmission overhead, and reduces the data processing load for web page rendering, avoiding interface lag or freezing.

[0009] In addition, the client receives dynamic data pushed by the server and updates the local database and query data group in real time, so that the market data covered by the first query request displayed on the web page can be updated in real time according to the second query data group, ensuring the timeliness of data updates on the web page.

[0010] In summary, this invention adopts a hybrid architecture that combines client, server, and web page interfaces. The client has a lightweight function and low development cost across different operating systems. By distributing data processing locally to the client, it reduces dependence on specialized high-performance databases and avoids redundant cross-platform development. While increasing the data processing threshold, it significantly reduces R&D costs, technical costs, and network resource consumption, achieving efficient and economical high-frequency data transmission and display.

[0011] Furthermore, the local database is equipped with a cache table for storing data; the client responds to the market update signal from the server, receives dynamic data pushed by the server, and updates the main table of the local database and the first query data group based on the dynamic data, thereby obtaining the second query data group, including: In response to the market update signal from the server, obtain the current mode of the web page; If the current mode is pause mode, then the dynamic data pushed by the server is received, and then the dynamic data is updated to the cache table of the local database. If the current mode is dynamic refresh mode, then the dynamic data pushed by the server is received, and the main table and the first query data group are updated based on the dynamic data and the cache table, thereby obtaining the second query data group.

[0012] It should be noted that the pause mode refers to pausing the updating of market data on the webpage to view data details after the user has selected the first query data image based on the first query request. The dynamic refresh mode refers to keeping the first query data image updated frequently based on the second query data image after the user has selected the first query data image based on the first query request.

[0013] In this implementation, the local database cleverly employs a dual-table storage structure consisting of a main table and a cache table. By introducing a cache table mechanism that is linked to the current mode of the web application, data writing to the main table is paused when the web application is in paused mode. Instead, data is stored in the cache table, allowing dynamic data to be temporarily stored rather than directly updating the main table and the front-end interface. This ensures that data is continuously pushed without interrupting the sorting and querying of a specific data node, guaranteeing the continuity and integrity of data reception and preventing the loss of critical market updates due to users pausing their viewing.

[0014] When the webpage switches to dynamic refresh mode, the system performs centralized batch updates and pushes on the main table and query data groups based on the dynamic data accumulated in the cache table and the new data pushed in real time. This allows the main table to merge cached data from the cache table, effectively reducing the number of front-end renderings triggered by high-frequency, scattered data updates. This significantly reduces the computational pressure and interface flicker on the webpage, and improves the stability and smoothness of data rendering. At the same time, batch processing further reduces the communication and processing resource overhead between the client and the webpage, further optimizing the system's resource allocation and user experience under high-frequency data flow.

[0015] Further, the step of responding to a first query request on the webpage, obtaining a first query data group based on the main table of the local database, and then transmitting the first query data group to the webpage includes: Obtain the height of the rendering window and the height of the data rows on the webpage; The amount of data to be displayed is obtained based on the height of the rendering window and the height of the data row; Based on the amount of displayed data, a third query data group is filtered from the first query data group, and then the third query data group is transmitted to the web page. In response to the window scrolling signal on the webpage, the scrolling row data on the webpage is obtained, and a fourth query data group is filtered from the first query data group based on the scrolling row data and the third query data group, and then the fourth query data group is transmitted to the webpage. The step of rendering the first query data group into a first query data image and then displaying the first query data image on the webpage includes: The system receives the third query data group, renders the third query data group into a third query data image, and then displays the third query data image on the webpage. A window scrolling signal is sent to the client to receive the fourth query data group, and the fourth query data group is rendered as a fourth query data image, thereby causing the web page to update and display the third query data image with the fourth query data image.

[0016] In this implementation, the client dynamically calculates and filters the amount of data required to transmit the current user window based on the actual rendering window height and data row height of the webpage. This enables on-demand loading and rendering of data on the webpage, ensuring that the webpage only needs to receive and render a limited amount of data matching the current visible window at any given time, rather than processing all the data in the query data group at once. In this way, even if the total amount of data in the query data group is as high as hundreds of thousands of records, it can avoid problems such as front-end interface lag, rendering delay, or even browser crashes caused by excessive data volume. This significantly reduces the data load of a single network transmission and the memory and computing resource consumption of the webpage, thereby reducing the data rendering pressure on the webpage.

[0017] Meanwhile, by responding to the window scrolling signal on the webpage, the client obtains the scrolling row data in real time and dynamically updates and transmits the next subset of the visible area. This allows the webpage to smoothly update and replace the third query data image with the fourth query data image. Ultimately, during the process of browsing the market data of the entire query data group, the webpage only needs to render a small portion of the data. This reduces the data rendering pressure on the webpage while enabling browsing of large-scale query data groups, ensuring the timeliness of data updates and the smoothness of user operation.

[0018] Furthermore, in response to the market data update signal from the server, the client receives dynamic data pushed by the server, and updates the main table of the local database and the first query data group based on the dynamic data, thereby obtaining the second query data group, including: If the dynamic data consists of several quote information entries, a quote queue is created based on these quote information entries, and several threads are started so that the threads write the quote information entries in the quote queue to the local database in parallel. Then, the main table of the local database and the first query data group are updated based on the quote information entries to obtain the second query data group. If the dynamic data consists of several transaction records, a transaction queue is created based on the transaction records, and a thread is started so that the thread writes the transaction records in the transaction queue into the local database one by one at a second preset period. Then, the main table of the local database and the first query data group are updated based on the transaction records to obtain the second query data group.

[0019] In this implementation, differentiated local data entry strategies are designed to address the varying business characteristics of different types of dynamic data, thereby optimizing the processing efficiency of high-frequency data streams. Specifically, for frequently updated and highly concurrent price information, a price queue is created and multiple threads are used for parallel writing, changing the data entry operation from serial to parallel. This significantly improves the throughput and processing speed of large amounts of instantaneous price data, effectively alleviating data congestion and increasing the speed of local database updates. For transaction information with smaller data volumes, a transaction queue is created and a single thread is used to write data one by one at a second preset cycle, reducing computer resource consumption and memory overhead.

[0020] Therefore, this differentiated processing mechanism enables the system to intelligently adapt to the characteristics of different types of data streams, improving the overall performance and stability of updating local databases in scenarios with high-frequency data push from the server.

[0021] Furthermore, the local database is an embedded relational database built on SQLite, including an SQL compiler and a virtual machine; wherein, in response to the first query request from the web page, the client obtains a first query data group based on the main table of the local database, including: The client responds to the first query request from the web page by sending a first SQL query statement to the local database; The SQL compiler receives the first SQL query statement, compiles it into a first bytecode instruction sequence, and then transmits the first bytecode instruction sequence to the virtual machine. The virtual machine performs data retrieval and data filtering on the main table according to the first bytecode instruction sequence, thereby obtaining the first query data group, and transmits the first query data group to the client.

[0022] In this implementation, a local database storage is achieved on the client side using an embedded relational database built on SQLite. The client encapsulates complex data retrieval and filtering logic into standard first-order SQL query statements based on SQLite. These queries are then compiled locally by an SQL compiler into a sequence of first-order bytecode instructions that can be directly executed in a virtual machine. This transforms the high-level query language into efficient low-level operation instructions, avoiding the significant network overhead and transmission time associated with traditional solutions that require transferring large amounts of raw data to the client for logical filtering.

[0023] The virtual machine directly executes compiled bytecode instructions on the local master table, enabling data retrieval and filtering operations and reducing query latency. Furthermore, since the SQLite database, its compiler, and the virtual machine are all embedded as libraries on the client's local machine, local resources are fully utilized for data querying and filtering. This eliminates the need for interaction with a centralized server-side database via network communication, simplifying the system architecture, reducing database deployment and maintenance costs, and ensuring the smoothness and stability of complex query operations. This further enhances the ability to perform localized real-time processing of high-frequency, massive amounts of data.

[0024] A second aspect of the present invention provides a multi-terminal hybrid data transmission and display method, which is executed by a client and includes the following steps: The static data is obtained from the server based on a first preset period, and then the static data is stored in the main table of the local database; wherein, the static data includes bond information and bond attributes; In response to the first query request on the web page, the first query data group is obtained from the main table of the local database, and then the first query data group is transmitted to the web page so that the web page renders the first query data group as a first query data image and then displays the first query data image on the web page. In response to the market update signal from the server, the system receives dynamic data pushed by the server, and updates the main table of the local database and the first query data group based on the dynamic data to obtain the second query data group; wherein, the dynamic data includes price information and transaction information; The second query data group is transmitted to the web page so that the web page renders the second query data group as a second query data image, and then the web page updates and displays the first query data image with the second query data image.

[0025] Furthermore, in response to the market data update signal from the server, the system receives dynamic data pushed by the server, and updates the main table of the local database and the first query data group based on the dynamic data, thereby obtaining the second query data group, including: In response to the market update signal from the server, obtain the current mode of the web page; If the current mode is pause mode, then the dynamic data pushed by the server is received, and then the dynamic data is updated to the cache table of the local database. If the current mode is dynamic refresh mode, then the dynamic data pushed by the server is received, and the main table and the first query data group are updated based on the dynamic data and the cache table, thereby obtaining the second query data group.

[0026] Further, the step of responding to a first query request on the webpage, obtaining a first query data group based on the main table of the local database, and then transmitting the first query data group to the webpage so that the webpage renders the first query data group as a first query data image, and then displays the first query data image on the webpage, includes: Obtain the height of the rendering window and the height of the data rows on the webpage; The amount of data to be displayed is obtained based on the height of the rendering window and the height of the data row; Based on the amount of displayed data, a third query data group is filtered from the first query data group, and then the third query data group is transmitted to the web page so that the web page renders the third query data group as a third query data image, and then displays the third query data image on the web page. In response to the window scrolling signal on the webpage, the scroll row data on the webpage is acquired, and a fourth query data group is filtered from the first query data group based on the scroll row data and the third query data group. The fourth query data group is then transmitted to the webpage so that the webpage renders the fourth query data group as a fourth query data image, and the webpage updates and displays the third query data image with the fourth query data image.

[0027] Furthermore, in response to the market data update signal from the server, the system receives dynamic data pushed by the server, and updates the main table of the local database and the first query data group based on the dynamic data, thereby obtaining the second query data group, including: If the dynamic data consists of several quote information entries, a quote queue is created based on these quote information entries, and several threads are started so that the threads write the quote information entries in the quote queue to the local database in parallel. Then, the main table of the local database and the first query data group are updated based on the quote information entries to obtain the second query data group. If the dynamic data consists of several transaction records, a transaction queue is created based on the transaction records, and a thread is started so that the thread writes the transaction records in the transaction queue into the local database one by one at a second preset period. Then, the main table of the local database and the first query data group are updated based on the transaction records to obtain the second query data group.

[0028] A third aspect of the present invention provides a computer storage medium including computer instructions, which, when executed on an electronic device, cause the electronic device to perform the multi-terminal hybrid data transmission and display method described in any of the second aspects. Attached Figure Description

[0029] Figure 1 This is a schematic diagram of the structure of a multi-terminal hybrid data transmission and display system provided in an embodiment of the present invention; Figure 2 This is a flowchart illustrating a multi-terminal hybrid data transmission and display method provided in an embodiment of the present invention. Detailed Implementation

[0030] The present invention will now be described in detail with reference to the accompanying drawings and embodiments. It should be noted that the following detailed descriptions are exemplary and intended to provide further detailed explanation of the invention. Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs; the terminology used herein in the specification is for the purpose of describing particular embodiments only and is not intended to limit the application; the terms "comprising" and "having," and any variations thereof, in the specification, claims, and foregoing drawings, are intended to cover non-exclusive inclusion. The terms "first," "second," etc., in the specification, claims, or foregoing drawings are used to distinguish different objects, not to describe a particular order.

[0031] It should be understood that although the steps in the flowcharts of the accompanying figures are shown sequentially as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the accompanying figures may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the sub-steps or stages of other steps.

[0032] Before describing this application in detail with reference to the accompanying drawings and embodiments, the terms and application scenarios involved in this application will first be explained.

[0033] For display and filtering scenarios with high data update frequency and large total data volume, the mainstream practice in the industry is to develop based on pure native clients or rely on specially designed high-performance databases, which has the problem of excessive development costs.

[0034] Specifically, existing technologies using JavaScript to consume more than 150 data packets / second via WebSocket push will encounter performance bottlenecks and WebSocket interruptions, failing to meet the data volume requirements of real-world business scenarios such as bond data systems.

[0035] Traditional centralized databases suffer from high network transmission overhead. With more than 300,000 data entries, the backend needs to support real-time filtering and sorting, and they are under pressure from a large number of centralized queries.

[0036] Most mainstream high-frequency market data systems in the industry are developed based on native clients or rely on specialized high-performance databases. Native clients require repeated development across different operating systems, while specialized high-performance databases require the development of entirely new databases tailored to the characteristics of market data, both of which involve high technical costs.

[0037] Please refer to Figure 1 To address the aforementioned technical problems, the first embodiment of the present invention provides a multi-terminal hybrid data transmission and display system, comprising a client, a server, a web page, and a local database; wherein: The local database has a main table, which is used to store data. The server is used to receive static data and dynamic data, and after receiving the dynamic data, pushes market update signals and the dynamic data to the client; wherein, the static data includes bond information and bond attributes, and the dynamic data includes quotation information and transaction information; The client is used to obtain static data from the server based on a first preset period, and then store the static data in the main table of the local database; The client responds to the first query request from the web page, obtains the first query data group from the main table of the local database, and then transmits the first query data group to the web page. The client responds to the market update signal from the server, receives the dynamic data pushed by the server, and updates the main table of the local database and the first query data group based on the dynamic data, thereby obtaining the second query data group, and transmitting the second query data group to the web page. The web page responds to the user's operation by sending a first query request to the client, thereby receiving the first query data group, rendering the first query data group into a first query data image, and then displaying the first query data image on the web page. The web page is used to receive the second query data group, thereby rendering the second query data group into a second query data image, and then causing the web page to update and display the first query data image with the second query data image.

[0038] The aforementioned multi-terminal hybrid data transmission and display system is suitable for processing bond information, bond attributes, price quotes, and transaction information in bond trading systems, which are updated frequently and have a large total data volume. This invention classifies bond information and bond attributes with low change frequency in the bond server as static data, and price quotes and transaction information that change frequently based on real-time market conditions as dynamic data. Through a collaborative architecture of client, server, web interface, and local database, the client acquires and stores static data in the main table of the local database based on a first preset period. This eliminates the need for the server to repeatedly push large amounts of static data when market data changes, significantly reducing network transmission overhead and the bandwidth and memory pressure caused by centralized queries.

[0039] Meanwhile, when the client responds to a query request from the web page, it directly extracts the corresponding first query data group from the local database based on the query data range. This fully utilizes local resources to perform data querying and filtering, eliminating the need to interact with the centralized database on the server through network communication. This saves network transmission time and server network transmission overhead, and reduces the data processing load for web page rendering, avoiding interface lag or freezing.

[0040] In addition, the client receives dynamic data pushed by the server and updates the local database and query data group in real time, so that the market data covered by the first query request displayed on the web page can be updated in real time according to the second query data group, ensuring the timeliness of data updates on the web page.

[0041] In summary, this invention adopts a hybrid architecture that combines client, server, and web page interfaces. The client has a lightweight function and low development cost across different operating systems. By distributing data processing locally to the client, it reduces dependence on specialized high-performance databases and avoids redundant cross-platform development. While increasing the data processing threshold, it significantly reduces R&D costs, technical costs, and network resource consumption, achieving efficient and economical high-frequency data transmission and display.

[0042] Furthermore, the local database is equipped with a cache table for storing data; the client responds to the market update signal from the server, receives dynamic data pushed by the server, and updates the main table of the local database and the first query data group based on the dynamic data, thereby obtaining the second query data group, including: In response to the market update signal from the server, obtain the current mode of the web page; If the current mode is pause mode, then the dynamic data pushed by the server is received, and then the dynamic data is updated to the cache table of the local database. If the current mode is dynamic refresh mode, then the dynamic data pushed by the server is received, and the main table and the first query data group are updated based on the dynamic data and the cache table, thereby obtaining the second query data group.

[0043] It should be noted that the pause mode refers to pausing the updating of market data on the webpage to view data details after the user has selected the first query data image based on the first query request. The dynamic refresh mode refers to keeping the first query data image updated frequently based on the second query data image after the user has selected the first query data image based on the first query request.

[0044] In this embodiment, the local database cleverly employs a dual-table storage structure consisting of a main table and a cache table. By introducing a cache table mechanism that is linked to the current mode of the webpage, data writing to the main table is paused when the webpage is in paused mode. Instead, data is stored in the cache table, allowing dynamic data to be temporarily stored rather than directly updating the main table and the front-end interface. This ensures that data is continuously pushed without interrupting the sorting and querying of a specific data node, guaranteeing the continuity and integrity of data reception and preventing the loss of critical market updates due to user pauses.

[0045] When the webpage switches to dynamic refresh mode, the system performs centralized batch updates and pushes on the main table and query data groups based on the dynamic data accumulated in the cache table and the new data pushed in real time. This allows the main table to merge cached data from the cache table, effectively reducing the number of front-end renderings triggered by high-frequency, scattered data updates. This significantly reduces the computational pressure and interface flicker on the webpage, and improves the stability and smoothness of data rendering. At the same time, batch processing further reduces the communication and processing resource overhead between the client and the webpage, further optimizing the system's resource allocation and user experience under high-frequency data flow.

[0046] Further, the step of responding to a first query request on the webpage, obtaining a first query data group based on the main table of the local database, and then transmitting the first query data group to the webpage includes: Obtain the height of the rendering window and the height of the data rows on the webpage; The amount of data to be displayed is obtained based on the height of the rendering window and the height of the data row; Based on the amount of displayed data, a third query data group is filtered from the first query data group, and then the third query data group is transmitted to the web page. In response to the window scrolling signal on the webpage, the scrolling row data on the webpage is obtained, and a fourth query data group is filtered from the first query data group based on the scrolling row data and the third query data group, and then the fourth query data group is transmitted to the webpage. The step of rendering the first query data group into a first query data image and then displaying the first query data image on the webpage includes: The system receives the third query data group, renders the third query data group into a third query data image, and then displays the third query data image on the webpage. A window scrolling signal is sent to the client to receive the fourth query data group, and the fourth query data group is rendered as a fourth query data image, thereby causing the web page to update and display the third query data image with the fourth query data image.

[0047] In one specific implementation, the web application integrates AgGrid, a high-performance JavaScript data table component, and configures its unique Viewport row model to achieve on-demand rendering and dynamic updates of data. AgGrid's Viewport mode is an advanced row model that is particularly suitable for handling extremely large datasets and business scenarios that require the server to push real-time updates to the client. In this mode, the web application only maintains and renders the data rows within the currently visible area of ​​the user's viewport, rather than the entire dataset.

[0048] Specifically, the web page calculates the amount of display data that the current view can accommodate based on the obtained rendering window height and data row height. This calculation process works in conjunction with the inherent logic of the Viewport mode to determine the range of data segments that need to be requested from the client. The client sends a first query request containing this range information to the local database client. When the user scrolls the table, AgGrid triggers a window scroll signal and calculates the new viewport range. Based on this, the client quickly locates and filters the precise data group required for the next viewport from the complete dataset, thus enabling efficient and accurate pushing of dynamic updates only for the data within that viewport.

[0049] In this embodiment, the client dynamically calculates and filters the amount of data required to transmit the current user window based on the actual rendering window height and data row height of the webpage. This enables on-demand loading and rendering of webpage data, ensuring that the webpage only needs to receive and render a limited amount of data matching the current visible window at any given time, rather than processing all the data in the query data group at once. This avoids problems such as front-end interface lag, rendering delay, or even browser crashes caused by excessive data volume, even if the total amount of data in the query data group is as high as hundreds of thousands of records. It significantly reduces the data load of a single network transmission and the memory and computing resource consumption of the webpage, thereby reducing the data rendering pressure on the webpage.

[0050] Meanwhile, by responding to the window scrolling signal on the webpage, the client obtains the scrolling row data in real time and dynamically updates and transmits the next subset of the visible area. This allows the webpage to smoothly update and replace the third query data image with the fourth query data image. Ultimately, during the process of browsing the market data of the entire query data group, the webpage only needs to render a small portion of the data. This reduces the data rendering pressure on the webpage while enabling browsing of large-scale query data groups, ensuring the timeliness of data updates and the smoothness of user operation.

[0051] Furthermore, in response to the market data update signal from the server, the client receives dynamic data pushed by the server, and updates the main table of the local database and the first query data group based on the dynamic data, thereby obtaining the second query data group, including: If the dynamic data consists of several quote information entries, a quote queue is created based on these quote information entries, and several threads are started so that the threads write the quote information entries in the quote queue to the local database in parallel. Then, the main table of the local database and the first query data group are updated based on the quote information entries to obtain the second query data group. If the dynamic data consists of several transaction records, a transaction queue is created based on the transaction records, and a thread is started so that the thread writes the transaction records in the transaction queue into the local database one by one at a second preset period. Then, the main table of the local database and the first query data group are updated based on the transaction records to obtain the second query data group.

[0052] In this embodiment, differentiated local data entry strategies are designed to address the varying business characteristics of different types of dynamic data, thereby optimizing the processing efficiency of high-frequency data streams. Specifically, for frequently updated and highly concurrent price information, a price queue is created and multiple threads are used for parallel writing, changing the data entry operation from serial to parallel. This significantly improves the throughput and processing speed of large amounts of instantaneous price data, effectively alleviating data congestion and increasing the speed of local database updates. For transaction information with smaller data volumes, a transaction queue is created and a single thread is used to write data one by one at a second preset cycle, reducing computer resource consumption and memory overhead.

[0053] Therefore, this differentiated processing mechanism enables the system to intelligently adapt to the characteristics of different types of data streams, improving the overall performance and stability of updating local databases in scenarios with high-frequency data push from the server.

[0054] Furthermore, the local database is an embedded relational database built on SQLite, including an SQL compiler and a virtual machine; wherein, in response to the first query request from the web page, the client obtains a first query data group based on the main table of the local database, including: The client responds to the first query request from the web page by sending a first SQL query statement to the local database; The SQL compiler receives the first SQL query statement, compiles it into a first bytecode instruction sequence, and then transmits the first bytecode instruction sequence to the virtual machine. The virtual machine performs data retrieval and data filtering on the main table according to the first bytecode instruction sequence, thereby obtaining the first query data group, and transmits the first query data group to the client.

[0055] In this embodiment, local database storage on the client side is achieved by using an embedded relational database built on SQLite. The client encapsulates complex data retrieval and filtering logic into standard first SQL query statements based on SQLite. These queries are then compiled locally by an SQL compiler into a sequence of first bytecode instructions that can be directly executed in a virtual machine. This transforms the high-level query language into efficient low-level operation instructions, avoiding the significant network overhead and transmission time associated with traditional solutions that require transmitting large amounts of raw data to the client for logical filtering.

[0056] The virtual machine directly executes compiled bytecode instructions on the local master table, enabling data retrieval and filtering operations and reducing query latency. Furthermore, since the SQLite database, its compiler, and the virtual machine are all embedded as libraries on the client's local machine, local resources are fully utilized for data querying and filtering. This eliminates the need for interaction with a centralized server-side database via network communication, simplifying the system architecture, reducing database deployment and maintenance costs, and ensuring the smoothness and stability of complex query operations. This further enhances the ability to perform localized real-time processing of high-frequency, massive amounts of data.

[0057] In a preferred embodiment of the first embodiment of the present invention, in order to further optimize data transmission efficiency to adapt to high-frequency business scenarios, the system adopts the Protocol Buffers (Protobuf) high-performance serialization framework in the key data exchange link.

[0058] Specifically, when the server pushes market update signals and corresponding dynamic data to the client, it serializes the dynamic data into a binary data stream in Protobuf format before transmission. Similarly, when the client responds to a query request from a webpage and transmits the first, second, third, or fourth query data group to the webpage, it also serializes the data group into Protobuf format. Compared to traditional text serialization methods such as JSON or XML, the binary encoding format used by Protobuf has a smaller data volume, significantly reducing network bandwidth consumption and transmission latency. At the same time, Protobuf has efficient data encoding and decoding performance; the serialized byte stream it generates can be quickly deserialized by the client and webpage using pre-generated strongly typed code, parsing the data into directly operable memory objects. This process greatly reduces the parsing overhead and memory consumption at the receiving end.

[0059] In another specific embodiment of the first embodiment of the present invention, at the beginning of each day, the web page first initiates a sbuscribe subscription connection request to the client. After receiving the request, the client obtains static data such as quotation inventory data, transaction inventory data, and fields of quotation information that are not authorized by the server, and stores the static data in the main table of the local database; then, it establishes a WebSocket connection with the server and sends a subscription instruction to the server.

[0060] Please refer to Figure 2 The second embodiment of the present invention provides a multi-terminal hybrid data transmission and display method, which is executed by the client and includes the following steps: S101. Obtain static data from the server based on a first preset period, and then store the static data in the main table of the local database; wherein, the static data includes bond information and bond attributes; S102. In response to the first query request on the web page, the first query data group is obtained according to the main table of the local database, and then the first query data group is transmitted to the web page so that the web page renders the first query data group as a first query data image, and then displays the first query data image on the web page. S103. In response to the market update signal from the server, receive the dynamic data pushed by the server, and update the main table of the local database and the first query data group based on the dynamic data to obtain the second query data group; wherein, the dynamic data includes price information and transaction information; S104. The second query data group is transmitted to the web page so that the web page renders the second query data group as a second query data image, and then the web page updates and displays the first query data image with the second query data image.

[0061] Furthermore, in response to the market data update signal from the server, the system receives dynamic data pushed by the server, and updates the main table of the local database and the first query data group based on the dynamic data, thereby obtaining the second query data group, including: In response to the market update signal from the server, obtain the current mode of the web page; If the current mode is pause mode, then the dynamic data pushed by the server is received, and then the dynamic data is updated to the cache table of the local database. If the current mode is dynamic refresh mode, then the dynamic data pushed by the server is received, and the main table and the first query data group are updated based on the dynamic data and the cache table, thereby obtaining the second query data group.

[0062] Further, the step of responding to a first query request on the webpage, obtaining a first query data group based on the main table of the local database, and then transmitting the first query data group to the webpage so that the webpage renders the first query data group as a first query data image, and then displays the first query data image on the webpage, includes: Obtain the height of the rendering window and the height of the data rows on the webpage; The amount of data to be displayed is obtained based on the height of the rendering window and the height of the data row; Based on the amount of displayed data, a third query data group is filtered from the first query data group, and then the third query data group is transmitted to the web page so that the web page renders the third query data group as a third query data image, and then displays the third query data image on the web page. In response to the window scrolling signal on the webpage, the scroll row data on the webpage is acquired, and a fourth query data group is filtered from the first query data group based on the scroll row data and the third query data group. The fourth query data group is then transmitted to the webpage so that the webpage renders the fourth query data group as a fourth query data image, and the webpage updates and displays the third query data image with the fourth query data image.

[0063] Furthermore, in response to the market data update signal from the server, the system receives dynamic data pushed by the server, and updates the main table of the local database and the first query data group based on the dynamic data, thereby obtaining the second query data group, including: If the dynamic data consists of several quote information entries, a quote queue is created based on these quote information entries, and several threads are started so that the threads write the quote information entries in the quote queue to the local database in parallel. Then, the main table of the local database and the first query data group are updated based on the quote information entries to obtain the second query data group. If the dynamic data consists of several transaction records, a transaction queue is created based on the transaction records, and a thread is started so that the thread writes the transaction records in the transaction queue into the local database one by one at a second preset period. Then, the main table of the local database and the first query data group are updated based on the transaction records to obtain the second query data group.

[0064] A third embodiment of the present invention provides a computer storage medium including computer instructions, which, when executed on an electronic device, cause the electronic device to perform the multi-terminal hybrid data transmission and display method described in any of the second aspects.

[0065] Those skilled in the art will understand that all or part of the processes in the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments described above. Any references to memory, databases, or other media used in the embodiments provided in this application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM). The databases involved in the embodiments provided in this application may include at least one type of relational database and non-relational database. Non-relational databases may include, but are not limited to, blockchain-based distributed databases. The processors involved in the embodiments provided in this application may be general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic devices, quantum computing-based data processing logic devices, etc., and are not limited to these.

[0066] The term "embodiment" as used herein means that a particular feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of this application. The appearance of this phrase in various places throughout the specification does not necessarily refer to the same embodiment, nor is it a mutually exclusive, independent, or alternative embodiment. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with other embodiments. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described; however, any combination of these technical features that does not contradict each other should be considered within the scope of this specification.

[0067] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of this application. It should be noted that those skilled in the art can make various improvements and substitutions without departing from the concept of this application, and these improvements and substitutions should also be considered within the scope of protection of this invention. Therefore, the scope of protection of this application should be determined by the appended claims.

Claims

1. A multi-terminal hybrid data transmission and display system, characterized in that, This includes the client, server, web interface, and local database; among which: The local database has a main table, which is used to store data. The server is used to receive static data and dynamic data, and after receiving the dynamic data, pushes market update signals and the dynamic data to the client; wherein, the static data includes bond information and bond attributes, and the dynamic data includes quotation information and transaction information; The client is used to obtain static data from the server based on a first preset period, and then store the static data in the main table of the local database; The client responds to the first query request from the web page, obtains the first query data group from the main table of the local database, and then transmits the first query data group to the web page. The client responds to the market update signal from the server, receives the dynamic data pushed by the server, and updates the main table of the local database and the first query data group based on the dynamic data, thereby obtaining the second query data group, and transmitting the second query data group to the web page. The web page responds to the user's operation by sending a first query request to the client, thereby receiving the first query data group, rendering the first query data group into a first query data image, and then displaying the first query data image on the web page. The web page is used to receive the second query data group, thereby rendering the second query data group into a second query data image, and then causing the web page to update and display the first query data image with the second query data image.

2. The multi-terminal hybrid data transmission and display system according to claim 1, characterized in that, The local database is configured with a cache table for storing data. The client responds to market update signals from the server, receives dynamic data pushed by the server, and updates the main table of the local database and the first query data group based on the dynamic data, thereby obtaining a second query data group, including: In response to the market update signal from the server, obtain the current mode of the web page; If the current mode is pause mode, then the dynamic data pushed by the server is received, and then the dynamic data is updated to the cache table of the local database. If the current mode is dynamic refresh mode, then the dynamic data pushed by the server is received, and the main table and the first query data group are updated based on the dynamic data and the cache table, thereby obtaining the second query data group.

3. The multi-terminal hybrid data transmission and display system according to claim 1, characterized in that, The step of responding to a first query request from a webpage, obtaining a first query data group from the main table of the local database, and then transmitting the first query data group to the webpage includes: Obtain the height of the rendering window and the height of the data rows on the webpage; The amount of data to be displayed is obtained based on the height of the rendering window and the height of the data row; Based on the amount of displayed data, a third query data group is filtered from the first query data group, and then the third query data group is transmitted to the web page. In response to the window scrolling signal on the webpage, the scrolling row data on the webpage is obtained, and a fourth query data group is filtered from the first query data group based on the scrolling row data and the third query data group, and then the fourth query data group is transmitted to the webpage. The step of rendering the first query data group into a first query data image and then displaying the first query data image on the webpage includes: The system receives the third query data group, renders the third query data group into a third query data image, and then displays the third query data image on the webpage. A window scrolling signal is sent to the client to receive the fourth query data group, and the fourth query data group is rendered as a fourth query data image, thereby causing the web page to update and display the third query data image with the fourth query data image.

4. The multi-terminal hybrid data transmission and display system according to claim 1, characterized in that, The client responds to the market data update signal from the server, receives dynamic data pushed by the server, and updates the main table of the local database and the first query data group based on the dynamic data, thereby obtaining the second query data group, including: If the dynamic data consists of several quote information entries, a quote queue is created based on these quote information entries, and several threads are started so that the threads write the quote information entries in the quote queue to the local database in parallel. Then, the main table of the local database and the first query data group are updated based on the quote information entries to obtain the second query data group. If the dynamic data consists of several transaction records, a transaction queue is created based on the transaction records, and a thread is started so that the thread writes the transaction records in the transaction queue into the local database one by one at a second preset period. Then, the main table of the local database and the first query data group are updated based on the transaction records to obtain the second query data group.

5. The multi-terminal hybrid data transmission and display system according to claim 1, characterized in that, The local database is an embedded relational database built on SQLite, including an SQL compiler and a virtual machine; wherein, in response to the first query request from the web page, the client obtains a first query data group based on the main table of the local database, including: The client responds to the first query request from the web page by sending a first SQL query statement to the local database; The SQL compiler receives the first SQL query statement, compiles it into a first bytecode instruction sequence, and then transmits the first bytecode instruction sequence to the virtual machine. The virtual machine performs data retrieval and data filtering on the main table according to the first bytecode instruction sequence, thereby obtaining the first query data group, and transmits the first query data group to the client.

6. A multi-terminal hybrid data transmission and display method, characterized in that, This method is executed by the client and includes the following steps: The static data is obtained from the server based on a first preset period, and then the static data is stored in the main table of the local database; wherein, the static data includes bond information and bond attributes; In response to the first query request on the web page, the first query data group is obtained from the main table of the local database, and then the first query data group is transmitted to the web page so that the web page renders the first query data group as a first query data image and then displays the first query data image on the web page. In response to the market update signal from the server, the system receives dynamic data pushed by the server, and updates the main table of the local database and the first query data group based on the dynamic data to obtain the second query data group; wherein, the dynamic data includes price information and transaction information; The second query data group is transmitted to the web page so that the web page renders the second query data group as a second query data image, and then the web page updates and displays the first query data image with the second query data image.

7. The multi-terminal hybrid data transmission and display method according to claim 6, characterized in that, The system responds to market data update signals from the server, receives dynamic data pushed by the server, and updates the main table of the local database and the first query data group based on the dynamic data, thereby obtaining a second query data group, including: In response to the market update signal from the server, obtain the current mode of the web page; If the current mode is pause mode, then the dynamic data pushed by the server is received, and then the dynamic data is updated to the cache table of the local database. If the current mode is dynamic refresh mode, then the dynamic data pushed by the server is received, and the main table and the first query data group are updated based on the dynamic data and the cache table, thereby obtaining the second query data group.

8. The multi-terminal hybrid data transmission and display method according to claim 6, characterized in that, The step of responding to a first query request on a webpage, obtaining a first query data group from the main table of the local database, and then transmitting the first query data group to the webpage so that the webpage renders the first query data group as a first query data image and displays the first query data image on the webpage, includes: Obtain the height of the rendering window and the height of the data rows on the webpage; The amount of data to be displayed is obtained based on the height of the rendering window and the height of the data row; Based on the amount of displayed data, a third query data group is filtered from the first query data group, and then the third query data group is transmitted to the web page so that the web page renders the third query data group as a third query data image, and then displays the third query data image on the web page. In response to the window scrolling signal on the webpage, the scroll row data on the webpage is acquired, and a fourth query data group is filtered from the first query data group based on the scroll row data and the third query data group. The fourth query data group is then transmitted to the webpage so that the webpage renders the fourth query data group as a fourth query data image, and the webpage updates and displays the third query data image with the fourth query data image.

9. A multi-terminal hybrid data transmission and display method according to claim 6, characterized in that, The system responds to market data update signals from the server, receives dynamic data pushed by the server, and updates the main table of the local database and the first query data group based on the dynamic data, thereby obtaining a second query data group, including: If the dynamic data consists of several quote information entries, a quote queue is created based on these quote information entries, and several threads are started so that the threads write the quote information entries in the quote queue to the local database in parallel. Then, the main table of the local database and the first query data group are updated based on the quote information entries to obtain the second query data group. If the dynamic data consists of several transaction records, a transaction queue is created based on the transaction records, and a thread is started so that the thread writes the transaction records in the transaction queue into the local database one by one at a second preset period. Then, the main table of the local database and the first query data group are updated based on the transaction records to obtain the second query data group.

10. A computer storage medium, characterized in that, The method includes computer instructions that, when executed on an electronic device, cause the electronic device to perform the multi-terminal hybrid data transmission and display method according to any one of claims 6-9.

Images