Method for realizing interaction control among Web side, server side and control side

Abstract

The invention relates to the technical field of Web application development, in particular to a method for realizing interaction control among a Web side, a server side and a control side. According to the method for realizing interaction control among the Web side, the server side and the control side, the server side is realized based on Node.js, and a WebSocket module and an SSE module are integrated on the server side; bidirectional real-time communication connection between the server side and the Web side and between the server side and the control side is established through the WebSocket module, and one-way real-time data pushing from the server side to the Web side is achieved through the SSE module; and the control end establishes connection with the server side through the WebSocket module and sends an instruction to the server side. According to the method for realizing interaction control among the Web side, the server side and the control side, the message transmission efficiency among multiple sides is improved, the delay is reduced, meanwhile, the three industrial problems of protocol splitting, high delay of the mobile side and multi-terminal cooperation of a real-time interaction system are solved, and the development and maintenance cost of the system is reduced.

Description

Technical Field

[0001] This invention relates to the field of Web application development technology, and in particular to a method for achieving interactive control between a Web client, a server, and a control client. Background Technology

[0002] In modern web application development, achieving efficient interaction between the web client, server, and control interface is crucial for building complex business logic and providing a superior user experience. As business needs continue to expand, the requirements for real-time performance, stability, and scalability across multiple platforms are also increasing.

[0003] Traditional multi-terminal interaction methods rely on polling mechanisms, which are not only inefficient but also consume a lot of system resources. In addition, the management system page and control terminal need to be independently connected to the large screen, lacking a unified central control layer; and the control commands of the Pad cannot be mapped to the large screen in real time through the server. When dealing with real-time data updates and multi-terminal collaborative work, these interaction methods often suffer from slow response speed, high development costs, and maintenance difficulties, making it difficult to meet the needs of increasingly complex application scenarios.

[0004] To address the technical challenges in existing technologies, such as difficulties in real-time cross-terminal collaboration due to fragmented communication protocols, control delays caused by low efficiency in mobile command transmission, and high system development and maintenance costs due to the lack of multi-scenario protocol adaptation, this invention proposes a method for interactive control between a web client, a server, and a control client. Summary of the Invention

[0005] To overcome the shortcomings of existing technologies, this invention provides a simple and efficient method for interactive control between a web client, a server, and a control terminal.

[0006] This invention is achieved through the following technical solution:

[0007] A method for enabling interactive control between a web client, a server, and a control terminal includes the following steps:

[0008] Step S1: Server-side implementation

[0009] The server is implemented based on Node.js, and the WebSocket and SSE modules are integrated on the server.

[0010] The WebSocket module is used to establish bidirectional real-time communication connections between the server and the web client, as well as between the server and the control terminal. It supports full-duplex communication, receives messages from the web client and the control terminal in real time, and sends messages to them.

[0011] The SSE module is used to enable one-way real-time data push from the server to the web client;

[0012] When the server has data updates that need to be pushed to the large-screen visualization page, the event stream data is sent to the web client through the SSE module;

[0013] In step S1, the server uses a dynamic routing engine, implements control commands through the WebSocket module, and pushes data streams through the SSE module.

[0014] The server maintains a terminal connection mapping table in real time, recording the connection status of each terminal to facilitate quick location and distribution of messages.

[0015] The server employs a dynamic decision-making mechanism, dynamically selecting the transmission channel based on the message type and whether the target terminal's WebSocket module is online, ensuring efficient message delivery.

[0016] Step S2, Web-based implementation

[0017] The web interface is divided into two parts: the management system page and the large-screen visualization page.

[0018] The management system page is a web-based user interface. When a user modifies information on the management system page, the management system page sends a request to the server to modify the information through the WebSocket module.

[0019] The large-screen visualization page is used to display relevant data and information in real time, and supports two communication methods: WebSocket module and SSE module;

[0020] In step S2, the large-screen visualization page establishes a connection with the server through the WebSocket module in order to receive instructions from the server from the control terminal and other information that requires two-way interaction.

[0021] The large-screen visualization page establishes a connection with the server through the SSE module to receive data updates actively pushed by the server. When a notification is received from the server, corresponding changes are made according to the notification content, including data refresh and page element updates.

[0022] Step S3, Control Terminal Implementation

[0023] The control terminal is a page implemented based on a tablet, which establishes a connection with the server through the WebSocket module. When the user issues a command, the control terminal sends the command to the server through the WebSocket module. After receiving the command, the server processes it accordingly and then sends commands to the large screen visualization page through the WebSocket module or the SSE module to notify the large screen visualization page to respond and change.

[0024] In step S3, the control terminal uses an instruction compression encoding method to improve information transmission efficiency; the instruction compression encoding method is as follows:

[0025] Step S3.1, Touch Event Capture

[0026] Capture raw events from the Pad touchscreen at a sampling frequency of 60Hz, and extract key parameters, including the number of touch points, touch point coordinates, and event duration.

[0027] Step S3.2, Gesture Recognition and Coordinate Normalization

[0028] Normalize the screen coordinates according to the maximum value max, so that they are mapped to the range [0, 65535], which is suitable for Uint16 type;

[0029] Handling special parameters, including scaling and sliding angle:

[0030] The scaling factor is calculated as a Uint8 value, which is in the range of 0 to 255;

[0031] Convert the radian value obtained by the arctangent function into degrees, with a value of [0°-360°), and map it to Uint9, which is a value in the range of 0 to 511;

[0032] Step S3.3, Binary Encoding

[0033] The instruction header, parameter block, and checksum are encoded in binary format to reduce the amount of data transmitted.

[0034] Step S3.4, Transmission Packet Generation and Optimization

[0035] The use of fixed start characters, CRC checksums, and differential coding techniques ensures the reliability and efficiency of data transmission.

[0036] Step S3.5, Transmission Optimization

[0037] By employing batch processing mechanisms, differential coding, and anti-jitter algorithms, the amount and frequency of transmitted data are further reduced.

[0038] A system for interactive control between a web client, a server, and a control terminal, comprising:

[0039] The server-side is implemented based on Node.js and integrates WebSocket and SSE modules;

[0040] The WebSocket module is used to establish bidirectional real-time communication connections between the server and the web client, as well as between the server and the control terminal. It supports full-duplex communication, receives messages from the web client and the control terminal in real time, and sends messages to them.

[0041] The SSE module is used to enable one-way real-time data push from the server to the web client;

[0042] Web-based, including management system pages and large-screen visualization pages;

[0043] The management system page is a web-based user interface. It is responsible for sending user requests to modify information to the server via the WebSocket module.

[0044] The large-screen visualization page is used to display relevant data and information in real time. It supports two communication methods: WebSocket and SSE. It is responsible for establishing a connection with the server through the WebSocket module, receiving instructions and other information that requires two-way interaction from the server control terminal, and establishing a connection with the server through the SSE module, receiving data updates actively pushed by the server, and making corresponding changes according to the notification content after receiving the notification from the server, including data refresh and page element update.

[0045] The control panel is a page implemented based on a tablet. It establishes a connection with the server through the WebSocket module and is responsible for sending user commands to the server via the WebSocket module.

[0046] A device for enabling interactive control between a web client, a server, and a control client includes a memory and a processor; the memory is used to store a computer program, and the processor is used to execute the computer program to implement the above-described method steps.

[0047] A readable storage medium storing a computer program that, when executed by a processor, implements the above-described method steps.

[0048] The beneficial effects of this invention are: the method for realizing interactive control between the Web terminal, the server terminal and the control terminal improves the efficiency of message transmission between multiple terminals, reduces latency, and solves three major industry problems of real-time interactive systems: protocol fragmentation, high latency of mobile terminals and multi-terminal collaboration, thereby reducing system development and maintenance costs. Attached Figure Description

[0049] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0050] Appendix Figure 1This is a schematic diagram of the system architecture for interactive control between the Web client, server, and control terminal of this invention.

[0051] Appendix Figure 2 This is a schematic diagram illustrating the implementation process of the dynamic decision-making mechanism of the present invention.

[0052] Appendix Figure 3 This is a schematic diagram of the instruction compression encoding method of the present invention. Detailed Implementation

[0053] To enable those skilled in the art to better understand the technical solutions of this invention, the technical solutions in the embodiments of this invention will be clearly and completely described below in conjunction with the embodiments of this invention. Obviously, the described embodiments are merely some embodiments of this invention, and not all embodiments. Based on the embodiments of this invention, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of this invention.

[0054] Node.js, a JavaScript runtime environment based on the Chrome V8 engine, is well-suited for building high-performance network applications due to its event-driven and non-blocking I / O features. WebSocket and Server-Sent Events (SSE), two commonly used real-time communication technologies, can establish persistent connections between the web client and server, or enable one-way real-time data push from the server to the client, respectively. By integrating the protocol layering model of WebSocket (for command transmission) and SSE (for data stream push), combined with a server-side dynamic routing engine and a control-side command compression algorithm, the efficiency of message transmission between multiple terminals can be significantly improved, latency reduced, and thus better meet the high real-time and performance requirements of modern web applications.

[0055] The method for enabling interactive control between the web client, server, and control terminal includes the following steps:

[0056] Step S1: Server-side implementation

[0057] The server is implemented based on Node.js, and the WebSocket and SSE modules are integrated on the server.

[0058] The WebSocket module is used to establish bidirectional real-time communication connections between the server and the web client (including the management system page and the large screen visualization page) and between the server and the control terminal. It supports full-duplex communication, receives messages from the web client and the control terminal in real time, and sends messages to them.

[0059] The SSE module is used to enable one-way real-time data push from the server to the web client (mainly large-screen visualization pages);

[0060] When the server has data updates that need to be pushed to the large-screen visualization page, the event stream data is sent to the web client through the SSE module;

[0061] In step S1, the server uses a dynamic routing engine, implements control commands (low-latency bidirectional communication) through the WebSocket module, and implements data stream push (efficient one-way broadcast) through the SSE module.

[0062] The server maintains a terminal connection mapping table in real time, recording the connection status of each terminal to facilitate quick location and distribution of messages.

[0063] The server employs a dynamic decision-making mechanism, dynamically selecting the transmission channel based on the message type (preferably the WebSocket module for control commands and the SSE module for data updates) and whether the target terminal's WebSocket module is online, ensuring efficient message delivery.

[0064]

[0065]

[0066]

[0067] Step S2, Web-based implementation

[0068] The web interface is divided into two parts: the management system page and the large-screen visualization page.

[0069] The management system page is a web-based user interface where users can modify and configure information. When a user modifies information on the management system page, the page sends a modification request to the server via a WebSocket module.

[0070] The large-screen visualization page is used to display relevant data and information in real time, and supports two communication methods: WebSocket module and SSE module;

[0071] In step S2, the large-screen visualization page establishes a connection with the server through the WebSocket module in order to receive instructions from the server from the control terminal and other information that requires two-way interaction.

[0072] The large-screen visualization page establishes a connection with the server through the SSE module to receive data updates actively pushed by the server. When a notification is received from the server, corresponding changes are made according to the notification content, including data refresh and page element updates.

[0073] Step S3, Control Terminal Implementation

[0074] The control panel is a page implemented on a tablet. Users can issue various commands on the tablet, such as controlling the display of different content on the large screen visualization page and switching display modes. The control panel establishes a connection with the server via a WebSocket module. When a user issues a command, the control panel sends the command to the server via the WebSocket module. After receiving the command, the server processes it accordingly and then sends commands to the large screen visualization page via the WebSocket module or the SSE module, notifying the large screen visualization page to respond and change.

[0075] In step S3, the control terminal uses an instruction compression encoding method to improve information transmission efficiency. Through this method, the amount of instruction data is significantly reduced, the transmission speed is improved, the real-time performance and smoothness of the large-screen visualization page response are ensured, and the user experience is enhanced.

[0076] The instruction compression encoding method is as follows:

[0077] Step S3.1, Touch Event Capture

[0078] Capture raw events from the Pad touchscreen at a sampling frequency of 60Hz (sampled once every 16ms), and extract key parameters, including the number of touch points (1 / 2 / 3 fingers), touch point coordinates (x1, y1; x2, y2; ...), and event duration (Δt).

[0079] Step S3.2, Gesture Recognition and Coordinate Normalization

[0080] Normalize the screen coordinates according to the maximum value max, so that they are mapped to the range [0, 65535], which is suitable for Uint16 type;

[0081] Handling special parameters, including scaling and sliding angle:

[0082] The scaling factor is calculated as a Uint8 value, which is in the range of 0 to 255;

[0083] Scaling ratio: scale = (current distance / initial distance) * 100 → Uint8 (0-255)

[0084] Convert the radian value obtained by the arctangent function to degrees, with a value of [0°-360°), and map it to Uint9, which is a value in the range of 0 to 511. Since the standard degree range is [0,360), and the maximum value of Uint9 is 511, 512 / 360≈1.422, which means that each degree corresponds to approximately 1.422 units.

[0085] Step S3.3, Binary Encoding

[0086] The instruction header, parameter block, and checksum are encoded into a compact binary format to reduce the amount of data transmitted.

[0087] Instruction structure:

[0088] [Instruction Header 1B][Parameter Blocks 1-4B][Checksum 0.5B]

[0089] Instruction header format (1 byte = 8 bits): 7 6 5 4 3 2 1 0

[0091] |Command Type|Parameter Length|Emergency Flag|

[0092] Instruction type (2 bits):

[0093] 00=SELECT,01=ZOOM,10=PAN,11=MENU

[0094] Parameter length (2 bits):

[0095] 00=1B, 01=2B, 10=4B, 11=8B

[0096] Emergency flag (1 bit): 0 = Normal, 1 = Real-time rendering priority;

[0097] Step S3.4, Transmission Packet Generation and Optimization

[0098] The use of fixed start characters, CRC checksums, and differential coding techniques ensures the reliability and efficiency of data transmission.

[0099] Package structure optimization:

[0100]

[0101] Start character: Fixed at 0xAA (10101010) for frame synchronization;

[0102] Checksum: The CRC-4 algorithm calculates the first N bytes of checksum value;

[0103] Typical bag size:

[0104] Click command: 3 bytes (0xAA + command header + coordinates 2B + checksum);

[0105] Scaling instructions: 6 bytes (coordinates 4 bytes + scaling factor 1 byte);

[0106] Step S3.5, Transmission Optimization

[0107] By employing batch processing mechanisms, differential coding, and anti-jitter algorithms, the amount and frequency of transmitted data are further reduced.

[0108] Batch processing mechanism: continuous gestures are sent in batches (e.g., every 100ms during scaling);

[0109] Differential coding: Only transmits the change relative to the previous state;

[0110] Anti-jitter algorithm:

[0111] if(currentCmd===lastCmd&&timeDelta<50ms){

[0112] dropPacket(); / / Filter high-frequency jitter commands

[0113] }

[0114] This system enables interactive control between the web client, server, and control terminal, including:

[0115] The server-side is implemented based on Node.js and integrates WebSocket and SSE modules;

[0116] The WebSocket module is used to establish bidirectional real-time communication connections between the server and the web client, as well as between the server and the control terminal. It supports full-duplex communication, receives messages from the web client and the control terminal in real time, and sends messages to them.

[0117] The SSE module is used to enable one-way real-time data push from the server to the web client;

[0118] Web-based, including management system pages and large-screen visualization pages;

[0119] The management system page is a web-based user interface. It is responsible for sending user requests to modify information to the server via the WebSocket module.

[0120] The large-screen visualization page is used to display relevant data and information in real time. It supports two communication methods: WebSocket and SSE. It is responsible for establishing a connection with the server through the WebSocket module, receiving instructions and other information that requires two-way interaction from the server control terminal, and establishing a connection with the server through the SSE module, receiving data updates actively pushed by the server, and making corresponding changes according to the notification content after receiving the notification from the server, including data refresh and page element update.

[0121] The control panel is a page implemented based on a tablet. It establishes a connection with the server through the WebSocket module and is responsible for sending user commands to the server via the WebSocket module.

[0122] The method for achieving interactive control between the web client, server, and control terminal, and its specific implementation process, include the following:

[0123] S01: Modify information on the management system page

[0124] Users can modify information on the management system's interface.

[0125] The management system page sends a message containing the modified information to the server via WebSocket.

[0126] After receiving the message, the server processes the modified information, such as updating the relevant data in the database.

[0127] The server sends a notification to the large screen visualization page via WebSocket or SSE, informing the large screen visualization page that changes are required.

[0128] After receiving the notification, the large-screen visualization page retrieves the latest data based on the notification content and updates the page display.

[0129] S02: The control terminal issues a command.

[0130] Users can issue specific commands on the control page implemented on the Pad, such as clicking a control button.

[0131] The control terminal sends instructions to the server via WebSocket.

[0132] After receiving the instruction, the server parses and processes it to determine the response operation that the large-screen visualization page needs to perform.

[0133] The server sends commands to the large-screen visualization page via WebSocket or SSE, instructing the large-screen visualization page to perform corresponding operations, such as switching the displayed chart type or updating the displayed data source.

[0134] After receiving a command, the large-screen visualization page executes the corresponding operation to achieve page responsiveness and changes.

[0135] The above design and implementation can significantly improve the efficiency of message transmission between multiple terminals and reduce latency, thereby better meeting the high requirements of modern web applications for real-time performance.

[0136] This system enables interactive control between the web client, server, and control terminal, and is used to implement the above methods, including...

[0137] The device that enables interactive control between the web client, server, and control terminal includes a memory and a processor; the memory is used to store computer programs, and the processor is used to execute the computer programs to implement the above-described method steps.

[0138] The readable storage medium stores a computer program that, when executed by a processor, implements the above-described method steps.

[0139] This method for enabling interactive control between the web client, server, and control terminal is based on Node.js and integrates a protocol layering model that combines the WebSocket module (instructions) and the SSE module (data stream), a server-side dynamic routing engine, and a control terminal instruction compression algorithm to improve message transmission efficiency and reduce latency between multiple terminals. It solves three major industry challenges in real-time interactive systems: protocol fragmentation, high latency on mobile devices, and multi-terminal collaboration. Actual performance tests show that it outperforms existing solutions by 3-5 times.

[0140] The embodiments described above are merely one specific implementation of the present invention. Ordinary changes and substitutions made by those skilled in the art within the scope of the technical solution of the present invention should be included within the protection scope of the present invention.

Claims

1. A method for interactive control between a web client, a server, and a control terminal, characterized in that: Includes the following steps: Step S1: Server-side implementation The server is implemented based on Node.js, and the WebSocket and SSE modules are integrated on the server. The WebSocket module is used to establish bidirectional real-time communication connections between the server and the web client, as well as between the server and the control terminal. It supports full-duplex communication, receives messages from the web client and the control terminal in real time, and sends messages to them. The SSE module is used to enable one-way real-time data push from the server to the web client; When the server has data updates that need to be pushed to the large-screen visualization page, the event stream data is sent to the web client through the SSE module; Step S2, Web-based implementation The web interface is divided into two parts: the management system page and the large-screen visualization page. The management system page is a web-based user interface. When a user modifies information on the management system page, the management system page sends a request to the server to modify the information through the WebSocket module. The large-screen visualization page is used to display relevant data and information in real time, and supports two communication methods: WebSocket module and SSE module; Step S3, Control Terminal Implementation The control terminal is a page implemented based on a Pad, which establishes a connection with the server through the WebSocket module. When the user issues a command, the control terminal sends the command to the server through the WebSocket module. After receiving the command, the server processes it accordingly and then sends commands to the large screen visualization page through the WebSocket module or the SSE module to notify the large screen visualization page to respond and change.

2. The method for interactive control between the Web client, server, and control terminal according to claim 1, characterized in that: In step S1, the server uses a dynamic routing engine, implements control commands through the WebSocket module, and pushes data streams through the SSE module. The server maintains a terminal connection mapping table in real time, recording the connection status of each terminal to facilitate quick location and distribution of messages. The server employs a dynamic decision-making mechanism, dynamically selecting the transmission channel based on the message type and whether the target terminal's WebSocket module is online, ensuring efficient message delivery.

3. The method for interactive control between the Web client, server, and control terminal according to claim 2, characterized in that: In step S1, the server maintains a terminal connection mapping table in real time, recording the connection status of each terminal to facilitate quick location and message distribution.

4. The method for interactive control between the Web client, server, and control terminal according to claim 2, characterized in that: In step S2, the large-screen visualization page establishes a connection with the server through the WebSocket module in order to receive instructions from the server from the control terminal and other information that requires two-way interaction. The large-screen visualization page establishes a connection with the server through the SSE module to receive data updates actively pushed by the server. When a notification is received from the server, corresponding changes are made according to the notification content, including data refresh and page element updates.

5. The method for interactive control between the Web client, server, and control terminal according to claim 1, characterized in that: In step S3, the control terminal uses an instruction compression encoding method to improve information transmission efficiency; the instruction compression encoding method is as follows: Step S3.1, Touch Event Capture Capture raw events from the Pad touchscreen at a sampling frequency of 60Hz, and extract key parameters, including the number of touch points, touch point coordinates, and event duration. Step S3.2, Gesture Recognition and Coordinate Normalization Normalize the screen coordinates according to the maximum value max, so that they are mapped to the range [0, 65535], which is suitable for Uint16 type; Handling special parameters, including scaling and sliding angle: The scaling factor is calculated as a Uint8 value, which is in the range of 0 to 255; Convert the radian value obtained by the arctangent function into degrees, with a value of [0°-360°), and map it to Uint9, which is a value in the range of 0 to 511; Step S3.3, Binary Encoding The instruction header, parameter block, and checksum are encoded in binary format to reduce the amount of data transmitted. Step S3.4, Transmission Packet Generation and Optimization The use of fixed start characters, CRC checksums, and differential coding techniques ensures the reliability and efficiency of data transmission. Step S3.5, Transmission Optimization By employing batch processing mechanisms, differential coding, and anti-jitter algorithms, the amount and frequency of transmitted data are further reduced.

6. A system for interactive control between a web client, a server, and a control terminal, characterized in that: include: The server-side is implemented based on Node.js and integrates WebSocket and SSE modules; The WebSocket module is used to establish bidirectional real-time communication connections between the server and the web client, as well as between the server and the control terminal. It supports full-duplex communication, receives messages from the web client and the control terminal in real time, and sends messages to them. The SSE module is used to enable one-way real-time data push from the server to the web client; Web-based, including management system pages and large-screen visualization pages; The management system page is a web-based user interface. It is responsible for sending user requests to modify information to the server via the WebSocket module. The large-screen visualization page is used to display relevant data and information in real time. It supports two communication methods: WebSocket and SSE. It is responsible for establishing a connection with the server through the WebSocket module, receiving instructions and other information that requires two-way interaction from the server control terminal, and establishing a connection with the server through the SSE module, receiving data updates actively pushed by the server, and making corresponding changes according to the notification content after receiving the notification from the server, including data refresh and page element update. The control panel is a page implemented based on a tablet. It establishes a connection with the server through the WebSocket module and is responsible for sending user commands to the server via the WebSocket module.

7. A device for interactive control between a web terminal, a server terminal, and a control terminal, characterized in that: It includes a memory and a processor; the memory is used to store a computer program, and the processor is used to execute the computer program to implement the steps of the method as described in any one of claims 1 to 5.

8. A readable storage medium, characterized in that: The readable storage medium stores a computer program, which, when executed by a processor, implements the steps of the method as described in any one of claims 1 to 5.

Images