Method for realizing interactive web terminal based on React + XtermJS + SoketJS

Abstract

The invention provides a method for realizing an interactive web terminal based on React + XtermJS + SoketJS, which comprises the following steps of: installing an xterm, and importing a socket js-client and an xterm style file; creating a Terminal terminal instance, introducing customizable parameters, compiling a DOM document object model for storing a web terminal, and quoting the DOM document object model; calling an API (Application Program Interface) for acquiring an address connected with a back-end The method comprises the following steps of: initializing an xterm, and loading a FitAddon instance by using a loadAddon method of the xterm; binding a rendering terminal for the DOM through an open command on the xterm instance; and establishing a SockJS client instance, connecting the SockJS client instance to a server side, and establishing SockJs connection to realize data interaction display of front and rear ends. According to the method and the system, the realized Web terminal has wider compatibility, the realization mode is simple, and codes are concise.

Description

Technical Field

[0001] The present invention relates to the technical field of front-end implementation of web terminals, and in particular to a method for implementing an interactive web terminal based on React+XtermJS+SoketJS. Background Art

[0002] Currently, the front-end solution for implementing web terminals is generally implemented through native JavaScript, such as: <textarea>or< / textarea> <input> Simulating terminal input, capturing user input, combining JavaScript to process commands and output the results to the page requires manual processing of input and output interaction logic, which is relatively complex. Alternatively, you can use the third-party library XtemJs framework. XtemJs is a JavaScript library for creating terminal emulators in browsers. With the help of existing JavaScript libraries, Web terminal functions can be quickly implemented. It can simulate command line operations in the browser, has rich functions, high development efficiency, and is suitable for scenarios requiring complex functions.

[0003] To achieve interactive remote terminal effects, real-time communication with the backend server is required, typically achieved through WebSocket. WebSocket is a full-duplex communication protocol that establishes a persistent connection between the browser and the server. Through WebSocket, the frontend can communicate with the backend in real time, eliminating the need for polling or long polling to obtain data.

[0004] However, WebSocket does not work properly in some environments, such as some browser versions and network environments do not support it. Due to the compatibility issues of Websoket, the implemented web terminal is incompatible with some old browser versions or some special scenarios. Summary of the Invention

[0005] In view of this, the purpose of the present invention is to propose a method for realizing an interactive web terminal based on React+XtermJS+SoketJS, overcoming the limitations of WebSocket in compatibility, using SockJS to provide degradation support for WebSocket, and being able to use alternative transmission methods (such as HTTP long polling, IFrame streaming, etc.) in browsers that do not support WebSocket to simulate the real-time communication effect of WebSocket, thereby achieving wider compatibility, so that even in some old browsers and specific environments, it can still provide real-time communication capabilities; based on the degradation capability of SockJS, it has strong applicability in some special network environments, so that the implemented Web terminal has wider compatibility, and even in some old browsers and specific environments, it can still have the ability to interact with the back end; and the implementation method is simple and the code is concise, which is easy to read and subsequent maintenance.

[0006] The present invention provides a method for realizing an interactive web terminal based on React+XtermJS+SoketJS, comprising the following steps:

[0007] S1. Install the xterm terminal emulator, import sockjs-client, and xterm style files;

[0008] For example, the code is as follows:

[0009]

[0010] S2. Create a Terminal instance, pass in customizable parameters, and write the DOM document object model and reference to store the web terminal.

[0011] For example, the pseudo code is as follows:

[0012]

[0013] S3. Call the API provided by the backend to obtain the address of the backend server (preferably, this step can be omitted if the address is already known); initialize xterm, use the loadAddon method of xterm to load the FitAddon instance (i.e., the terminal size adaptive screen plug-in xterm-addon-fit, which automatically adjusts the number of rows and columns of the terminal to fill the parent container); use the open command on the xterm instance to bind the terminal to the DOM and render it; the onData method of the xterm instance is used to transmit and send data;

[0014] For example, the pseudo code is as follows:

[0015]

[0016] S4. Create a SockJS client instance, connect to the server, establish a SockJS connection, and implement interactive display of front-end and back-end data.

[0017] For example, the pseudo code is as follows:

[0018]

[0019] At this point, we have an interactive web terminal that is compatible with various networks and browsers, which is completed by Xterm and SockJS. The data input by the front end is also returned by the back end. After the data is obtained by the onMessage method of SockJS, it is written to the terminal panel by the write method of Xterm. Xterm does not need to process more judgment logic of the input content, and the implementation is simple and easy to understand.

[0020] SockJS is adaptable to various network and browser environments because it provides stable real-time communication in various network and browser environments through multi-protocol support, automatic degradation, browser compatibility processing, heartbeat mechanism, and disconnection reconnection. The specific principles are as follows:

[0021] 1. Multiple transport protocol support: SockJS supports multiple transport protocols, automatically selecting the most appropriate one based on the browser and network environment: WebSocket: Preferred, providing full-duplex communication and low latency. HTTP Streaming: Uses long polling or streaming, suitable for environments that don't support WebSocket. HTTP Long Polling: Simulates real-time communication through frequent HTTP requests, offering the best compatibility.

[0022] 2. Automatic downgrade mechanism: SockJS will first try to use WebSocket. If it fails, it will downgrade to other protocols in turn to ensure that it can work properly in various environments.

[0023] 3. Browser compatibility processing: SockJS handles the compatibility issues of different browsers to ensure that it can run normally in various browsers.

[0024] 4. Network environment adaptation: SockJS can cope with different network restrictions, such as firewalls or proxies, and automatically select the appropriate protocol.

[0025] 5. Heartbeat mechanism: By sending heartbeat packets regularly, SockJS keeps the connection active and prevents disconnection due to timeout.

[0026] 6. Reconnection after disconnection: SockJS has an automatic reconnection function to ensure that the connection can be restored after network fluctuations or interruptions.

[0027] 7. Protocol simulation: In an environment that does not support WebSocket, SockJS simulates the behavior of WebSocket through HTTP to provide a similar real-time communication experience.

[0028] 8. Cross-domain support: SockJS supports cross-domain communication, allowing clients to communicate with servers in different domains in real time.

[0029] Furthermore, the method for implementing the interactive display of front-end and back-end data in step S4 includes:

[0030] Call the onopen method of SockJS. The onopen method is a callback function triggered when the connection between the client and the server is successfully established. When the SockJS connection is successfully established, the onopen event is called to initialize the connection or send some initial data and pass some information to the backend as required.

[0031] Furthermore, the method for implementing interactive display of front-end and back-end data in step S4 further includes:

[0032] Call the send data method of SockJS. The send data method is a method for sending data to the server. The parameter data of the senddata method is the data to be sent. data is a string or binary data.

[0033] Furthermore, the method for implementing interactive display of front-end and back-end data in step S4 further includes:

[0034] Call the onmessage method of SockJS. The onmessage method is a callback function called when a message is received. Onmessage is used to monitor the information passed by the backend and write the information to the terminal panel by the write method of xterm.

[0035] Furthermore, the method for implementing interactive display of front-end and back-end data in step S4 further includes:

[0036] Call the onClose method of SockJS. The onClose method is a callback function called when the connection is closed. The onClose method is called when the SockJS connection is closed or disconnected due to an error.

[0037] Furthermore, the customizable parameters in the customizable parameters input in step S2 include:

[0038] cursorBlink cursor blinking, font definition fontFamily and size fontSize, terminal theme theme, and the number of rows and columns of the terminal visual window rows and cols parameters (for details, please refer to the official documentation).

[0039] SockJS provides downgrade support for WebSocket. It can use alternative transmission methods (such as HTTP long polling, IFrame streaming, etc.) to simulate the real-time communication effect of WebSocket in browsers that do not support WebSocket, thereby achieving wider compatibility. This allows SockJS to still provide real-time communication capabilities even in some old browsers and specific environments.

[0040] Due to its downgrade capabilities, SockJS is highly applicable in some specialized network environments. For example, within an enterprise network, direct use of WebSockets may be restricted by firewalls and proxy servers. SockJS, however, can communicate over HTTP, making it more suitable for implementing real-time communication within the enterprise network. Furthermore, in mobile networks, where network instability and peculiarities are common, using SockJS can provide a more stable and reliable real-time communication experience.

[0041] The present invention also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the method for realizing an interactive web terminal based on React+XtermJS+SoketJS as described above.

[0042] The present invention also provides a computer device, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the program, the steps of the method for realizing an interactive web terminal based on React+XtermJS+SoketJS as described above are implemented.

[0043] Compared with the prior art, the present invention has the following beneficial effects:

[0044] The method for realizing an interactive web terminal based on React+XtermJS+SocketJS provided by the present invention overcomes the limitations of WebSocket in terms of compatibility, utilizes SockJS to provide degradation support for WebSocket, and can use alternative transmission methods (such as HTTP long polling, IFrame streaming, etc.) in browsers that do not support WebSocket to simulate the real-time communication effect of WebSocket, thereby achieving wider compatibility and enabling real-time communication capabilities even in some old browsers and specific environments; based on the degradation capability of SockJS, it has strong applicability in some special network environments, so that the realized Web terminal has wider compatibility and can still have the ability to interact with the back end even in some old browsers and specific environments; and the implementation method is simple, the code is concise, and it is easy to read and subsequently maintain. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] Various other advantages and benefits will become apparent to those skilled in the art by reading the following detailed description of the preferred embodiment.The accompanying drawings are only for the purpose of illustrating the preferred embodiment and are not to be considered as limiting the present invention.

[0046] In the attached figure:

[0047] Figure 1 This is a rendering of an interactive web terminal implemented based on React+XtermJS+SoketJS according to an embodiment of the present invention;

[0048] Figure 2 This is a flow chart of the method for implementing an interactive web terminal based on React+XtermJS+SoketJS of the present invention;

[0049] Figure 3 Schematic diagram of the structure of a computer device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0050] Exemplary embodiments will be described in detail herein, with examples illustrated in the accompanying drawings. In the following description, when referring to the drawings, like numbers in different figures represent like or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments are not intended to represent all possible embodiments consistent with the present disclosure. Rather, they are merely examples of devices and products consistent with certain aspects of the present disclosure, as detailed in the appended claims.

[0051] The terms used in this disclosure are for the purpose of describing specific embodiments only and are not intended to limit the disclosure. As used in this disclosure and the appended claims, the singular forms "a," "an," "the," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It should also be understood that the term "and / or" as used herein refers to and encompasses any and all possible combinations of one or more of the associated listed items.

[0052] It should be understood that although the terms first, second, third, etc. may be used in this disclosure to describe various information, such information should not be limited to these terms. These terms are only used to distinguish information of the same type from each other. For example, without departing from the scope of this disclosure, first information may also be referred to as second information, and similarly, second information may also be referred to as first information. Depending on the context, the word "if" as used herein may be interpreted as "at the time of" or "when" or "in response to determining."

[0053] The embodiments of the present invention are described in further detail below.

[0054] The embodiment of the present invention provides a method for implementing an interactive web terminal based on React+XtermJS+SoketJS, see Figure 2 As shown, the following steps are included:

[0055] S1. Install the xterm terminal emulator, import sockjs-client, and xterm style files;

[0056] The code in this embodiment is as follows:

[0057]

[0058] S2. Create a Terminal instance, pass in customizable parameters, and write the DOM document object model and reference to store the web terminal.

[0059] The pseudo code is as follows:

[0060]

[0061] In this embodiment, the customizable parameters include:

[0062] cursorBlink cursor blinking, font definition fontFamily and size fontSize, terminal theme theme, and the number of rows and columns of the terminal visual window rows and cols parameters.

[0063] S3. Call the API provided by the backend to obtain the address of the backend server; initialize xterm and use the loadAddon method of xterm to load the FitAddon instance; use the open command on the xterm instance to bind the rendering terminal to the DOM; the onData method on the xterm instance is used to pass and send data;

[0064] The pseudo code is as follows:

[0065]

[0066] S4. Create a SockJS client instance, connect to the server, establish a SockJS connection, and implement interactive display of front-end and back-end data.

[0067] The pseudo code is as follows:

[0068]

[0069] Methods for implementing interactive display of front-end and back-end data include:

[0070] Call the onopen method of SockJS. The onopen method is a callback function triggered when the connection between the client and the server is successfully established. When the SockJS connection is successfully established, the onopen event is called to initialize the connection or send some initial data and pass some information to the backend as required.

[0071] Call the send data method of SockJS. The send data method is a method for sending data to the server. The parameter data of the senddata method is the data to be sent. data is a string or binary data.

[0072] Call the onmessage method of SockJS. The onmessage method is a callback function called when a message is received. Onmessage is used to monitor the information passed by the backend and write the information to the terminal panel by the write method of xterm.

[0073] Call the onClose method of SockJS. The onClose method is a callback function called when the connection is closed. The onClose method is called when the SockJS connection is closed or disconnected due to an error.

[0074] At this point, we have an interactive web terminal that adapts to various networks and browsers, which is completed by Xterm and SockJS. The data input by the front end is also returned by the back end. After the data is monitored by the onMessage method of SockJS, it is written to the terminal panel by the write method of Xterm. There is no need for Xterm to process more input content judgment logic, and the implementation is simple and easy to understand. The specific implementation effect is as follows Figure 1 shown.

[0075] The method of implementing an interactive web terminal based on React+XtermJS+SoketJS in this embodiment overcomes the limitations of WebSocket in terms of compatibility, and uses SockJS to provide degradation support for WebSocket. It can use alternative transmission methods (such as HTTP long polling, IFrame streaming, etc.) in browsers that do not support WebSocket to simulate the real-time communication effect of WebSocket, thereby achieving wider compatibility, so that even in some old browsers and specific environments, it can still provide real-time communication capabilities; based on the degradation capability of SockJS, it has strong applicability in some special network environments, so that the implemented Web terminal has wider compatibility and can still have the ability to interact with the back end even in some old browsers and specific environments.

[0076] An embodiment of the present invention further provides a computer device, Figure 3 This is a schematic diagram of the structure of a computer device provided by an embodiment of the present invention; see the accompanying drawings Figure 3 As shown, the computer device includes: an input system 23, an output system 24, a memory 22 and a processor 21; the memory 22 is used to store one or more programs; when the one or more programs are executed by the one or more processors 21, the one or more processors 21 implement the method for implementing an interactive web terminal based on React+XtermJS+SoketJS as provided in the above embodiment; wherein the input system 23, the output system 24, the memory 22 and the processor 21 can be connected by a bus or other means, Figure 3 The bus connection is taken as an example.

[0077] The memory 22 is a readable and writable storage medium of a computing device, which can be used to store software programs and computer executable programs, such as the program instructions corresponding to the method for implementing an interactive web terminal based on React+XtermJS+SoketJS as described in an embodiment of the present invention; the memory 22 may mainly include a program storage area and a data storage area, wherein the program storage area can store an operating system and at least one application required for a function; the data storage area can store data created according to the use of the device, etc.; in addition, the memory 22 may include a high-speed random access memory and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other non-volatile solid-state storage device; in some instances, the memory 22 may further include a memory remotely located relative to the processor 21, and these remote memories may be connected to the device via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0078] The input system 23 may be used to receive input digital or character information, and generate key signal input related to user settings and function control of the device; the output system 24 may include display devices such as a display screen.

[0079] The processor 21 executes various functional applications and data processing of the device by running the software programs, instructions and modules stored in the memory 22, that is, implements the above-mentioned method of realizing an interactive web terminal based on React+XtermJS+SoketJS.

[0080] The computer device provided above can be used to execute the method for realizing an interactive web terminal based on React+XtermJS+SoketJS provided in the above embodiment, and has corresponding functions and beneficial effects.

[0081] An embodiment of the present invention also provides a storage medium containing computer-executable instructions, which, when executed by a computer processor, are used to execute the method for implementing an interactive web terminal based on React+XtermJS+SoketJS as provided in the above embodiment. The storage medium is any of various types of memory devices or storage devices, including: installation media, such as CD-ROM, floppy disk or tape system; computer system memory or random access memory, such as DRAM, DDR RAM, SRAM, EDO RAM, Rambus RAM, etc.; non-volatile memory, such as flash memory, magnetic media (such as hard disk or optical storage); registers or other similar types of memory elements; the storage medium may also include other types of memory or a combination thereof; in addition, the storage medium may be located in the first computer system in which the program is executed, or may be located in a different second computer system, the second computer system being connected to the first computer system via a network (such as the Internet); the second computer system may provide program instructions to the first computer for execution. The storage medium includes two or more storage media that can reside in different locations (for example, in different computer systems connected via a network). The storage medium can store program instructions (for example, specifically implemented as a computer program) that can be executed by one or more processors.

[0082] Of course, the storage medium containing computer-executable instructions provided in an embodiment of the present invention is not limited to the method for implementing an interactive web terminal based on React+XtermJS+SoketJS as described in the above embodiment, and can also execute related operations in the method for implementing an interactive web terminal based on React+XtermJS+SoketJS provided in any embodiment of the present invention.

[0083] Thus far, the technical solutions of the present invention have been described in conjunction with preferred embodiments. However, it will be readily understood by those skilled in the art that the scope of protection of the present invention is clearly not limited to these specific embodiments. Without departing from the principles of the present invention, those skilled in the art may make equivalent changes or substitutions to the relevant technical features, and the technical solutions after such changes or substitutions will fall within the scope of protection of the present invention.

[0084] The foregoing description is merely a preferred embodiment of the present invention and is not intended to limit the present invention. Those skilled in the art will readily appreciate that the present invention is susceptible to various modifications and variations. Any modifications, equivalent substitutions, or improvements made within the spirit and principles of the present invention are intended to be within the scope of protection of the present invention.

Claims

1. A method for implementing an interactive web terminal based on React+XtermJS+SoketJS, characterized in that: The following steps are involved: S1. Install the xterm terminal emulator, import sockjs-client, and xterm style files; S2. Create a Terminal instance, pass in customizable parameters, and write the DOM document object model and reference to store the web terminal. S3. Call the API provided by the backend to obtain the address of the backend server; initialize xterm and use the loadAddon method of xterm to load the FitAddon instance; use the open command on the xterm instance to bind the rendering terminal to the DOM; the onData method on the xterm instance is used to pass and send data; S4. Create a SockJS client instance, connect to the server, establish a SockJS connection, and implement interactive display of front-end and back-end data.

2. The method for realizing an interactive web terminal based on React+XtermJS+SoketJS according to claim 1, characterized in that: The method for implementing the interactive display of front-end and back-end data in step S4 includes: Call the onopen method of SockJS. The onopen method is a callback function triggered when the connection between the client and the server is successfully established. When the SockJS connection is successfully established, the onopen event is called to initialize the connection or send some initial data and pass some information to the backend as required.

3. The method for realizing an interactive web terminal based on React+XtermJS+SoketJS according to claim 1, characterized in that: The method for implementing interactive display of front-end and back-end data in step S4 further includes: Call the send data method of SockJS. The send data method is a method for sending data to the server. The parameter data of the send data method is the data to be sent. Data is a string or binary data.

4. The method for realizing an interactive web terminal based on React+XtermJS+SoketJS according to claim 1, characterized in that: The method for implementing interactive display of front-end and back-end data in step S4 further includes: Call the onmessage method of SockJS. The onmessage method is a callback function called when a message is received. Onmessage is used to monitor the information passed by the backend and write the information to the terminal panel by the write method of xterm.

5. The method for realizing an interactive web terminal based on React+XtermJS+SoketJS according to claim 1, characterized in that: The method for implementing interactive display of front-end and back-end data in step S4 further includes: Call the onClose method of SockJS. The onClose method is a callback function called when the connection is closed. The onClose method is called when the SockJS connection is closed or disconnected due to an error.

6. The method for realizing an interactive web terminal based on React+XtermJS+SoketJS according to claim 1, characterized in that: The customizable parameters in the customizable parameters input in step S2 include: cursorBlink cursor blinking, font definition fontFamily and size fontSize, terminal theme theme, and the number of rows and columns of the terminal visual window rows and cols parameters.

7. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the steps of the method for realizing an interactive web terminal based on React+XtermJS+SoketJS according to any one of claims 1 to 6 are implemented.

8. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the steps of the method for realizing an interactive web terminal based on React+XtermJS+SoketJS as described in any one of claims 1 to 6 are implemented.

Images