SSE-based data visualization method and system

Abstract

The invention provides an SSE-based data visualization method and system. The SSE-based data visualization method comprises the following steps: S1, creating SSE server endpoint-monitoring data; s2, monitoring data sent by the server by using a client, namely monitoring a server endpoint; s3, data processing: rendering the data by using a client icon library; according to the method, the endpoint is created on the SSE server, then the client monitors the data sent by the server and carries out visualization processing on the data, so that the capability of utilizing the SSE technology is utilized to realize real-time acquisition of the data, and the data is displayed in a visualization form, so that a user can receive a continuously updated data stream; through the SSE, direct data push from the server to the client is realized, so that the server can actively send real-time data update to the client, a client request is not needed, the time delay of data transmission is greatly reduced, and a data stream is smoother and higher in efficiency.

Description

Technical Field

[0001] The invention relates to a data visualization method, in particular to a data visualization method based on SSE, and belongs to the technical field of data processing. Background Art

[0002] Server-Sent Events (SSE) is a technology that implements one-way real-time communication from server to client. It allows the server to push information to the client without the client constantly asking the server whether there is new information. This approach reduces the amount of communication between the client and the server, improves performance, and can achieve a smoother user experience.

[0003] Data visualization technology is a method of presenting complex data structures or attributes through visual elements such as points, lines, images, colors, etc., so that users can understand data more intuitively and quickly and discover patterns, trends and associations in the data. It is widely used in business, scientific research, news media, education and travel.

[0004] With the rapid development of information technology, real-time data analysis and processing have become increasingly important in all walks of life. Especially in the field of travel, the demand for real-time data is extremely urgent. The traditional client-server communication mode often relies on the client's request to obtain the latest data, and then the data is visualized by the server. It adopts a polling mechanism, which is prone to data delay and low transmission efficiency. Therefore, a data visualization method and system based on SSE is proposed. Summary of the invention

[0005] In view of this, the present invention provides a data visualization method and system based on SSE to solve or alleviate the technical problems existing in the prior art, and at least provide a beneficial choice.

[0006] The technical solution of the embodiment of the present invention is implemented as follows: a data visualization method based on SSE comprises the following steps:

[0007] S1. Create SSE server endpoint - listen for data;

[0008] S2, using the client to monitor the data sent by the server - monitoring the server endpoint;

[0009] S3, data processing - using the client icon library to render the data;

[0010] S4, set the connection mode - if you need to receive data, execute S5, if you do not need to receive data, execute S6;

[0011] S5, data push;

[0012] S6. Close the connection.

[0013] Further preferably, in S1, a port is created on the server, data is monitored through the port, and the HTTP response header is set to ensure that Content-Type is set to text / event-stream.

[0014] Further preferably, the format of the data received by the port is plain text or JSON, and each message ends with a blank line.

[0015] Further preferably, in S2, the JavaScript EventSource interface is used on the client to monitor the server endpoint, by creating an EventSource object and specifying the URL of the server endpoint to be connected, and adding an event listener to process the data sent by the server;

[0016] Among them, the event listener listens to the onmessage event and receives the message sent by the server.

[0017] Further preferably, in S3, when the server sends a message, the EventSource object triggers an onmessage event, and then uses the event processing function to process the data;

[0018] The event processing function is an SSE data event processing function message or a custom event processing function;

[0019] Among them, the client chart library is Chart.js or D3.js.

[0020] Further preferably, in S4, the data push mode is controlled by setting the connection state of the event listener.

[0021] Further preferably, in S5, EventSource is in a connected state, and when the EventSource object triggers an onmessage event, data is pushed.

[0022] Further preferably, in S6, EventSource is in a connection closed state, and data is not pushed, which is achieved by calling the close() method of the EventSource object.

[0023] A data visualization system based on SSE, the system comprising a processor and a register coupled to the processor, wherein the register stores program instructions, and when the program instructions are executed by the processor, the processor executes the data visualization method based on SSE.

[0024] The embodiment of the present invention has the following advantages due to the adoption of the above technical solution:

[0025] 1. The present invention creates an endpoint on the SSE server, and then the client listens to the data sent by the server and visualizes the data, so as to utilize the capabilities of SSE technology to achieve real-time data acquisition and display it in a visual form, so that users can receive continuously updated data streams.

[0026] Second, the present invention implements direct data push from the server to the client through SSE, so that the server can actively send real-time data updates to the client without the need for client requests, greatly reducing the time delay of data transmission, and making the data flow smoother and more efficient.

[0027] The above summary is for illustrative purposes only and is not intended to be limiting in any way. In addition to the illustrative aspects, embodiments and features described above, further aspects, embodiments and features of the present invention will be readily apparent by reference to the accompanying drawings and the following detailed description. BRIEF DESCRIPTION OF THE DRAWINGS

[0028] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0029] Figure 1 is a flow chart of the steps of the present invention;

[0030] Figure 2 This is the overall architecture diagram of the present invention. DETAILED DESCRIPTION

[0031] In the following, only some exemplary embodiments are briefly described. As those skilled in the art will appreciate, the described embodiments may be modified in various ways without departing from the spirit or scope of the present invention. Therefore, the drawings and descriptions are considered to be exemplary and non-restrictive in nature.

[0032] It should be noted that the terms "first", "second", "symmetrical", "array", etc. are only used to distinguish between description and position description purposes, and cannot be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features. Therefore, the definition of "first", "symmetrical", etc. can explicitly or implicitly include one or more of these features; similarly, when the number of certain features is not limited in the form of words such as "two" or "three", it should be noted that this feature also explicitly or implicitly includes one or more feature quantities.

[0033] The embodiments of the present invention are described in detail below with reference to the accompanying drawings.

[0034] Embodiment 1

[0035] like Figure 1-2 As shown, an embodiment of the present invention provides a data visualization method based on SSE, comprising the following steps:

[0036] S1. Create SSE server endpoint - listen for data;

[0037] S2, using the client to monitor the data sent by the server - monitoring the server endpoint;

[0038] S3, data processing - using the client icon library to render the data;

[0039] S4, set the connection mode - if you need to receive data, execute S5, if you do not need to receive data, execute S6;

[0040] S5, data push;

[0041] S6. Close the connection.

[0042] In one embodiment, in S1, on the server, a port is created, data is listened to through the port, and the HTTP response header is set to ensure that Content-Type is set to text / event-stream, the format of the data received by the port is JSON, and each message ends with a blank line;

[0043] Server sample code:

[0044]

[0045]

[0046] The built-in HTTP module of Node.js is introduced, and a callback function is specified to handle incoming requests. The server listens on port 8000, and the callback function is called each time a request arrives. It sets a response header indicating that the content type is "text / event-stream", which is a MIME type used for SSE. The "Cache-Control" and "Connection" headers are set to indicate not to cache data and keep the connection active, respectively. Next, the setInterval function is used to send data once a second. The data sent is a JSON string containing a random number. The res.write method is used to send data to the client. The data starts with "data:", followed by the data content, and ends with a newline character (\n\n).

[0047] In one embodiment, in S2, the JavaScript EventSource interface is used on the client to monitor the server endpoint, by creating an EventSource object and specifying the URL of the server endpoint to be connected, and adding an event listener to process the data sent by the server;

[0048] Among them, the event listener listens to the onmessage event and receives the message sent by the server;

[0049] Client sample code:

[0050] The client will use Chart.js to draw data. First, import the Chart.js library in the HTML file:

[0051]

[0052] It mainly uses HTML5 documents to display a real-time updated chart implemented using the Chart.js library.

[0053] In one embodiment, in S3, when the server sends a message, the EventSource object triggers the onmessage event, and then uses the event processing function to process the data;

[0054] The event processing function is an SSE data event processing function message or a custom event processing function;

[0055] Among them, the client chart library is Chart.js;

[0056] Specific sample code:

[0057]

[0058]

[0059] First, a Chart.js instance is created to draw a line chart on the canvas. The labels array is used to store the labels of the X-axis, and the datasets array contains a dataset for drawing the lines of the chart. Then an EventSource connection is created to establish a long-term connection with the specified URL (http: / / localhost:8000), and then an event listener is added. The event handler function is called when a message sent by the server is received. The received JSON data is parsed, the data point values ​​are obtained, and these values ​​are added to the dataset of the chart. At the same time, in order to control the number of data points and prevent the chart from being too crowded, a check is also included in the code. If the length of the label array exceeds 20, it will remove the first element from the beginning of the array, and do the same for the data array of each dataset. Finally, the chart.update() method is called to update the chart to reflect the latest data.

[0060] In one embodiment, in S4, the data push mode is controlled by setting the connection state of the event listener;

[0061] By selecting the connection status of the event listener according to actual needs, the data push method is controlled.

[0062] In one embodiment, in S5, EventSource is in a connected state, and when the EventSource object triggers an onmessage event, data is pushed;

[0063] When the EventSource is connected, the server sends a random number every second, and the client uses Chart.js to create a line chart to display this data in real time. Whenever new data is received, the chart is updated. The number of data points in the chart is limited to the latest 20 data points to maintain the readability and performance of the chart.

[0064] In one embodiment, in S6, EventSource is in a connection-closed state, and data is not pushed, which is achieved by calling the close() method of the EventSource object;

[0065] Since EventSource connections are persistent, they should be closed when not needed to avoid unnecessary resource usage and potential security issues.

[0066] Among them, call the sample code:

[0067] / / Suppose at some point we need to close the connection

[0068] eventSource.close();

[0069] After calling the close() method, the EventSource object will close the connection and no longer receive messages from the server.

[0070] Embodiment 2

[0071] like Figure 1-2 As shown, the embodiment of the present invention also provides a data visualization method based on SSE, comprising the following steps:

[0072] S1. Create SSE server endpoint - listen for data;

[0073] S2, using the client to monitor the data sent by the server - monitoring the server endpoint;

[0074] S3, data processing - using the client icon library to render the data;

[0075] S4, set the connection mode - if you need to receive data, execute S5, if you do not need to receive data, execute S6;

[0076] S5, data push;

[0077] S6. Close the connection.

[0078] In one embodiment, in S1, a port is created on the server, data is listened to through the port, the HTTP response header is set, and Content-Type is ensured to be set to text / event-stream. The format of the data received by the port is plain text, and each message ends with a blank line.

[0079] In one embodiment, in S2, the JavaScript EventSource interface is used on the client to monitor the server endpoint, by creating an EventSource object and specifying the URL of the server endpoint to be connected, and adding an event listener to process the data sent by the server;

[0080] Among them, the event listener listens to the onmessage event and receives the message sent by the server.

[0081] In one embodiment, in S3, when the server sends a message, the EventSource object triggers the onmessage event, and then uses the event processing function to process the data;

[0082] The event processing function is an SSE data event processing function message or a custom event processing function;

[0083] Among them, the client chart library is D3.js;

[0084] Specific sample code:

[0085]

[0086]

[0087]

[0088]

[0089] First, we create an SVG element as a container for the chart and use D3.js to draw the line graph. We define an X-axis and a Y-axis and create a line generator. Whenever new data is received from the EventSource, we update the chart's data and axis domains and then redraw the line.

[0090] In one embodiment, in S4, the data push mode is controlled by setting the connection state of the event listener;

[0091] By selecting the connection status of the event listener according to actual needs, the data push method is controlled.

[0092] In one embodiment, in S5, EventSource is in a connected state, and when the EventSource object triggers an onmessage event, data is pushed;

[0093] When the EventSource is connected, the server sends a random number every second, and the client uses Chart.js to create a line chart to display this data in real time. Whenever new data is received, the chart is updated. The number of data points in the chart is limited to the latest 20 data points to maintain the readability and performance of the chart.

[0094] In one embodiment, in S6, EventSource is in a connection-closed state, and data is not pushed, which is achieved by calling the close() method of the EventSource object;

[0095] Since EventSource connections are persistent, they should be closed when not needed to avoid unnecessary resource usage and potential security issues.

[0096] Among them, call the sample code:

[0097] / / Suppose at some point we need to close the connection

[0098] eventSource.close();

[0099] After calling the close() method, the EventSource object will close the connection and no longer receive messages from the server.

[0100] Embodiment 3

[0101] An embodiment of the present invention further provides a data visualization system based on SSE, the system comprising a processor and a register coupled to the processor, wherein program instructions are stored in the register, and when the program instructions are executed by the processor, the processor executes the method of embodiment one or embodiment two.

[0102] The above are only specific embodiments of the present invention, but the protection scope of the present invention is not limited thereto. Any person skilled in the art can easily think of various changes or substitutions within the technical scope disclosed by the present invention, which should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention should be based on the protection scope of the claims.

Claims

1. A data visualization method based on SSE, characterized in that: The following steps are involved: S1. Create SSE server endpoint - listen for data; S2, using the client to monitor the data sent by the server - monitoring the server endpoint; S3, data processing - using the client icon library to render the data; S4, set the connection mode - if you need to receive data, execute S5, if you do not need to receive data, execute S6; S5, data push; S6. Close the connection.

2. The SSE-based data visualization method according to claim 1, characterized in that: In S1, a port is created on the server, data is listened to through the port, and the HTTP response header is set to ensure that Content-Type is set to text / event-stream.

3. The SSE-based data visualization method according to claim 2, characterized in that: The port receives data in plain text or JSON format, and each message ends with a blank line.

4. The SSE-based data visualization method according to claim 1, characterized in that: In S2, the JavaScript EventSource interface is used on the client to monitor the server endpoint, by creating an EventSource object and specifying the URL of the server endpoint to be connected, and adding an event listener to process the data sent by the server; Among them, the event listener listens to the onmessage event and receives the message sent by the server.

5. The SSE-based data visualization method according to claim 4, characterized in that: In S3, when the server sends a message, the EventSource object triggers the onmessage event, and then uses the event processing function to process the data; The event processing function is an SSE data event processing function message or a custom event processing function; Among them, the client chart library is Chart.js or D3.js.

6. The SSE-based data visualization method according to claim 4, characterized in that: In S4, the data push mode is controlled by setting the connection state of the event listener.

7. The SSE-based data visualization method according to claim 4, characterized in that: In S5, EventSource is in a connected state, and when the EventSource object triggers an onmessage event, data is pushed.

8. The SSE-based data visualization method according to claim 4, characterized in that: In S6, EventSource is in a connection-closed state, and data is not pushed, which is achieved by calling the close() method of the EventSource object.

9. A data visualization system based on SSE, characterized by: The system includes a processor and a register coupled to the processor, wherein the register stores program instructions, and when the program instructions are executed by the processor, the processor executes the SSE-based data visualization method as described in any one of claims 1-8.

Images