WEB web page real-time refreshing method based on APM32

Abstract

The invention belongs to a webpage real-time refreshing method, and particularly relates to a WEB web page real-time refreshing method based on an APM32. Comprising the following steps: initializing a configuration underlying network, setting an HTTP (Hyper Text Transport Protocol) server to respond to a front-end request, carrying out resource configuration management and real-time data transmission and optimization on a model layer, creating a WEB page and realizing asynchronous communication on a view layer, establishing an exception handling mechanism on the model layer and the like. Initialization relates to system clock, interface, network configuration and the like. And the HTTP server sets related parameters based on the lwIP and processes the concurrent requests. The resource management of the model layer covers memory, processor and network bandwidth optimization. Data transmission optimization comprises protocol selection and other aspects. The view layer creates and updates a page in a specific manner. According to the method, an MVC framework is adopted, optimization is carried out according to APM32 characteristics, the bottleneck of a traditional method is overcome, efficient real-time processing is achieved, system flexibility, expandability and maintenance convenience are improved, and the real-time data acquisition and interaction requirements of a user are met.

Description

Technical Field

[0001] The invention belongs to a web page real-time refreshing method, and in particular relates to a web page real-time refreshing method based on APM32. Background Art

[0002] With the continuous development of information technology, embedded devices are increasingly used in various fields. In some application scenarios, it is necessary to implement the real-time refresh function of WEB pages on embedded devices to meet users' needs for real-time data acquisition and interaction. However, existing technologies have some problems in implementing this function. For example, the underlying network configuration is not flexible and efficient enough, and may not be well adapted to different network environments; in HTTP server settings, it may not be able to effectively handle multiple concurrent requests, resulting in slow response speed; in the resource configuration management of the Model layer, there may be memory fragmentation and leakage problems, affecting the efficient access of data, unreasonable processor scheduling leading to performance degradation, and insufficient network bandwidth utilization causing network congestion; in real-time data transmission and optimization, there may be no suitable protocol selection, insufficient data compression and sound optimization, and imperfect timing mechanism, which cannot ensure the real-time nature of page information; in asynchronous communication of web pages, efficient local updates may not be achieved, affecting user experience. Summary of the invention

[0003] The present invention aims at solving the technical problems existing in the background technology and proposes a real-time refresh method of a WEB web page based on APM32.

[0004] In order to achieve the above object, the technical solution adopted by the present invention is: comprising the following steps:

[0005] S1, first initialize the configuration and implement the underlying network configuration;

[0006] S2. In the control layer, set up an HTTP server to respond to front-end requests;

[0007] S3. In the model layer, the Model layer contains all business logic and data access code implementation, as well as resource configuration management for each module;

[0008] S4. In the model layer, a variety of technologies are used to achieve real-time data transmission and optimization;

[0009] S5. Create a WEB page in the view layer and implement asynchronous communication of the web page, that is, exchange data with the server and update the web page without interrupting the user's interaction with the web page;

[0010] S6. Finally, in the model layer, establish an exception handling mechanism to properly handle these identified problems.

[0011] Preferably, the initialization of step S1 is implemented by initializing the system clock, configuring GPIO, RS485, CAN interface, configuring lwIP, underlying network configuration, HTTP server and setting callback function;

[0012] Preferably, the underlying network configuration in step S1 is implemented by integrating the lwIP library into the embedded project; configuring the lwIP options in the lwIP configuration file; initializing the Ethernet controller and connecting it to the netif interface of the lwIP; setting the IP address, subnet mask, and gateway network parameters; and ensuring that the address resolution protocol ARP is enabled so that the device can resolve the IP addresses of other devices on the network to MAC addresses.

[0013] Preferably, the step S2 sets up the HTTP server to respond to the front-end request as follows: based on the lwIP HTTP server, configure the port, root directory, and log file of the HTTP server, define the routing or processing function in the HTTP server, which is responsible for receiving requests, calling the Model layer, and generating responses; the HTTP server needs to handle multiple concurrent requests, and the configuration server uses asynchronous I / O and event loops to manage requests.

[0014] Preferably, the resource configuration management of each module implemented by the Model layer in step S3 is divided into the following parts:

[0015] S31. First, memory management. Optimize memory allocation strategy. Use umm_malloc, a memory allocator designed for embedded systems, to reduce memory fragmentation and leakage, and ensure efficient access to key data. For scenarios where the object size is known and frequently allocated and released, pre-allocate a fixed-size memory area and divide it into multiple fixed-size memory blocks for allocation and use when needed.

[0016] S32. Secondly, processor scheduling: With the support of RTOS, the priority and execution order of tasks can be reasonably arranged to avoid performance degradation caused by processor overload;

[0017] S33. Finally, network bandwidth utilization: adopt dynamic load balancing method to dynamically adjust data transmission rate and frequency according to the dynamic allocation of resources between different internal tasks or processes to avoid network congestion.

[0018] Preferably, the step of implementing real-time data transmission and optimization in step S4 is:

[0019] S41. First, select a protocol: select a suitable communication protocol according to system requirements and network environment to achieve reliable data transmission and real-time update;

[0020] S42, secondly data compression: encoding and compressing the audio data before data transmission, reducing network bandwidth usage and improving transmission efficiency;

[0021] S43, then sound optimization: automatic flow adjustment, sound repair, to provide a more stable, smooth, high-quality audio experience;

[0022] S44. Finally, there is the timing mechanism: set reasonable timing tasks, regularly obtain the latest data from the Model layer and push it to the View layer for display, to ensure the real-time nature of the page information.

[0023] Preferably, the WEB interface in step S5 first creates an HTML page, dynamically generates these pages in C language code, stores the HTML file in the file system of the embedded device, and provides it through an HTTP server; this page is accessed through a web browser connected to the same network of the APM32 device.

[0024] Preferably, the steps for implementing the asynchronous communication of the webpage in step S5 are:

[0025] S51, firstly, initiate an asynchronous request at a fixed time: use the setTimeout function to call at a fixed time, so as to initiate an asynchronous HTTPS request to the server every 1 second in the web page, and continue to execute subsequent codes without waiting for the server response by using asynchronous method;

[0026] S52, the server processes the request: after receiving the request, the server performs corresponding database query and data calculation according to the content of the request;

[0027] S53, then return data: the server returns the processing result as a response to the client;

[0028] S54, finally updating the page content: after receiving the response from the server, parsing the response data, and using DOM operations to dynamically insert the data into a specified position of the web page, thereby realizing a partial update of the page.

[0029] Compared with the prior art, the advantages and positive effects of the present invention are that the embodiment of the present invention adopts MVC architecture design, optimizes the broadcast data collection and transmission process in view of the limited resources of the APM32 microcontroller, overcomes the performance bottleneck of traditional methods in complex applications, realizes efficient and real-time data processing and transmission, and enhances the system's web page configuration flexibility, automatic real-time local data refresh of WEB pages, software scalability and maintenance convenience. At the same time, it realizes broadcast data protocol adaptation; broadcast working mode adaptation; supports server type broadcast services, etc.; configures group control, real-time tasks, timing, etc.; the real-time interface displays multiple states such as data transmission rate, delay time, packet loss rate, client / server status, resource usage, broadcast message queue, performance monitoring chart, system configuration information, etc. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0031] Figure 1 Configure a flow chart for the underlying network;

[0032] Figure 2 A flow chart for HTTP server to respond to requests;

[0033] Figure 3 Refresh the flow chart for page data in real time;

[0034] Figure 4 A flow chart for error identification and exception response strategies; DETAILED DESCRIPTION

[0035] In order to more clearly understand the above-mentioned purpose, features and advantages of the present invention, the present invention is further described below in conjunction with the accompanying drawings and embodiments. It should be noted that the embodiments of the present application and the features in the embodiments can be combined with each other without conflict.

[0036] In the following description, many specific details are set forth to facilitate a full understanding of the present invention. However, the present invention may also be implemented in other ways than those described herein. Therefore, the present invention is not limited to the specific embodiments of the following disclosure.

[0037] Embodiment, the present invention provides a method and device for implementing real-time refresh of system status page based on APM32, and a method and device for implementing real-time refresh of broadcast system status page, aiming to optimize the monitoring and management experience of the broadcast system, solve the problems of insufficient data real-time performance and performance bottlenecks by real-time updating of system configuration, connection status and other information, improve system transmission efficiency, and improve system stability and reliability.

[0038] First, you need to initialize. In the initialization configuration, you need to initialize the system clock, configure GPIO, RS485, CAN interface, configure lwIP, bottom-level network configuration, HTTP server, etc., and set the callback function. The bottom-level network configuration process is as follows Figure 1 In the figure, first integrate the lwIP library into the embedded project; configure lwIP options such as IPv4 / IPv6, TCP / UDP, DHCP, etc. in the lwIP configuration file, then initialize the Ethernet controller and connect it to the netif interface of lwIP; set network parameters such as IP address, subnet mask, gateway, etc.; enable ARP: make sure ARP (Address Resolution Protocol) is enabled so that the device can resolve the IP address of other devices on the network to the MAC address. This comprehensive initialization configuration enables the various components of the system to work together, improves the stability and reliability of the system, and provides the necessary conditions for realizing the real-time refresh function of the web page.

[0039] Then, in the control layer, you need to set up an HTTP server to respond to the front-end request. The request process is as follows: Figure 2 As shown in the figure, the processing function of the HTTP server is part of the Controller layer, which is responsible for receiving requests, calling business logic (Model layer), and generating responses (the content of the View layer is directly built in the HTTP response). The lwIP-based HTTP server clarifies the server's operating parameters by setting ports, root directories, and log files, greatly improving the server's response speed and processing capabilities, ensuring that front-end requests can be processed in a timely manner and improving the user experience. Configure the HTTP server's port, root directory, log files, etc. Define routes or processing functions in the HTTP server, which are responsible for receiving requests, calling the Model layer, and generating responses. The HTTP server needs to handle multiple concurrent requests, and configure the server to use asynchronous I / O and event loops to manage requests.

[0040] Then in the model layer, the Model layer contains all the business logic and data access code implementations, as well as resource configuration management of each module. The present invention adopts the umm_malloc memory allocator designed specifically for embedded systems to optimize the memory allocation strategy. Reduce memory fragmentation and leakage, improve memory utilization, and ensure that key data can be efficiently accessed. First, memory management, optimize the memory allocation strategy, adopt the umm_malloc memory allocator designed specifically for embedded systems, reduce memory fragmentation and leakage, and ensure efficient access to key data; for scenes where the object size is known and frequently allocated and released, pre-allocate a fixed-size memory area, and divide multiple fixed-size memory blocks from it for allocation and use when needed; secondly, processor scheduling: with the support of RTOS, reasonably arrange the priority and execution order of tasks to avoid performance degradation caused by processor overload; finally, network bandwidth utilization: adopt a dynamic load balancing method, dynamically adjust the data transmission rate and frequency according to the dynamic allocation of resources between different internal tasks or processes, and avoid network congestion.

[0041] In addition, considering the transmission and optimization of data, it is necessary to ensure the real-time transmission of data through multiple optimizations. First, the protocol selection: select the appropriate communication protocol according to the system requirements and network environment to achieve reliable data transmission and real-time update; second, data compression: encode and compress the audio data before data transmission to reduce network bandwidth usage and improve transmission efficiency; then sound optimization: automatic flow adjustment and sound repair to provide a more stable, smooth and high-quality audio experience; finally, the timing mechanism: set reasonable timing tasks, regularly obtain the latest data from the Model layer and push it to the View layer for display to ensure the real-time nature of the page information.

[0042] Considering that the interface needs to be accessed next, the present invention first creates an HTML page, dynamically generates these pages in C language code, and stores the HTML file in the file system of the embedded device and provides it through the HTTP server; this page is accessed through a web browser connected to the same network of the APM32 device. The implemented code is:

[0043]

[0044] In order to realize asynchronous communication of web pages, that is, to exchange data with the server and update certain parts of the web pages without interrupting the interaction between the user and the web pages, the implementation process of the present invention is as follows: Figure 3 As shown, Figure 3First, an asynchronous request is initiated regularly: the setTimeout function is used to call regularly, so that an asynchronous HTTPS request is initiated to the server every 1 second in the web page, and the subsequent code is executed asynchronously without waiting for the server response; secondly, the server processes the request: after receiving the request, the server queries the database and calculates the data according to the content of the request; then the data is returned: the server returns the processing result to the client as a response; finally, the page content is updated: after receiving the server's response, the response data is parsed, and the data is dynamically inserted into the specified position of the web page using DOM operations, thereby realizing partial updates of the page. The code is as follows:

[0045]

[0046]

[0047] Finally, at the model level, it is necessary not only to have the ability to identify potential errors or problems (i.e., error detection), but also to establish a mechanism to properly handle these identified problems (i.e., exception handling). Figure 4 It is the process of introducing these mechanisms at the model level. By establishing a complete exception handling mechanism, not only can the fault tolerance of the system be improved, but also the stability and reliability can be enhanced. This ensures that the system can maintain stable operation when facing various complex operating environments and possible problems.

[0048] The above description is only a preferred embodiment of the present invention and does not limit the present invention in other forms. Any technician familiar with the profession may use the technical content disclosed above to change or modify it into an equivalent embodiment with equivalent changes and apply it to other fields. However, any simple modification, equivalent change and modification made to the above embodiment based on the technical essence of the present invention without departing from the content of the technical solution of the present invention still falls within the protection scope of the technical solution of the present invention.

Claims

1. A real-time refresh method for WEB pages based on APM32, characterized in that: The following steps are involved: S1, first initialize the configuration and implement the underlying network configuration; S2. In the control layer, set up an HTTP server to respond to front-end requests; S3. In the model layer, the Model layer contains all business logic and data access code implementation, as well as resource configuration management for each module; S4. In the model layer, a variety of technologies are used to achieve real-time data transmission and optimization; S5. Create a WEB page in the view layer and implement asynchronous communication of the web page, that is, exchange data with the server and update the web page without interrupting the user's interaction with the web page; S6. Finally, in the model layer, establish an exception handling mechanism to properly handle these identified problems.

2. A method for real-time refreshing of WEB pages based on APM32 according to claim 1, characterized in that: The implementation of the initialization of step S1 is to initialize the system clock, configure GPIO, RS485, CAN interface, configure lwIP, underlying network configuration, HTTP server and set callback function.

3. A method for real-time refreshing of WEB pages based on APM32 according to claim 1, characterized in that: The implementation of the underlying network configuration in step S1 is to integrate the lwIP library into the embedded project; configure the lwIP options in the lwIP configuration file; Initialize the Ethernet controller and connect it to the netif interface of lwIP; Set the IP address, subnet mask, and gateway network parameters; ensure that the Address Resolution Protocol (ARP) is enabled so that the device can resolve the IP addresses of other devices on the network to MAC addresses.

4. A method for real-time refreshing of WEB pages based on APM32 according to claim 1, characterized in that: The step S2 sets the HTTP server to respond to the front-end request as follows: an HTTP server based on lwIP is configured with the port, root directory, and log file of the HTTP server, and a routing or processing function is defined in the HTTP server to receive requests, call the Model layer, and generate responses; HTTP servers need to handle multiple concurrent requests, and the configuration server uses asynchronous I / O and event loops to manage requests.

5. A method for real-time refreshing of WEB pages based on APM32 according to claim 1, characterized in that: The resource configuration management of each module implemented by the Model layer in step S3 is divided into the following parts: S31. First, memory management. Optimize memory allocation strategy. Use umm_malloc, a memory allocator designed for embedded systems, to reduce memory fragmentation and leakage, and ensure efficient access to key data. For scenarios where the object size is known and frequently allocated and released, pre-allocate a fixed-size memory area and divide it into multiple fixed-size memory blocks for allocation and use when needed. S32. Secondly, processor scheduling: With the support of RTOS, the priority and execution order of tasks can be reasonably arranged to avoid performance degradation caused by processor overload; S33. Finally, network bandwidth utilization: adopt dynamic load balancing method to dynamically adjust data transmission rate and frequency according to the dynamic allocation of resources between different internal tasks or processes to avoid network congestion.

6. A method for real-time refreshing of WEB pages based on APM32 according to claim 1, characterized in that: The steps for implementing real-time data transmission and optimization in step S4 are: S41. First, select a protocol: select a suitable communication protocol according to system requirements and network environment to achieve reliable data transmission and real-time update; S42, secondly data compression: encoding and compressing the audio data before data transmission, reducing network bandwidth usage and improving transmission efficiency; S43, then sound optimization: automatic flow adjustment, sound repair, to provide a more stable, smooth, high-quality audio experience; S44. Finally, there is the timing mechanism: set reasonable timing tasks, regularly obtain the latest data from the Model layer and push it to the View layer for display, to ensure the real-time nature of the page information.

7. A method for real-time refreshing of WEB pages based on APM32 according to claim 1, characterized in that: In step S5, the WEB interface first creates an HTML page, dynamically generates these pages in C language code, and stores the HTML file in the file system of the embedded device and provides it through the HTTP server; This page is accessed via a web browser connected to the same network as the APM32 device.

8. A method for real-time refreshing of WEB pages based on APM32 according to claim 1, characterized in that: The steps for implementing the asynchronous communication of the web page in step S5 are: S51, firstly, initiate an asynchronous request at a fixed time: use the setTimeout function to call at a fixed time, so as to initiate an asynchronous HTTPS request to the server every 1 second in the web page, and continue to execute subsequent codes without waiting for the server response by using asynchronous method; S52, the server processes the request: after receiving the request, the server performs corresponding database query and data calculation according to the content of the request; S53, then return data: the server returns the processing result as a response to the client; S54, finally updating the page content: after receiving the response from the server, parsing the response data, and using DOM operations to dynamically insert the data into a specified position of the web page, thereby realizing a partial update of the page.

Images