Multi-window message sharing method and device, electronic equipment and storage medium

Abstract

The invention discloses a multi-window message sharing method and device, electronic equipment and a storage medium, and belongs to the technical field of information processing.The method comprises the steps that in response to a connection request of a target window, a sharing thread with the target window is constructed and initialized; a WebSocket instance which is packaged in advance in the shared thread is called, and WebSocket connection is constructed and initialized; and receiving the information pushed by the WebSocket server shared by the shared thread. According to the method and the device, the message sharing among the windows is realized by using the shared thread, the communication logic of the WebSocket is concentrated in the shared thread Shared Worker, the WebSocket is utilized to connect a server and establish a real-time communication channel, the resource waste caused by independently creating the WebSocket in each window can be effectively avoided, the consistency and the real-time performance of data are effectively ensured, and the user experience is improved. And the user experience and the system performance are obviously improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of information processing, and particularly relates to a multi-window message sharing method and device, electronic equipment and a storage medium. BACKGROUND

[0002] At present, with the development of the Internet, more and more attention is paid to message synchronization between multiple windows.

[0003] In the related art, real-time bidirectional communication between a client and a server can be realized through WebSocket, and communication between multiple browser windows usually needs to be realized through localStorage, BroadcastChannel and the like. However, it is found in actual application that the event listening of localStorage has limitations, and BroadcastChannel has certain limitations in compatibility, resulting in low efficiency in multi-window message sharing.

[0004] To sum up, the technical problems in the related art need to be improved. SUMMARY

[0005] The embodiments of the present application provide a multi-window message sharing method and device, electronic equipment and a storage medium, which can effectively ensure the consistency and real-time performance of data, and significantly improve user experience and system performance.

[0006] In one aspect, the embodiments of the present application provide a multi-window message sharing method, comprising the following steps:

[0007] In response to a connection request of a target window, a shared thread SharedWorker between the target window is constructed and initialized;

[0008] A WebSocket instance pre-encapsulated in the shared thread SharedWorker is called to construct and initialize a WebSocket connection;

[0009] In the case that the shared thread SharedWorker and the WebSocket connection are successfully initialized, WebSocket server push information shared by the SharedWorker is received.

[0010] Optionally, in response to the connection request of the target window, the shared thread SharedWorker between the target window is constructed and initialized, comprising:

[0011] In response to the connection request of the target window, a SharedWorker script is called;

[0012] According to the SharedWorker script, a SharedWorker instance between the target window is constructed and initialized;

[0013] Through the message port between the target window and the shared thread SharedWorker, the initialization information is sent to the shared thread SharedWorker, and the shared thread SharedWorker is started.

[0014] Optionally, before the SharedWorker script is called in response to the connection request of the target window, it further comprises:

[0015] The SharedWorker script is encapsulated in the repository of the application state management library Pinia, wherein the SharedWorker script comprises a repository unique identifier, a state parameter, and an initialization SharedWorker instance method.

[0016] Optionally, before the WebSocket instance pre-encapsulated in the shared thread SharedWorker is called to construct and initialize the WebSocket connection, it further comprises:

[0017] Determine whether the target window has an initialized WebSocket instance and whether the WebSocket server has been successfully connected;

[0018] In the case that the WebSocket instance has been initialized successfully and the WebSocket server has been successfully connected, the information that the WebSocket connection has been initialized successfully is directly returned;

[0019] In the case that the WebSocket instance has not been initialized successfully or the WebSocket server has not been successfully connected, the WebSocket instance pre-encapsulated in the shared thread SharedWorker is called to construct and initialize the WebSocket connection.

[0020] Optionally, the WebSocket instance pre-encapsulated in the shared thread SharedWorker is called to construct and initialize the WebSocket connection, comprising:

[0021] The pre-encapsulated WebSocket instance is called to construct and initialize the WebSocket connection;

[0022] The heartbeat detection mechanism and the reconnection mechanism of the WebSocket connection are started, and the information that the WebSocket connection has been initialized successfully is returned.

[0023] Optionally, the WebSocket instance includes an initialization variable, a constructor, an initialization method, a sending information method, a receiving information method, a verifying connection method, a resetting heartbeat detection method, a reconnection method, and a closing connection method.

[0024] Optionally, the method further includes:

[0025] Information ports for connecting each window to the shared thread SharedWorker are managed by weak references weakref.

[0026] Optionally, the method further includes:

[0027] In the case where the shared thread SharedWorker and the WebSocket connection are successfully initialized, push information of the target window is uploaded to the shared thread SharedWorker, so that the shared thread SharedWorker forwards the push information of the target window to a WebSocket server.

[0028] In another aspect, an embodiment of the present application provides a multi-window message sharing device, the device comprising:

[0029] A SharedWorker connection module is configured to, in response to a connection request of a target window, build and initialize a shared thread SharedWorker between the target window and the shared thread SharedWorker;

[0030] A WebSocket connection module is configured to call a WebSocket instance pre-encapsulated in the shared thread SharedWorker to build and initialize a WebSocket connection.

[0031] An information sharing module is configured to, in the case where the shared thread SharedWorker and the WebSocket connection are successfully initialized, receive WebSocket server push information shared by the shared thread SharedWorker.

[0032] In another aspect, an embodiment of the present application provides an electronic device, the electronic device comprising a memory and a processor, the memory storing a computer program, and the processor implementing the multi-window message sharing method when executing the computer program.

[0033] In another aspect, an embodiment of the present application provides a computer readable storage medium, the computer readable storage medium storing a computer program, and the computer program being executed by a processor to implement the multi-window message sharing method.

[0034] The embodiment of the present application realizes message sharing between multiple windows by using a shared thread SharedWorker, and then concentrates the communication logic of WebSocket in the shared thread SharedWorker, so that the server is connected by using WebSocket, a real-time communication channel is established, resource waste caused by independent creation of WebSocket by each window is effectively avoided, data consistency and real-time performance are effectively ensured, and user experience and system performance are significantly improved. BRIEF DESCRIPTION OF DRAWINGS

[0035] Figure 1 is a schematic diagram of an implementation environment of a multi-window message sharing method provided by the embodiment of the present application;

[0036] Figure 2 is a flowchart of a multi-window message sharing method provided by the embodiment of the present application;

[0037] Figure 3 is an architecture diagram of a multi-window message sharing method provided by the embodiment of the present application;

[0038] Figure 4 is a structural schematic diagram of a multi-window message sharing device provided by the embodiment of the present application;

[0039] Figure 5 is a hardware structural schematic diagram of an electronic device provided by the embodiment of the present application. DETAILED DESCRIPTION

[0040] In order to make the objects, technical solutions and advantages of the present application clearer, the present application is further described in detail below with reference to the drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and do not limit the present application. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementation modes described in the following exemplary embodiments do not represent all implementation modes consistent with the embodiments of the present application, but are only examples of devices and methods consistent with some aspects of the embodiments of the present application as described in the appended claims.

[0041] It can be understood that the terms "first", "second", and the like used in the present application can be used herein to describe various concepts, but unless specifically stated, these concepts are not limited by these terms. These terms are only used to distinguish one concept from another. For example, without departing from the scope of the embodiments of the present application, the first information can also be referred to as the second information, and similarly, the second information can also be referred to as the first information. Depending on the context, the word "if" as used herein can be interpreted as "when" or "when" or "in response to determining".

[0042] As used herein, the terms "at least one", "multiple", "each", "any of" and the like, at least one includes one, two or more, multiple includes two or more, each refers to each of the corresponding plurality, and any of refers to any one of the plurality.

[0043] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which the present application belongs. The terms used herein are only for the purpose of describing the embodiments of the present application, and are not intended to limit the present application.

[0044] Before the embodiments of the present application are described in detail, first, some nouns and terms involved in the embodiments of the present application are explained, and the nouns and terms involved in the embodiments of the present application are applicable to the following explanations.

[0045] 1) Shared thread (SharedWorker) is a kind of browser API, which can be used to share a background thread between multiple browser contexts (such as multiple tabs, iframes or windows), realize data sharing and communication.

[0046] 2) WebSocket is a kind of protocol for full-duplex communication based on TCP connection, which can be used to establish a full-duplex communication channel between client and server, realize real-time data transmission.

[0047] 3) Pinia is a kind of state management library in Vue framework, which can centrally manage application state, facilitate data sharing between components, and improve development efficiency and code maintainability.

[0048] At present, with the development of the Internet, more and more attention is paid to message synchronization between multiple windows.

[0049] In the related art, WebSocket can realize real-time bidirectional communication between client and server, and communication between multiple browser windows, which usually needs to be realized through localStorage, BroadcastChannel and other methods. However, it is found in actual application that the event listening of localStorage has limitations, and BroadcastChannel has certain limitations in compatibility, resulting in low efficiency of multi-window message sharing.

[0050] Therefore, the application provides a multi-window message sharing method and device, an electronic device and a storage medium. The message sharing between multiple windows is realized by using a shared thread SharedWorker. The communication logic of WebSocket is concentrated in the shared thread SharedWorker. The WebSocket is connected to the server to establish a real-time communication channel. The resource waste caused by the independent creation of WebSocket in each window is avoided. The data consistency and real-time performance are ensured. The user experience and system performance are improved.

[0051] It should be noted that in each specific embodiment of the application, when relevant processing needs to be performed according to user information, user behavior data, user historical data, and user location information, and other data related to the identity or characteristics of the user, the user's permission or consent will be obtained first. In addition, the collection, use and processing of these data will comply with relevant laws, regulations and standards. In addition, when the application embodiments need to obtain sensitive personal information of the user, the separate permission or separate consent of the user will be obtained through a pop-up window or a jump to a confirmation page. After obtaining the separate permission or separate consent of the user, the necessary user-related data for the normal operation of the application embodiments is obtained.

[0052] The specific embodiments of the application will be described in detail below with reference to the accompanying drawings. First, a multi-window message sharing method provided in the application embodiments is described with reference to the accompanying drawings.

[0053] Please refer to Figure 1 , Figure 1 is an implementation environment schematic diagram of a multi-window message sharing method provided in the application embodiments. In the implementation environment, the main hardware and software subjects involved include a terminal processor 110 and a server 120.

[0054] Specifically, the terminal processor 110 can be installed with a related multi-window message sharing method control program, and the server 120 is a background server of the control program. The terminal processor 110 and the background server 120 are in communication connection. The multi-window message sharing method provided in the application embodiments can be executed on the terminal processor 110 side.

[0055] The server 120 can be an independent physical server, a server cluster or a distributed system composed of multiple physical servers, or a cloud server providing cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN (Content Delivery Network), and basic cloud computing services such as big data and artificial intelligence platforms.

[0056] In addition, the server 120 can also be a node server in a blockchain network.

[0057] The terminal processor 110 and the server 120 can establish a communication connection through a wireless network. The wireless network uses standard communication technology and / or protocol, and the network can be set as the Internet, or any other network, for example, including but not limited to a local area network (LAN), a metropolitan area network (MAN), a wide area network (WAN), a mobile or wireless network, a private network, or any combination of virtual private networks. In addition, the same communication connection method or different communication connection method can be used between the above-mentioned software and hardware subjects, and the application does not make specific limitations.

[0058] Of course, it can be understood that Figure 1 The implementation environment in the above Figure 1 The software and hardware environment shown in the above, and the application does not make specific limitations.

[0059] As Figure 2 As Figure 2 is a flow diagram of a multi-window message sharing method provided by an embodiment of the application, and specifically includes but is not limited to steps S100 to S300.

[0060] Step S100, in response to a connection request of a target window, a shared thread SharedWorker between the target window is constructed and initialized.

[0061] In the embodiment of the application, the SharedWorker script can be encapsulated in the store of the application state management library Pinia in advance, and the SharedWorker script can be used to listen to whether there is a new browser window to initiate a connection request to the shared thread SharedWorker. When responding to the connection request of the target window, the initialization method already written in the SharedWorker script is executed, an information port is allocated to the target window, communication is performed through the information port, corresponding resources are initialized, and the shared thread SharedWorker between the target window is established.

[0062] Specifically, as an optional implementation, the shared thread SharedWorker between the target window is constructed and initialized in response to the connection request of the target window, including:

[0063] in response to a connection request of the target window, calling the SharedWorker script;

[0064] according to the SharedWorker script, constructing and initializing a SharedWorker instance between the target window;

[0065] sending initialization information to the shared thread SharedWorker through a message port between the target window and the shared thread SharedWorker, and starting the shared thread SharedWorker.

[0066] In the embodiments of the present application, the SharedWorker script is encapsulated in advance in the store of the application state management library Pinia, and the SharedWorker script listens whether there is a new browser window to initiate a connection request to the shared thread SharedWorker. When responding to the connection request of the target window, the SharedWorker script is called to construct and initialize a SharedWorker instance between the target window, and an information port is allocated to the target window, through which initialization information is sent to the shared thread SharedWorker, and the shared thread SharedWorker is started.

[0067] Exemplarily, the corresponding state management can be encapsulated in the SharedWorker script in advance, for example, worker: save the SharedWorker instance; messageHandlers: store the message processing function, which is convenient for dynamically expanding the processing logic; messagePool: used to store the messages that have not been processed; contentPool: used to store the broadcast messages, which is convenient for retransmission or persistence; wsConnectStatus and wsReConnectSuccessTimes: used to manage the connection state of WebSocket. Further, the SharedWorker instance can be initialized by introducing the pre-written SharedWorker.ts, the init method is called to determine the initialization resource, and the SharedWorker can also be registered to listen to the callback function when the SharedWorker receives the message. When the SharedWorker receives the message, this callback function will be automatically called, so as to process the received message.

[0068] Specifically, as an optional implementation, before the SharedWorker script is called in response to the connection request of the target window, it further includes:

[0069] The SharedWorker script is encapsulated in a store of an application state management library Pinia, wherein the SharedWorker script includes a store unique identifier, a state parameter, and an initialization SharedWorker instance method.

[0070] In the embodiments of the present application, Pinia, as a state management library of a Vue.js application, is used to pre-encapsulate a SharedWorker script in a core unit store, describe parameter variables by declaring states, and write methods (Actions) to process business logic.

[0071] In actual applications, the SharedWorker script includes a store unique identifier, a state parameter, and an initialization SharedWorker instance method (init method), and the init method is usually called when the store is created or when the SharedWorker needs to be initialized.

[0072] Further, the getGlobalParam() method for obtaining global parameters and returning global configuration information, and the method for creating a new information buffer pool to ensure that previous messages do not interfere with subsequent operations and clear the broadcast message pool can also be included.

[0073] In actual applications, when sending initialization information to the SharedWorker through a message port between the target window and the SharedWorker, deep copy (cloneDeep) can be used to ensure that the message object is a deep copy to avoid subsequent modifications affecting the original data. In the initialization information, the message type, message direction (for example, the message is transmitted from a tab page to a common part), and specific content information can be declared, and a message event listener can be added to the communication port of the SharedWorker.

[0074] Finally, the SharedWorker port is started by calling the start() method to allow bidirectional communication of information between the target window and the SharedWorker.

[0075] Step S200, call the pre-encapsulated WebSocket instance in the shared thread SharedWorker to build and initialize the WebSocket connection.

[0076] In the embodiments of the present application, by concentrating the communication logic of WebSocket in the SharedWorker, listening to the server information, each window shares the WebSocket data information by communicating with the SharedWorker, the resource consumption of WebSocket connection can be reduced in multiple browser windows or tabs, by sharing one WebSocket connection in multiple windows, the performance overhead caused by independent creation of WebSocket connection in each window can be avoided. Wherein, the WebSocket connection refers to the real-time communication connection between the window and the WebSocket server.

[0077] In actual application, the ws (WebSocket implemented class) file which has been encapsulated can be introduced by writing in the SharedWorker instance, and the WebSocket instance is initialized, the WebSocket connection is established, and the use of sending and receiving messages of the WebSocket server in the SharedWorker file is realized.

[0078] Specifically, as an optional implementation, before the WebSocket instance which has been encapsulated in the calling shared thread SharedWorker is constructed and initialized, the WebSocket connection is also included:

[0079] determining whether the target window has an initialized WebSocket instance and whether the WebSocket server has been successfully connected;

[0080] in the case that the WebSocket instance has been initialized successfully and the WebSocket server has been successfully connected, directly returning the information that the WebSocket connection has been initialized successfully;

[0081] in the case that the WebSocket instance has not been initialized successfully or the WebSocket server has not been successfully connected, calling the WebSocket instance which has been encapsulated in the shared thread SharedWorker to construct and initialize the WebSocket connection.

[0082] In the embodiment of the present application, in the shared thread SharedWorker, it is monitored whether there is a new browser window to initiate a connection request to the shared thread SharedWorker. When responding to the connection request of the target window, the SharedWorker script is called, the SharedWorker instance between the target window is constructed and initialized, and the information port of the target window is allocated. The initialization information is sent to the shared thread SharedWorker through the information port, and the shared thread SharedWorker is started. After starting the shared thread SharedWorker between the target window, the request of WebSocket connection is further initiated, and it is checked whether the WebSocket instance that has been successfully initialized exists in the SharedWorker instance and whether the WebSocket server has been successfully connected.

[0083] In actual application, through the globalInit(data) function of checking and initializing WebSocket connection, it is firstly confirmed whether the WebSocket instance exists and whether the WebSocket server has been connected. In the case that the WebSocket instance that has been successfully initialized exists and the WebSocket server has been successfully connected, the information of WebSocket connection initialization success (true) is directly returned.

[0084] In actual application, in the case that the WebSocket instance that has been successfully initialized does not exist or the WebSocket server has not been successfully connected, the WebSocket instance (ws file) that is encapsulated in advance is called. According to the initialization information, the WebSocket connection is constructed and initialized, the heartbeat detection mechanism and the reconnection mechanism of the WebSocket connection are started, and according to the returned status result, it is determined whether the WebSocket connection is successful, until the information of WebSocket connection initialization success is returned.

[0085] Specifically, as an optional implementation, the WebSocket instance includes initialization variable, constructor, initialization method, sending information method, receiving information method, verifying connection method, resetting heartbeat detection method, reconnection method and closing connection method.

[0086] In the embodiment of the present application, the WebSocket instance that is encapsulated in advance provided by the present application further includes initialization variable, constructor, initialization method, sending information method, receiving information method, verifying connection method, resetting heartbeat detection method, reconnection method and closing connection method.

[0087] Among them, the initialization variable can declare the lockReconnect variable for preventing multiple calls of the reconnection method; the url variable for the WebSocket connection URL; the closeByUser variable for judging whether the WebSocket connection is closed by the user; the timeoutInit variable for judging the timeout time of the WebSocket initialization connection; the timeout variable for declaring the time interval of the heartbeat detection (for example, sending a heartbeat every 3 seconds); the timeoutError variable for declaring that no server response is received within the time, which will trigger the reconnection; the heartTask variable for clearing the identification of the heartbeat timer; the initTimeoutTask variable for clearing the identification of the connection timeout timer; the reconnectTimeoutTask variable for clearing the identification of the reconnection timeout timer; the reconnectLimit variable for declaring the reconnection limit; the messageHandlers variable for declaring the information processing callback function; the HEARTBEAT_MESSAGE variable for the message format of the heartbeat detection; and the ACK_MESSAGE variable for the message format of the message confirmation.

[0088] Further, the constructor is used in cooperation with the initialization variable declared above, to build and initialize the WebSocket instance by receiving initialization information, and set the corresponding parameter variable.

[0089] Further, the initialization method can be used to initialize the WebSocket connection, and can include the processing method of the abnormal error, the processing method of the initialization connection timeout, the processing method when the WebSocket connection is closed (which can also be bound with the reconnection method), the processing method of starting the heartbeat detection mechanism when the WebSocket connection is successful, the processing method when the WebSocket receives the message, the processing method of the heartbeat response, the processing method of the ACK information, and the processing method of the ordinary information, that is, the processing method of various events.

[0090] In practical applications, a sending information method can also be written, i.e., a method for sending messages to a WebSocket server. First, the type of the message can be determined. If the message is not a heartbeat message, event information can be recorded, and then the message can be converted into a JSON string and sent. A receiving information method for processing received WebSocket messages can also be written. If the message body (body) exists, the message can be broadcast to other tabs or windows. A verification connection method is used to verify the validity of the WebSocket connection. A heartbeat message can be sent and a reconnection timer can be started. If no heartbeat response is received, reconnection can be triggered. A reset heartbeat detection method is used to reset the connection and heartbeat timer. When any message is received, it indicates that the current WebSocket connection is normal. The existing timer can be cleared and the heartbeat and reconnection detection can be restarted. A reconnection method is used to implement the WebSocket reconnection mechanism. If the number of reconnections exceeds the limit, the WebSocket connection can be closed. Otherwise, it can try to reinitialize the connection after a delay.

[0091] Finally, a close connection method can also be provided. The method can be used to manually close the WebSocket connection. If it is closed by the user, the flag information of the closeByUser variable can be adjusted to stop all timing tasks.

[0092] Therefore, by integrating a pre-packaged WebSocket instance in a SharedWorker, the application manages WebSocket connections by implementing heartbeat detection, automatic reconnection, error handling, and message delivery mechanisms, making the use of WebSockets more efficient and reliable.

[0093] Step S300, in the case where the shared thread SharedWorker and the WebSocket connection are successfully initialized, receiving WebSocket server push information shared by the shared thread SharedWorker.

[0094] In the embodiments of the present application, by using a shared thread SharedWorker as a hub between multiple browser windows, message transfer and distribution are realized. After the shared thread SharedWorker of the target window and the WebSocket connection are successfully initialized, the multi-window message sharing capability of the shared thread SharedWorker can be used to avoid the complexity of independent communication processing of each window, and messages can be quickly broadcasted between multiple windows, improving the message distribution efficiency and resource utilization. In addition, by using the unified encapsulation and connection management of WebSocket, the connection establishment, message sending / receiving, disconnection and reconnection logic are managed centrally. Inside the shared thread SharedWorker, a WebSocket instance is called to realize communication with the server side, avoiding the resource waste of independent creation of WebSocket by each window, optimizing system performance, and improving system stability and reliability.

[0095] Therefore, after the initialization of the shared thread SharedWorker and the WebSocket connection is completed, the target window can receive the push information issued by the WebSocket server through the WebSocket connection, and can also receive the information pushed by other windows shared by the shared thread SharedWorker.

[0096] Please refer to Figure 3 , Figure 3 is a framework diagram of a multi-window message sharing method provided by the embodiments of the present application. The view layer includes multiple windows, which can be used by different users. When the browser window is opened, a connection request can be initiated to the application state management library Pinia in the application state management layer, the shared thread SharedWorker in the warehouse of the application state management library is read, and the SharedWorker instance and the WebSocket instance are constructed to realize message sharing between multiple windows and real-time communication with the WebSocket server side.

[0097] That is, by using the multi-window message sharing method provided by the present application, the shared data and state synchronization between multiple browser windows and tabs can be realized, and the low-latency real-time communication between the client and the server can also be realized, which is suitable for online collaboration tools, real-time notification systems and state sharing and other application scenarios.

[0098] Specifically, as an optional embodiment, the method further comprises:

[0099] In the case that the shared thread SharedWorker is successfully initialized with the WebSocket connection, push information of the target window is uploaded to the shared thread SharedWorker, so that the shared thread SharedWorker forwards the push information of the target window to the WebSocket server.

[0100] In the embodiments of the present application, by using the shared thread SharedWorker as the hub between multiple browser windows, push information can also be uploaded by the target window to the shared thread SharedWorker, the shared thread SharedWorker determines the message type, and forwards the push information to the WebSocket server or broadcasts to other windows.

[0101] That is, whenever the shared thread SharedWorker receives a message, it can be distributed according to the message type and the message direction (for example, sent by a tab page to the public part). For example, when the WebSocket server pushes a message through WebSocket, the shared thread SharedWorker can distribute the push information to all windows that have built connections; when a window sends a message to the shared thread SharedWorker, the shared thread SharedWorker can identify the message direction, so that it can forward the message to the WebSocket server through the WebSocket connection, or broadcast the message to other windows by calling the broadcast function (for example, broadcast).

[0102] Specifically, as an optional implementation, the method further comprises:

[0103] The information port for connecting each window and the shared thread SharedWorker is managed by a weak reference weakref.

[0104] In the embodiments of the present application, each window establishes a connection with the shared thread SharedWorker through an information port, and the shared thread SharedWorker maintains a list containing all connected windows.

[0105] Wherein, the information port refers to MessagePort, a web function that allows messages to be passed between different contexts. However, the present application considers that there is no built-in mechanism to determine whether the MessagePort is still active, so the reference may accumulate over time, which may cause memory leakage.

[0106] Therefore, the application manages the information port for connection between each window and the shared thread SharedWorker by using WeakRef weak reference. Wherein, WeakRef allows to create a weak reference to an object, and the weak reference does not prevent the garbage collector from recycling the object, so it can be used to check whether the object has been garbage collected. That is, the application can check whether the message port has been garbage collected by using the weak reference weakref, thereby ensuring effective resource utilization.

[0107] Next, in combination with a specific application implementation process, the multi-window message sharing method provided in the application will be described in detail:

[0108] In the embodiment of the application, a multi-window message sharing method is provided, which can be applied to real-time collaboration applications and multi-window synchronization scenarios. The method uses SharedWorker to realize message sharing between multiple windows, and then concentrates the communication logic of WebSocket in SharedWorker. Not only can the WebSocket be used to connect to the server and establish a real-time communication channel, but also can effectively avoid the resource waste caused by independent creation of WebSocket by each window, effectively ensure the consistency and real-time of data, and significantly improve the user experience and system performance.

[0109] Specifically, the SharedWorker script can be encapsulated in the store of the application state management library Pinia in advance, and the SharedWorker script can be used to listen to whether there is a new browser window to initiate a connection request to the SharedWorker. When responding to the connection request of the target window, the initialization method written in the SharedWorker script in advance will be executed, an information port will be allocated to the target window, the target window will be communicated through the information port, the corresponding resources will be initialized, and the shared thread SharedWorker will be established between the target window.

[0110] Further, the corresponding state management can be encapsulated in the SharedWorker script in advance, the SharedWorker instance can be initialized by introducing the pre-written SharedWorker.ts, the init method can be called to determine the initialization resources, and the SharedWorker can be registered to listen to the callback function when the SharedWorker receives a message. When the SharedWorker receives a message, the callback function will be automatically called, so as to process the received message.

[0111] Among them, Pinia, a state management library for Vue.js applications, can be used to pre-package SharedWorker scripts in its core unit repository (store), describe parameter variables by declaring states, and write methods (Actions) to handle business logic.

[0112] In practical applications, the SharedWorker script includes a unique repository identifier, state parameters, and an initialization SharedWorker instance method (init method). The init method is usually called when the store is created or when the SharedWorker needs to be initialized.

[0113] Further, by centralizing the communication logic of WebSocket in SharedWorker and listening to server information, each window can share WebSocket data information by communicating with SharedWorker, reducing the resource consumption of WebSocket connection in multiple browser windows or tabs. By sharing a WebSocket connection through multiple windows, the performance overhead caused by independent creation of WebSocket connections for each window can be avoided.

[0114] In practical applications, the ws (WebSocket implementation class) file can be introduced and initialized in the SharedWorker instance to establish a WebSocket connection and achieve the use of WebSocket message sending and receiving in the SharedWorker file.

[0115] Further, the pre-packaged WebSocket instance provided by the present application also includes initialization variables, constructors, initialization methods, information sending methods, information receiving methods, connection verification methods, heartbeat detection reset methods, reconnection methods, and connection closing methods.

[0116] Further, by using SharedWorker as the hub between multiple browser windows, message relay and distribution are achieved. When the SharedWorker of the target window is successfully initialized with a WebSocket connection, the multi-window message sharing capability of the SharedWorker can be used to avoid the complexity of independent communication processing of each window, and messages can be quickly broadcasted between multiple windows, improving the message distribution efficiency and resource utilization. In addition, by using the unified encapsulation and connection management of WebSocket, the logic of connection establishment, message sending / receiving, disconnection and reconnection is centrally managed. Inside the SharedWorker, a WebSocket instance is called to implement communication with the server side, avoiding the resource waste of independent creation of WebSocket by each window, optimizing system performance, and improving system stability and reliability.

[0117] Optionally, each window establishes a connection with the SharedWorker through an information port, and the SharedWorker maintains a list containing all connected windows. The weak reference weakref can be used to check whether the message port has been garbage collected, thereby ensuring effective resource utilization and avoiding memory leaks.

[0118] Finally, by using SharedWorker as the hub between multiple browser windows, the target window can also upload push information to the SharedWorker, and the SharedWorker can determine the message type and forward the push information to the WebSocket server or broadcast it to other windows.

[0119] That is, when the SharedWorker receives a message, it can distribute it according to the message type and the message direction (e.g., from a tab page to the public part). For example, when the WebSocket server pushes a message through WebSocket, the SharedWorker can distribute the push information to all windows that have established connections. When a window sends a message to the SharedWorker, the SharedWorker can identify the message direction and forward the message to the WebSocket server through the WebSocket connection or broadcast it to other windows by calling a broadcast function (e.g., broadcast).

[0120] Please refer to Figure 4 , Figure 4 is a structural schematic diagram of a multi-window message sharing device provided by an embodiment of the present application. The embodiment of the present application also provides a multi-window message sharing device 400, which can implement the multi-window message sharing method described above. The device comprises:

[0121] The SharedWorker connection module 410 is configured to construct and initialize a shared thread SharedWorker with a target window in response to a connection request of the target window;

[0122] The WebSocket connection module 420 is configured to call a WebSocket instance pre-encapsulated in the shared thread SharedWorker to construct and initialize a WebSocket connection;

[0123] The information sharing module 430 is configured to receive WebSocket server push information shared by the SharedWorker in a case where the shared thread SharedWorker and the WebSocket connection are successfully initialized.

[0124] It can be understood that the content in the method embodiments is applicable to the device embodiments, the device embodiments specifically implement the same functions as the method embodiments, and achieve the same beneficial effects as the method embodiments.

[0125] Please refer to Figure 5 , Figure 5 is a hardware structure schematic diagram of an electronic device provided by an embodiment of the present application, and the electronic device comprises:

[0126] The processor 501 can be implemented in a general-purpose CPU (Central Processing Unit), a microprocessor, an ASIC (Application Specific Integrated Circuit), or one or more integrated circuits, and is configured to execute related programs to implement the technical solutions provided by the embodiments of the present application.

[0127] The memory 502 can be implemented in the form of a ROM (ReadOnly Memory), a static storage device, a dynamic storage device, or a RAM (Random Access Memory). The memory 502 can store an operating system and other application programs. When the technical solutions provided by the embodiments of the present application are implemented by software or firmware, the related program codes are stored in the memory 502 and are called and executed by the processor 501 to implement the multi-window message sharing method of the embodiments of the present application.

[0128] The input / output interface 503 is configured to realize information input and output.

[0129] The communication interface 504 is configured to realize the communication interaction between the device and other devices, and can realize the communication through a wired manner (for example, a USB, a network cable, or the like) or a wireless manner (for example, a mobile network, WIFI, Bluetooth, or the like).

[0130] The bus 505 is configured to transmit information between various components (for example, the processor 501, the memory 502, the input / output interface 503, and the communication interface 504) of the device.

[0131] The processor 501, the memory 502, the input / output interface 503, and the communication interface 504 are connected to each other through the bus 505.

[0132] The embodiment of the application further provides a computer readable storage medium, which stores a computer program. The computer program is executed by a processor to implement the multi-window message sharing method.

[0133] It can be understood that the content in the method embodiment is applicable to the storage medium embodiment, the function implemented by the storage medium embodiment is the same as that of the method embodiment, and the beneficial effects achieved by the storage medium embodiment are also the same as those achieved by the method embodiment.

[0134] The memory is a non-transitory computer readable storage medium, and can be used to store a non-transitory software program and a non-transitory computer executable program. In addition, the memory can include a high-speed random access memory, and can also include a non-transitory memory, for example, at least one magnetic disk storage device, a flash memory device, or other non-transitory solid-state memory device. In some embodiments, the memory can optionally include a memory remotely arranged relative to the processor, and the remote memory can be connected to the processor through a network. Examples of the network include but are not limited to the Internet, an intranet, a local area network, a mobile communication network, and a combination thereof.

[0135] The multi-window message sharing method, device, electronic equipment, and storage medium provided by the embodiment of the application can realize the message sharing between multiple windows by using a shared thread SharedWorker, and can further concentrate the communication logic of WebSocket in the shared thread SharedWorker. In this way, the WebSocket can not only be connected to a server to establish a real-time communication channel, but also can effectively avoid the resource waste caused by the independent creation of WebSocket in each window, effectively ensure the consistency and real-time performance of data, and significantly improve the user experience and system performance.

[0136] The embodiments described in the specification are for more clearly illustrating the technical solutions of the embodiments of the present application, and do not constitute a limitation on the technical solutions provided by the embodiments of the present application. Those skilled in the art can know that, with the evolution of technology and the appearance of new application scenarios, the technical solutions provided by the embodiments of the present application are also applicable to similar technical problems.

[0137] Those skilled in the art can understand that the technical solutions shown in the figures do not constitute a limitation on the embodiments of the present application, and can include more or fewer steps than shown in the figures, or combine certain steps, or different steps.

[0138] The device embodiments described above are merely illustrative, and units described as separate components can or can not be physically separated, i.e., can be located in one place, or can be distributed on multiple network units. Part or all of the modules can be selected according to actual needs to achieve the purpose of the embodiments of the present application.

[0139] Those skilled in the art can understand that all or some of the steps in the above disclosed method, the functions of the modules / units in the system and the device can be implemented as software, firmware, hardware and their appropriate combinations.

[0140] The terms "first", "second", "third", "fourth" and the like (if any) in the specification of the present application and the above-described drawings are used to distinguish similar objects, and do not necessarily have to be used to describe a specific order or sequence. It should be understood that the data thus used can be interchanged under appropriate circumstances, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "include" and "have" and any variations thereof are intended to cover non-exclusive inclusion, for example, a process, method, system, product or device including a series of steps or units does not have to be limited to those steps or units clearly listed, but can include other steps or units not clearly listed or inherent to these processes, methods, products or devices.

[0141] It should be understood that, in the application, "at least one" refers to one or more, and "multiple" refers to two or more. "And / or" is used to describe the association relationship of the associated objects, which means that there can be three relationships, for example, "A and / or B" can represent three cases of only A, only B, and A and B existing at the same time, wherein A and B can be singular or plural. The character " / " generally represents an "or" relationship between the associated objects before and after it. "At least one of the following" or similar expressions means any combination of these items, including any combination of single or multiple items. For example, at least one of a, b or c can represent a, b, c, "a and b", "a and c", "b and c", or "a and b and c", wherein a, b, and c can be single or multiple.

[0142] In several embodiments provided in the application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only illustrative, for example, the division of the above units is only a logical function division, and actual implementation can have another division manner, for example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the coupling or direct coupling or communication connection between the displayed or discussed units can be indirect coupling or communication connection through some interfaces, devices or units, which can be electrical, mechanical or other forms.

[0143] The units described above as separate components can or can not be physically separated, and the components shown as units can or can not be physical units, that is, they can be located in one place, or can be distributed on multiple network units. According to actual needs, part or all of the units can be selected to achieve the purpose of the embodiment scheme.

[0144] In addition, the functional units in each embodiment of the application can be integrated in one processing unit, or each unit can be physically present separately, or two or more units can be integrated in one unit. The integrated unit can be realized in the form of hardware or in the form of a software functional unit.

[0145] The integrated unit, if implemented in the form of a software function unit and sold or used as an independent product, can be stored in a computer readable storage medium. Based on such understanding, the technical solutions of the present application, essentially or in other words, the part that contributes to the prior art or the whole or part of the technical solutions can be embodied in the form of a software product. The computer software product is stored in a storage medium, and includes multiple instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods of the various embodiments of the present application. The aforementioned storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and various program storage media.

[0146] The preferred embodiments of the embodiments of the present application are described above with reference to the accompanying drawings, and are not limited to the scope of the embodiments of the present application. Any modifications, equivalent replacements and improvements made by those skilled in the art without departing from the scope and essence of the embodiments of the present application shall be within the scope of the embodiments of the present application.

Claims

1. A multi-window message sharing method, characterized by, The method comprises the following steps: In response to a connection request of a target window, a shared thread SharedWorker between the target window is constructed and initialized; A WebSocket instance pre-encapsulated in the shared thread SharedWorker is called to construct and initialize a WebSocket connection; In the case that the shared thread SharedWorker and the WebSocket connection are successfully initialized, WebSocket server push information shared by the shared thread SharedWorker is received. 2.The multi-window message sharing method of claim 1, wherein, The shared thread SharedWorker between the target window is constructed and initialized in response to a connection request of the target window, comprising: In response to a connection request of a target window, a SharedWorker script is called; According to the SharedWorker script, a SharedWorker instance between the target window is constructed and initialized; Initialization information is sent to the shared thread SharedWorker through a message port between the target window and the shared thread SharedWorker, and the shared thread SharedWorker is started. 3.The multi-window message sharing method of claim 2, wherein, Before the SharedWorker script is called in response to a connection request of a target window, it further comprises: The SharedWorker script is encapsulated in a repository of an application state management library Pinia, wherein the SharedWorker script comprises a repository unique identifier, a state parameter, and an initialization SharedWorker instance method. 4.The multi-window message sharing method of claim 1, wherein, Before the WebSocket instance pre-encapsulated in the shared thread SharedWorker is called to construct and initialize a WebSocket connection, it further comprises: It is determined whether the target window has an initialized WebSocket instance and whether the WebSocket server has been successfully connected; In the case that the initialized WebSocket instance exists and the WebSocket server has been successfully connected, information that the WebSocket connection is successfully initialized is directly returned; In the case that the initialized WebSocket instance does not exist or the WebSocket server has not been successfully connected, the WebSocket instance pre-encapsulated in the shared thread SharedWorker is called to construct and initialize the WebSocket connection.

5. The multi-window message sharing method of claim 4, wherein, The WebSocket instance pre-encapsulated in the shared thread SharedWorker is called to construct and initialize a WebSocket connection, comprising: The pre-encapsulated WebSocket instance is called to construct and initialize the WebSocket connection; A heartbeat detection mechanism and a reconnection mechanism of the WebSocket connection are started, and information that the WebSocket connection is successfully initialized is returned. 6.The multi-window message sharing method of claim 4, wherein, The WebSocket instance includes an initialization variable, a constructor, an initialization method, a sending information method, a receiving information method, a verifying connection method, a resetting heartbeat detection method, a reconnection method, and a closing connection method. 7.The multi-window message sharing method of claim 1, wherein, The method further includes: Information ports for connecting each window to the shared thread SharedWorker are managed by a weak reference weakref. 8.The multi-window message sharing method of claim 1, wherein, The method further includes: In the case that the shared thread SharedWorker and the WebSocket connection are successfully initialized, push information of the target window is uploaded to the shared thread SharedWorker, so that the shared thread SharedWorker forwards the push information of the target window to the WebSocket server.

9. A multi-window message sharing apparatus, characterized by, The device includes: A SharedWorker connection module, configured to, in response to a connection request of a target window, construct and initialize a shared thread SharedWorker between the target window; A WebSocket connection module, configured to call a WebSocket instance pre-encapsulated in the shared thread SharedWorker, and construct and initialize a WebSocket connection; An information sharing module, configured to, in the case that the shared thread SharedWorker and the WebSocket connection are successfully initialized, receive WebSocket server push information shared by the shared thread SharedWorker.

10. An electronic device, comprising: The electronic device includes a memory and a processor, the memory stores a computer program, and the processor implements the multi-window message sharing method in any one of claims 1 to 8 when executing the computer program.

11. A computer-readable storage medium storing a computer program, wherein the computer program comprises the following steps of: The computer program is executed by the processor to implement the multi-window message sharing method in any one of claims 1 to 8.

Images