Offline same-domain information broadcast data two-way communication method based on javaScript

Abstract

The invention discloses a javaScript-based offline same-domain information broadcast data two-way communication method, which comprises the following steps of: S1, creating channels: defining a global wide-pass channel for storing a queue of all opened channels, initializing the channels, creating a plurality of new channels, allocating a unique ID (Identity) to each channel, and adding the unique ID to a global wide-pass channel set; s2, channel configuration: transmitting a configuration item or a default item to a constructor, receiving an option set returned by the constructor by using a selection method mode function, and judging a method category used for creating a current channel; s3, message sending and receiving: defining an internal sending function method for sending a channel message, defining a monitor adding object and a monitor removing object, and defining a monitoring starting or stopping function; and finally monitoring the message event through channel connection. And S4, closing the channel: defining a closing method. The technology development efficiency is improved, and the development cost is saved.

Description

Technical Field

[0001] The invention belongs to the technical field of Internet, and in particular relates to a method for two-way communication of offline same-domain information broadcasting data based on javascript. Background Art

[0002] In traditional Web applications, communication between different tabs or windows of the same browser is usually difficult. This is because the browser has severely insufficient control over computer permissions compared to native applications, and is unable to quickly monitor computer hardware, make hardware calls, etc.

[0003] There are currently two solutions for mainstream Web applications. One is to use localStorage for cross-window communication, and to implement message notification and reception by monitoring data changes in user memory. However, this method requires additional coding work to manage data formats and handle synchronization issues, perform complex data comparison monitoring, and has high latency. The second is to use the Websocket protocol for dual-screen communication. This method needs to be used in conjunction with the back-end JAVA service, which cannot meet the needs of simple front-end direct application, resulting in a more cumbersome project, an inflexible development architecture, and poor scalability. It cannot be used as a tool plug-in method for multiple scenarios and projects of different businesses. BroadcastChannelAPI is a JavaScriptAPI that allows communication between different browser contexts under the same origin. The simple process of traditional browsers calling this API cannot be separated from the browser scope, and there is no way to persist data and additional callback methods, and the creation steps are also cumbersome. Channels cannot be managed centrally and uniformly.

[0004] Therefore, a method for two-way communication of offline same-domain information broadcast data based on javascript is provided, which realizes multi-threaded simultaneous sending, and the response speed and communication efficiency are greatly improved compared with other communication methods. Summary of the invention

[0005] The technical problem to be solved by the present invention is to provide a method for two-way communication of offline same-domain information broadcast data based on javascript, which realizes multi-threaded simultaneous sending, and the response speed and communication efficiency are greatly improved compared with other communication methods.

[0006] In order to solve the above technical problems, the technical solution adopted by the present invention is: the method for two-way communication of offline same-domain information broadcast data based on javascript specifically comprises the following steps:

[0007] S1 creates a channel: defines a global wide-channel queue to store all open channels to ensure that all channels are closed correctly during testing; initializes the channel, creates multiple new channels through the constructor, assigns a unique ID to each channel, and adds it to the global wide-channel collection;

[0008] S2 channel configuration: Use configuration items or default items to pass to the constructor, and use the selection method function to receive the option set returned by the constructor to determine the method category used to create the current channel;

[0009] S3 message sending and receiving: define an internal sending function method to send channel messages, similar to the sending information function; define an add listener object and remove listener objects, and define a start or stop listener function; finally, connect through the channel and listen for message events;

[0010] S4 closes the channel: defines a closing method to close the channel, waits for all unfinished messages to be sent and executes the hook function before closing; defines a prepare channel function to prepare the channel, which may return a Promise of an asynchronous preparation process.

[0011] By adopting the above technical scheme, the browser utilizes the BroadcastChannelAPI and localStorage, indexedDB and JS simulation data API combination method of the javascript engine, which allows communication callbacks between tabs, iframes, windows or web Workers and service Workers of different browsers under the same origin, or servers, and supports downgraded simulation APIs to be compatible with various high and low version browsers, and can realize various data persistence methods and main channel settings by dynamically configuring the configuration items of establishing channels. The present invention encapsulates various callback methods and development and use environments, improves technical development efficiency, and saves development costs.

[0012] Preferably, creating a channel through the BroadcastChannel constructor in step S1 includes creating a channel name module, a channel identifier and a channel queue module.

[0013] Preferably, the channel configuration in step S2 includes configuring the persistence method type of the channel, the channel configuration localstorage configuration module, the channel configuration indexedDB configuration module and the channel configuration nodejs configuration module; the method categories used for channel creation include native methods, localstorage, indexedDB, node, and simulate.

[0014] Preferably, in step S2, if there is a mandatory option user configuration item, the mandatory option user configuration item is used to overwrite the configuration option passed to the constructor, and if there is no configured default item, a function is used to return the default option.

[0015] Preferably, step S2 also includes setting an information monitoring event handler of BroadcastChannel, which is used to call a return information callback function and pass the message data to it if there is one when a message is received; and then return a state object; the state object contains all states and functions of BroadcastChannel.

[0016] Preferably, step S2 also includes a state manager and an upper-level warehouse between channels, and the warehouse connects multiple persistence method types and automatically matches the appropriate type.

[0017] Preferably, in step S2, if the method used for channel creation is a native method, that is, the steps of channel configuration for creating a channel using a native module are:

[0018] First, define a native method object; then create a creation function in the native method object to create a browser, create a new BroadcastChannel instance and create a state object. Create a state object, which contains: time: microsecond timestamp of the current time; messagesCallback: an optional callback function for processing received messages; bc: create a BroadcastChannel instance for actual message communication; subFns: create a repository for storing subscription functions.

[0019] Preferably, in step S3, the channel maintains multiple internal states, including a listener list, a Promise collection of uncompleted message sending, and a Promise array for waiting before closing.

[0020] Preferably, the specific steps of step S3 are:

[0021] S31: define a _send message function to handle the details of message sending, including adding messages to the unfinished message list and removing completed messages from the list;

[0022] S32: define an add listener object and a remove listener object for adding and removing listener objects respectively;

[0023] S33: Define a _start listening function and a _stop listening function to start or stop listening messages according to whether there is a listener;

[0024] S34: After the channel connection, the onmessage property is set to listen to the message event, thereby triggering the corresponding callback function;

[0025] S35: The add event listener and remove event listener methods are used to add and remove event listeners respectively.

[0026] BroadcastChannel allows sending various types of data, including objects and arrays, which allows developers to process and transmit complex data structures more flexibly. In dual-screen applications, complex status information or user input data may need to be transmitted, and BroadcastChannel can support these requirements.

[0027] Preferably, it also includes defining a Node directory cleaning method for cleaning temporary folders in the Node environment. If the current environment is not Node, a Promise indicating failure is returned; defining a mandatory option method for setting mandatory options; and defining a prototype method of the channel instance on the prototype chain of BroadcastChannel, including the type and whether to close attributes.

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

[0029] (1) Supports multiple storage mechanisms, including native, LocalStorage, IndexedDB, and Node environments, and uses a common storage pool, thus achieving what other communication methods cannot do: single warehouse with multiple sources. Applicable to multiple environments, compatible and controllable with each other;

[0030] (2) Compared with other two-way communication methods, this invention has powerful data status management, including the complete life cycle of all data involved, which is controllable and can be monitored in real time. Data persistence processing does not require multiple heartbeat mechanisms to re-ensure the update status of data;

[0031] (3) Compatible with various browsers, servers, etc., and there are corresponding solutions for data storage and communication for different browser versions;

[0032] (4) Establish a multi-channel mechanism, the communication message queue is not blocked, and multiple threads are sent simultaneously. The receiving end has a unified entrance, and directly responds to events through message parsing. The response speed and communication efficiency are greatly improved compared with other communication methods. BRIEF DESCRIPTION OF THE DRAWINGS

[0033] Figure 1 It is a flowchart of a method for bidirectional communication of offline same-domain information broadcast data based on javascript of the present invention;

[0034] Figure 2The present invention is a flowchart of the operating environment support in the method of bidirectional communication of javascript-based offline same-domain information broadcast data.

[0035] Figure 3 This is a simple process of a traditional browser calling the API in the method of the present invention based on javascript offline same-domain information broadcast data two-way communication. DETAILED DESCRIPTION

[0036] The embodiments of the present invention are described in detail below in conjunction with the accompanying drawings. The following embodiments are only used to more clearly illustrate the technical solutions of the present invention and are not intended to limit the protection scope of the present invention.

[0037] Example: Figure 1 As shown, the method for bidirectional communication of javascript-based offline same-domain information broadcast data specifically includes the following steps:

[0038] S1 creates a channel: defines a global wide-channel queue to store all open channels to ensure that all channels are closed correctly during testing; initializes the channel, creates multiple new channels through the constructor, assigns a unique ID to each channel, and adds it to the global wide-channel collection;

[0039] In step S1, creating a channel through the BroadcastChannel constructor includes creating a channel name module, a channel identifier and a channel queue module;

[0040] S2 channel configuration: Use configuration items or default items to pass to the constructor, and use the selection method function to receive the option set returned by the constructor to determine the method category used to create the current channel;

[0041] The channel configuration in step S2 includes configuring the persistence method type of the channel, the channel configuration localstorage configuration module, the channel configuration indexedDB configuration module and the channel configuration nodejs configuration module; the method categories used for channel creation include native methods, localstorage, indexedDB, node, and simulate;

[0042] In step S2, if there is a mandatory option user configuration item, the mandatory option user configuration item is used to overwrite the configuration option passed to the constructor, and if there is no configured default item, a function is used to return the default option;

[0043] The step S2 also includes setting the information monitoring event handler of BroadcastChannel, which is used to call the return information callback function if there is one when receiving the message and pass the message data to it; and then return the state object; the state object contains all the states and functions of BroadcastChannel;

[0044] The step S2 also includes a state manager and an upper-level warehouse between channels, and the warehouse connects multiple persistence method types and automatically matches the appropriate type;

[0045] In step S2, if the method used for channel creation is the native method, that is, the steps of channel configuration for creating a channel using a native module are:

[0046] First, define a native method object; then create a creation function in the native method object to create a browser, a new BroadcastChannel instance, and a state object. Create a state object that contains: time: microsecond timestamp of the current time; messagesCallback: an optional callback function for processing received messages; bc: create a BroadcastChannel instance for actual message communication; subFns: create a repository for storing subscription functions;

[0047] S3 message sending and receiving: define an internal sending function method to send channel messages, similar to the sending information function; define an add listener object and remove listener objects, and define a start or stop listener function; finally, connect through the channel and listen for message events;

[0048] In step S3, the channel maintains multiple internal states, including a list of listeners, a collection of uncompleted message sending Promises, and an array of Promises for waiting before closing;

[0049] The specific steps of step S3 are:

[0050] S31: define a _send message function to handle the details of message sending, including adding messages to the unfinished message list and removing completed messages from the list;

[0051] S32: define an add listener object and a remove listener object for adding and removing listener objects respectively;

[0052] S33: Define a _start listening function and a _stop listening function to start or stop listening messages according to whether there is a listener;

[0053] S34: After the channel connection, the onmessage property is set to listen to the message event, thereby triggering the corresponding callback function;

[0054] S35: add event listener and remove event listener methods are used to add and remove event listeners respectively;

[0055] BroadcastChannel allows sending various types of data, including objects and arrays, which allows developers to process and transmit complex data structures more flexibly. In dual-screen applications, complex status information or user input data may need to be transmitted, and BroadcastChannel can support these requirements.

[0056] S4 closes the channel: defines a close method to close the channel, waits for all unfinished messages to be sent and executes the hook function before closing; defines a prepare channel function to prepare the channel, which may return a Promise of an asynchronous preparation process;

[0057] It also includes defining a Node directory cleanup method for cleaning temporary folders in the Node environment. If the current environment is not Node, a Promise indicating failure is returned; defining a mandatory option method for setting mandatory options; and defining the prototype method of the channel instance on the prototype chain of BroadcastChannel, including the type and whether to close properties.

[0058] like Figure 2As shown, an API for two-way channel communication based on BroadcastChannelAPI and localstorge and indexedDB includes channel creation, channel configuration, channel connection, channel sending, channel receiving, and channel closing; the channel creation includes creating a channel name module, a channel identifier, and a channel queue module; the channel configuration includes configuring the channel persistence method type of the channel, the channel configuration localstrage configuration module, the channel configuration indexedDB configuration module, and the channel configuration nodejs configuration module; the channel connection includes a connection processing module for the established channel configuration; adding a state manager between channels and an upper-level warehouse, the warehouse connects multiple persistence method types, and automatically selects the most suitable type; establishing multiple channels, a main channel and multiple sub-channels, using the multi-threaded response of the receiving and sending monitoring to send messages; containing a controllable configuration file, controlling the data storage method and automatically detecting the supported persistence method type; the channel sending includes sending messages to all sub-channels from the main channel, or sending messages to the main channel from the sub-channel; the channel receiving includes a module in which both the main channel and the sub-channel can receive information processing modules sent by each channel; the channel closing includes actively closing the sub-channel or the main channel initiating a series of callback events; and modern browsers are widely supported. Although it may not be supported in some older browsers, it provides a consistent cross-context communication mechanism for mainstream modern browsers. Developers can use this to ensure consistency of applications on different devices and browsers.

[0059] like Figure 3 The simple process of traditional browser calling the API shown in the figure cannot be separated from the scope of the browser, and there is no persistent data method and additional callback method, and the creation steps are also cumbersome. It is impossible to centrally and uniformly manage channels. The technical solution of the present invention supports multiple storage mechanisms, including native, LocalStorage, IndexedDB and Node environments, and shares a storage pool, so as to achieve what other communication methods cannot do: single warehouse and multiple sources. It is applied to multiple environments and is compatible and controllable with each other. Compared with other two-way communication methods, the invention has powerful data status management, including all the complete life cycle of data involved, which is controllable and can be monitored in real time. Data persistence processing does not require multiple heartbeat mechanisms to ensure the update status of data again. It is compatible with various browsers, servers, etc., and there are corresponding solutions for data storage and communication for both high and low browser versions. A multi-channel mechanism is established, the communication message queue is not blocked, and multiple threads are sent simultaneously. The receiving end has a unified entrance and directly responds to events through message parsing. The response speed and communication efficiency are greatly improved compared with other communication methods.

[0060] For ordinary technicians in this field, the specific embodiments are only illustrative descriptions of the present invention. It is obvious that the specific implementation of the present invention is not limited to the above-mentioned methods. As long as various non-substantial improvements are made using the method concepts and technical solutions of the present invention, or the concepts and technical solutions of the present invention are directly applied to other occasions without improvement, they are all within the protection scope of the present invention.

Claims

1. A method for two-way communication of offline same-domain information broadcast data based on javascript, characterized in that: The specific steps include: S1 creates a channel: defines a global wide-channel to store the queue of all open channels, initializes the channel, creates multiple new channels through the constructor, assigns a unique ID to each channel, and adds it to the global wide-channel channel set; S2 channel configuration: Use configuration items or default items to pass to the constructor, and use the selection method function to receive the option set returned by the constructor to determine the method category used to create the current channel; S3 message sending and receiving: define an internal sending function method to send channel messages, define an add listener object and remove listener objects, and define a start or stop listener function; finally, connect through the channel and listen for message events; S4 closes the channel: defines a closing method to close the channel, waits for all unfinished messages to be sent and executes the hook function before closing; defines a prepare channel function to prepare the channel.

2. The method for bidirectional communication of javascript offline same-domain information broadcast data according to claim 1 is characterized in that: The creation of a channel through the BroadcastChannel constructor in step S1 includes creating a channel name module, a channel identifier and a channel queue module.

3. The method for bidirectional communication of javascript offline same-domain information broadcast data according to claim 2 is characterized in that: The channel configuration in step S2 includes configuring the persistence method type of the channel, the channel configuration localstorage configuration module, the channel configuration indexedDB configuration module and the channel configuration nodejs configuration module; the method categories used for channel creation include native methods, localstorage, indexedDB, node, and simulate.

4. The method for bidirectional communication of javascript offline same-domain information broadcast data according to claim 2 is characterized in that: In step S2, if there is a mandatory option user configuration item, the mandatory option user configuration item is used to overwrite the configuration option passed to the constructor, and if there is no configured default item, a function is used to return the default option.

5. The method for bidirectional communication of javascript-based offline same-domain information broadcast data according to claim 3 is characterized in that: The step S2 also includes setting the information monitoring event handler of BroadcastChannel, which is used to call the return information callback function and pass the message data to it if there is one when a message is received; and then return the state object; the state object contains all the states and functions of BroadcastChannel.

6. The method for bidirectional communication of javascript-based offline same-domain information broadcast data according to claim 3, characterized in that: The step S2 also includes a state manager and an upper-level warehouse between channels. The warehouse connects multiple persistence method types and automatically matches the appropriate type.

7. The method for bidirectional communication of javascript-based offline same-domain information broadcast data according to claim 3, characterized in that: In step S2, if the method used for channel creation is the native method, that is, the steps of channel configuration for creating a channel using a native module are as follows: First, define a native method object; then create a creation function in the native method object to create a browser, a new BroadcastChannel instance, and a state object. Create a state object that contains: time: the microsecond timestamp of the current time; messagesCallback: an optional callback function for processing received messages; bc: Creates a BroadcastChannel instance for actual message communication; subFns: Creates a repository for storing subscription functions.

8. The method for bidirectional communication of javascript-based offline same-domain information broadcast data according to claim 6, characterized in that: In step S3, the channel maintains multiple internal states, including a listener list, a Promise collection of uncompleted message sending, and a Promise array for waiting before closing.

9. The method for bidirectional communication of javascript-based offline same-domain information broadcast data according to claim 8, characterized in that: The specific steps of step S3 are: S31: define a _send message function to handle the details of message sending, including adding messages to the unfinished message list and removing completed messages from the list; S32: define an add listener object and a remove listener object for adding and removing listener objects respectively; S33: Define a _start listening function and a _stop listening function to start or stop listening messages according to whether there is a listener; S34: After the channel connection, the message event is monitored by setting the onmessage attribute; S35: The add event listener and remove event listener methods are used to add and remove event listeners respectively.

10. The method for bidirectional communication of javascript-based offline same-domain information broadcast data according to claim 8, characterized in that: It also includes defining a Node directory cleanup method for cleaning temporary folders in the Node environment. If the current environment is not Node, a Promise indicating failure is returned; defining a mandatory option method for setting mandatory options; and defining the prototype method of the channel instance on the prototype chain of BroadcastChannel, including the type and whether to close properties.

Images