Electric vehicle SSE high-concurrency mass data rendering method

Abstract

The invention discloses an electric vehicle SSE high-concurrency mass data rendering method, which comprises the steps of S1, building a data simulation environment, installing a simulator to generate mass vehicle data, and applying for high-concurrency resources; s2, a real-time data channel is established, a server side configures an SSE interface to push vehicle data, a client side monitors the data through EventSource and writes the data into a buffer area, and meanwhile a WebSocket service is established to push a real-time vehicle state; s3, designing a segmentation table structure, and performing segmentation transmission on the data according to key field types; s4, the front end adopts a virtual rolling technology to render data, a rolling container is initialized, data slices of a visual area are calculated, and DOM (Document Object Model) nodes are dynamically updated; and S5, monitoring the concurrency index, and replacing the original data transmission and rendering scheme in the production environment after the performance is verified to be stable.

Description

Technical Field

[0001] This invention relates to the field of data rendering, and more particularly to a method for high-concurrency, massive-data rendering of tram SSE. Background Technology

[0002] Current commercial vehicle monitoring platforms generally adopt a data acquisition mechanism based on HTTP polling, combined with a full DOM rendering scheme and WebSocket long connections to maintain high-concurrency communication. This technical system has significant drawbacks: 1. At the transmission level, frequent polling generates a large number of invalid requests, resulting in significant transmission latency in high-concurrency scenarios and frequent data out-of-order errors when the network fluctuates. 2. At the rendering level, the surge in browser reflow calculations triggered by full DOM operations caused severe interface lag, compromising the smoothness of user interaction. 3. At the resource level, uncontrolled client memory usage and high server connection overhead caused overall resource consumption to exceed the carrying capacity. Summary of the Invention

[0003] To address the aforementioned technical problems, this invention proposes a high-concurrency, massive-data rendering method for electric vehicle SSE (Surface Mount Technology).

[0004] A method for high-concurrency, massive-data rendering of electric vehicle SSE includes the following sub-steps: S1: Set up a data simulation environment, install a simulator to generate massive amounts of vehicle data, and apply for high-concurrency resources; S2: Establish a real-time data channel. The server configures the SSE interface to push vehicle data, and the client listens for data through EventSource and writes it to the buffer. At the same time, a WebSocket service is established to push real-time vehicle status. S3: Design a segmented table structure and transmit data in segments according to the key field type; S4: The front end uses virtual scrolling technology to render data, initialize the scrolling container, calculate data slices in the visible area, and dynamically update DOM nodes. S5: Monitor concurrency metrics and, after verifying stable performance, replace the original data transmission and rendering scheme in the production environment.

[0005] SSE technology is similar to long polling, but the difference is that each connection does not send more than one message. The client sends a request, and the server keeps the connection until a new message is sent back to the client. In this way, the connection can be used to resend messages, with the server sending messages to the client one-way. Virtual scrolling renders only the data in the area currently visible to the user, instead of rendering the entire dataset at once, thus significantly reducing the number of DOM elements and computational overhead, and improving page performance and user experience.

[0006] Furthermore, a method for high-concurrency, massive-data rendering in electric vehicle SSE, wherein step S1 includes the following sub-steps: S11: Based on the massive nature of vehicle data, vehicle ID, latitude and longitude, vehicle speed, and geographical location data are generated through the simulator; S12: Request server resources to simulate high-concurrency scenarios and stress test the carrying capacity of SSE and WebSocket channels.

[0007] Furthermore, in a method for rendering massive amounts of SSE data in electric vehicles with high concurrency, step S2 includes the following sub-steps: S21: Configure the SSE data push interface on the server side to encapsulate vehicle operating parameters into JSON format data and push them to the client at preset time intervals; S22: The client creates an EventSource object to connect to the SSE interface and writes data to the raw buffer in the message callback; S23: The server establishes a WebSocket service to push real-time vehicle status change data to the client; S24: Dynamically adjust the amount of data pushed by SSE in a single operation based on feedback from the front-end rendering speed.

[0008] Furthermore, a method for high-concurrency, massive-data rendering in electric vehicle SSE, wherein step S3 includes the following sub-steps: S31: Design a data segmentation table structure based on at least one dimension of vehicle unique identifier, time series, and spatial location; S32: The server segments the data according to the segmentation rules and transmits it to the front end in batches through the SSE channel.

[0009] Furthermore, a method for high-concurrency, massive-data rendering in electric vehicle SSE, wherein step S4 includes the following sub-steps: S41: Create a memory buffer of a circular queue structure to store the original data; S42: Initialize the scroll container, set the viewport placeholder layer to simulate the full data height and the absolute positioning of the rendering layer; S43: Listen for scroll events and calculate the visible area index and buffer line range for debouncing; S44: Dynamically update the rendering layer and reuse DOM nodes to update data; S45: Adjust the height of single-row data based on user experience; S46: Dynamically set the number of scroll buffer rows based on the amount of WebSocket data.

[0010] Specifically, the current visible area is dynamically calculated based on changes in browser height, ensuring that the virtual scroll container viewport height adapts automatically and the number of data rows in the visible area is dynamically adjusted to maximize rendering performance.

[0011] Furthermore, a method for rendering massive amounts of SSE data in electric vehicles, wherein step S43 includes the following sub-steps: S431: Calculate the starting index, starting index = scroll distance / single row height; S432: Calculate the end index based on the start index. End index = start index + (container height / single row height); S433: The N rows above and below the extended buffer form a subset of data; Where N≥5.

[0012] Furthermore, a method for rendering massive amounts of SSE data in electric vehicles, wherein step S44 includes the following sub-steps: S441: Set top = starting index × single line height for rendering; S442: Locate DOM nodes by node position = data index × single row height.

[0013] Furthermore, a method for high-concurrency, massive-data rendering in electric vehicle SSE, wherein step S5 includes the following sub-steps: S51: Monitors data transfer speed, rendering frame rate, and memory usage metrics; S52: Enable the new scheme in the production environment when the concurrent processing latency is below the threshold and there is no rendering stutter.

[0014] The beneficial effects of this invention are as follows: 1. Improve transmission efficiency: By replacing HTTP polling with SSE technology, a one-way data push channel is established, eliminating invalid requests and fundamentally solving the problems of high transmission latency and out-of-order data in high-concurrency scenarios, ensuring that real-time data arrives stably and orderly; 2. Optimize rendering performance: Employ virtual scrolling technology to dynamically render visible area data, avoiding full DOM operations, reducing browser computational complexity, eliminating interface lag, and ensuring smooth user interaction; 3. Controllable resource consumption on both ends: The server adopts the SSE lightweight connection mechanism to reduce memory overhead during high concurrency and avoid WebSocket resource consumption; The client adopts a circular buffer + DOM node reuse strategy to compress memory consumption to a safe threshold and prevent browser crashes. Attached Figure Description

[0015] Figure 1 This is a flowchart of a high-concurrency, massive-data rendering method for SSE (Surface Mount Technology) in electric vehicles.

[0016] Figure 2 This is a schematic diagram illustrating an optimization strategy for a high-concurrency, massive-data rendering method for SSE (Surface Mount Technology) in electric vehicles. Detailed Implementation

[0017] The present invention will be further described below, but the scope of protection of the present invention is not limited to the following description.

[0018] Specific Implementation Example 1: Basic Implementation of a High-Concurrency Massive Data Rendering Method for Electric Vehicle SSE S1: Data Simulation and Stress Testing Install the vehicle data simulator to generate a test dataset containing vehicle ID, latitude and longitude, vehicle speed, and geographical location; Apply for server cluster resources to simulate a scenario with 20,000 concurrent connections and verify the carrying capacity of the SSE channel.

[0019] S2: Dual-channel real-time transmission: Server-side: Configure the SSE interface to encapsulate vehicle operating parameters as a JSON data stream and push it at 200ms intervals; Establish a WebSocket service to push vehicle status changes (such as online / offline switching); Client: Listen for SSE data using EventSource and write it to a circular buffer; The amount of SSE pushed per cycle is dynamically adjusted based on the rendering frame rate feedback.

[0020] S3: Segmented transmission optimization: Design segmented table structures based on spatial location, such as geographic grids; The server segments the data into blocks and transmits them in batches via SSE.

[0021] S4: Virtual scrolling rendering: Initialize the scroll container: Viewport placeholder height = total number of rows × 50px (single row height); Absolute positioning of the rendering layer; Dynamic rendering process: Listen for scroll events, debouncing for 300ms, calculate: Starting index = scroll distance / 50px End index = Start index + (Container height / 50px) Extract a subset of data within the range [starting index - 5, ending index + 5]. Set the rendering layer top = starting index × 50px; Reuse DOM nodes to update data, positioning them by node position = data index × 50px.

[0022] S5: Production Environment Migration Monitoring metrics: Data transmission latency ≤380ms, frame rate ≥30fps, client memory <1GB; Once the target is met, replace the existing HTTP polling scheme.

[0023] Specific Implementation Example 2: Optimization Strategy for High-Concurrency Massive Data Rendering Method in Electric Vehicle SSE As attached Figure 1 As shown, S2 extension: transmission efficiency optimization Dynamic block partitioning mechanism: The baseline block size is 8KB, which is dynamically adjusted based on network latency. For every 100ms increase in latency, the block size is reduced by 25%. Data classification and sorting: Transmissions are sorted by urgency of vehicle status: Alarm > Online > Offline.

[0024] S4 Extension: Rendering Efficiency Optimization Double-buffered queue: The back-end buffer receives SSE streams and swaps them to the front-end buffer pool without locking every 50 data entries or when a 200ms time window is reached. Container adaptive: Monitor changes in the browser window size and dynamically recalculate the container height and the number of data entries in the visible area.

[0025] S5 Extension: Extreme Scenario Verification High packet loss test: Simulate a tunnel environment with a packet loss rate >15% and verify that the end-to-end delay of alarm events is ≤380ms; Validation with tens of thousands of concurrent connections: With 20,000 concurrent users, the server cluster memory consumption is ≤64GB; The client maintains a frame rate of 30fps and completes the rendering of 50,000 data points within 5 seconds.

[0026] The foregoing has shown and described the basic principles, main features, and advantages of the present invention. Those skilled in the art should understand that the present invention is not limited to the above embodiments. The embodiments and descriptions in the specification are merely illustrative of the principles of the invention. Various changes and modifications can be made to the invention without departing from its spirit and scope, and all such changes and modifications fall within the scope of the present invention as claimed. The scope of protection of this invention is defined by the appended claims and their equivalents.

Claims

1. A method for rendering high-concurrency mass data of an electric car SSE, characterized in that, The method comprises the following steps of: S1: building a data simulation environment, installing a simulator to generate massive vehicle data, and applying for high-concurrency resources; S2: establishing a real-time data channel, configuring an SSE interface on the server to push vehicle data, and listening to data through EventSource on the client and writing it into a buffer, while establishing a WebSocket service to push real-time vehicle status; S3: designing a segmented table structure to transmit data in segments according to key field types; S4: rendering data using a virtual scrolling technique on the front end, initializing a scrolling container, calculating data slices in the visible area, and dynamically updating DOM nodes; S5: monitoring concurrency indicators and verifying performance stability before replacing the original data transmission and rendering scheme in the production environment.

2. The electric vehicle SSE high-concurrency mass data rendering method according to claim 1, characterized in that, The S1 comprises the following steps: S11: generating vehicle ID, latitude and longitude, speed, and geographic location data through a simulator based on the massive nature of vehicle data; S12: applying for server resources to simulate a high-concurrency scenario and testing the carrying capacity of the SSE and WebSocket channels.

3. The electric vehicle SSE high-concurrency mass data rendering method according to claim 1, characterized in that, The step S2 comprises the following steps: S21: configuring an SSE data push interface on the server to push vehicle operating parameters in JSON format to the client at preset time intervals; S22: creating an EventSource object on the client to connect the SSE interface and writing data into a raw buffer in the message callback; S23: establishing a WebSocket service on the server to push real-time vehicle status change data to the client; S24: dynamically adjusting the amount of data pushed by the SSE at a time based on front-end rendering speed feedback.

4. The electric vehicle SSE high-concurrency mass data rendering method according to claim 1, characterized in that, The S3 comprises the following steps: S31: designing a data segmentation table structure according to at least one of the following dimensions: vehicle unique identifier, time sequence, and spatial location; S32: cutting data according to segmentation rules on the server and transmitting it to the front end in batches through the SSE channel.

5. The electric vehicle SSE high-concurrency mass data rendering method according to claim 1, characterized in that, The S4 comprises the following steps: S41: creating a memory buffer with a ring queue structure to store raw data; S42: initializing a scrolling container, setting a viewport placeholder layer to simulate the complete data height, and setting absolute positioning for the rendering layer; S43: listening to scrolling events, calculating the visible area index and buffer row range after debouncing; S44: dynamically updating the rendering layer and reusing DOM nodes to update data; S45: adjusting the height of a single row of data based on user experience; S46: dynamically setting the number of scrolling buffer rows based on the amount of WebSocket data.

6. The electric vehicle SSE high-concurrency mass data rendering method according to claim 5, characterized in that, The S43 comprises the following steps: S431: calculating the starting index, starting index = scrolling distance / single row height; S432: calculating the ending index based on the starting index, ending index = starting index + (container height / single row height); S433: expanding the buffer by N rows above and below to form a data subset; wherein N >= 5.

7. The electric vehicle SSE high-concurrency mass data rendering method according to claim 5, characterized in that, The S44 comprises the following steps: S441: setting top = starting index * single row height and rendering; S442: positioning DOM nodes according to node position = data index * single row height.

8. The electric vehicle SSE high-concurrency mass data rendering method according to claim 1, characterized in that, The S5 comprises the following steps: S51: monitoring data transmission speed, rendering frame rate, and memory usage indicators; S52: When the concurrent processing latency is below the threshold and the rendering is free of jank, enable the new scheme in production.

Images