Page state synchronization method, electronic device, and program product

Abstract

The present disclosure provides a page state synchronization method, an electronic device and a program product. The page state synchronization method of the present disclosure is applied to a first end in a page state synchronization system, the page state synchronization system further comprising a second end and a server; a first long connection is established between the server and the first end, and a second long connection is established between the server and the second end; the page state synchronization method comprises: the first end encodes an operation in a first page view locally to obtain a corresponding operation instruction, and sends the operation instruction to the server through the first long connection; the server forwards the received operation instruction to the second end through the second long connection; the second end identifies the corresponding operation from the received operation instruction, and executes the corresponding operation in a second page view locally to realize the page state synchronization between the second page view and the first page view.

Description

Technical Field

[0001] This disclosure relates to a page state synchronization method, electronic device, and program product. Background Technology

[0002] In current business operations and collaborations, online drafting and collaborative editing of contract documents has become a common and frequent business scenario. For example, in real estate transactions and leasing, business personnel need to synchronize contract content with clients in real time and confirm and modify each clause item by item.

[0003] Current cross-device document sharing and editing solutions fall into three categories: First, physical connection, where devices are directly connected to a large screen via data cables. This method is cumbersome and inconvenient, making it unsuitable for mobile work. Second, software-based screen mirroring, where third-party screen mirroring software mirrors the screen to a large screen. While this avoids the constraints of physical cables, its stability is highly dependent on the quality of the local area network and limited by the performance and authorization of third-party services. Third, real-time communication streaming, which transmits video streams to achieve cross-device document sharing, supports cross-regional online collaboration but suffers from high bandwidth costs, image quality is greatly affected by network fluctuations, and it can easily expose sensitive information on the editing desktop. Summary of the Invention

[0004] This disclosure provides a page state synchronization method, an electronic device, and a program product.

[0005] According to one aspect of this disclosure, a page state synchronization method is provided, applied to a first end of a page state synchronization system, the page state synchronization system further comprising a second end and a server, wherein the server establishes a first long connection with the first end and a second long connection with the second end; The page state synchronization method includes: Encode the corresponding operation instructions based on the operations performed in the local first page view; The operation instruction is sent to the server through the first long connection, so that the server forwards the operation instruction to the second end through the second long connection. The second end executes the corresponding operation in its local second page view according to the received operation instruction, thereby realizing the synchronization of page state between the second page view and the first page view.

[0006] According to one technical solution, only lightweight operation instructions are synchronized between the first and second ends, avoiding the occupation of computing resources of the first or second end by video encoding and decoding, which significantly reduces the device load and data transmission costs.

[0007] Furthermore, since the second end independently renders the second page view locally based on the operation command, the image clarity is not affected by network fluctuations. This not only achieves a high-fidelity, low-latency synchronous display effect, but also prevents the accidental exposure of irrelevant sensitive information (such as chat windows, email content, etc.).

[0008] According to at least one embodiment of the page state synchronization method of this disclosure, the operation is encoded based on the operation in the local first page view to obtain the corresponding operation instruction, including: In response to an operation in the first page view, the operation is sent to the native layer of the first end via a cross-layer communication interface; The native layer of the first end encodes the received operation to obtain the corresponding operation instruction, which contains a message identifier to identify the order in which the operations occur.

[0009] According to the technical solution of this embodiment, the isolation between the page layer and the native layer is broken down through a cross-layer communication interface, allowing operations in the page view to be seamlessly transmitted to the native layer for processing, fully utilizing the network communication capabilities and computing resources of the native layer. Furthermore, during the encoding stage, each operation instruction is assigned a unique message identifier that identifies the order in which operations occur, enabling the subsequent second-end to sort the received operation instructions based on this message identifier. Even if network instability causes operation instructions to arrive out of order, the second-end can still reconstruct the true order of operations, avoiding page state corruption.

[0010] According to at least one embodiment of the page state synchronization method of this disclosure, the operation is encoded based on the operation in the local first page view to obtain the corresponding operation instruction, including: Based on the operation in the local first page view, the operation type corresponding to the operation is determined, and the operation type includes instantaneous operation or continuous operation. If the operation type is determined to be an instantaneous operation, the operation is encoded immediately after the operation is detected to obtain the corresponding operation instruction. If the operation type is determined to be a continuous operation, the operation is encoded to obtain the corresponding operation instruction after the target time interval of the operation is detected.

[0011] According to the technical solution of this embodiment, an immediate encoding strategy is adopted for instantaneous operations, which ensures low-latency synchronization of key business operations such as page turning and text input, and meets users' psychological expectations for real-time response; while a target time interval throttling strategy is adopted for continuous operations, which avoids the massive number of operation instructions sent due to the generation of dozens of operation events per second during scrolling or zooming, and significantly reduces network bandwidth usage and server forwarding pressure.

[0012] According to at least one embodiment of the page state synchronization method of this disclosure, the page state synchronization method further includes: Retrieve the latest full page status from the server; Compare the retrieved full page state with the page state of the local first page view; If the comparison results are inconsistent, the page state of the local first page view is overwritten according to the full page state.

[0013] According to the technical solution of this embodiment, by fetching the full page state, an error correction opportunity is provided to the first end, ensuring that the page state of the first page view on the first end is aligned with the full page state recorded by the server, which significantly improves the reliability of page state synchronization.

[0014] According to at least one embodiment of the page state synchronization method of this disclosure, before encoding the corresponding operation instruction based on the operation in the local first page view, the page state synchronization method further includes: Based on the target document loaded in the local first page view, a page open instruction is generated, wherein the page open instruction includes the address information of the target document and the screen resolution of the first end; The page open instruction is sent to the server through the first long connection, so that the server forwards the page open instruction to the second end through the second long connection. The second end extracts the address information of the target document and the screen resolution from the received page open instruction, loads and displays the target document in the second page view according to the address information, and adjusts the display area of ​​the second page view according to the screen resolution.

[0015] According to the technical solution of this embodiment, by transmitting address information instead of the document file itself or a screenshot, it is ensured that the first and second ends load the same target document from the network. This not only avoids content differences caused by different local file versions, but also prevents the accidental exposure of irrelevant sensitive information.

[0016] According to one aspect of this disclosure, a page state synchronization method is provided, applied to a second end of a page state synchronization system, the page state synchronization system further comprising a first end and a server, wherein the server establishes a first long connection with the first end and a second long connection with the second end; The page state synchronization method includes: The first end receives an operation instruction forwarded by the server through the second long connection. The operation instruction is encoded by the first end based on the operation in its local first page view and sent to the server through the first long connection. The system identifies the corresponding operation from the received operation instruction and executes the operation in the local second page view, thereby synchronizing the page state between the second web page view and the first web page view.

[0017] According to one technical solution, only lightweight operation instructions are synchronized between the first and second ends, avoiding the occupation of computing resources of the first or second end by video encoding and decoding, which significantly reduces the device load and data transmission costs.

[0018] Furthermore, since the second end independently renders the second page view locally based on the operation command, the image clarity is not affected by network fluctuations. This not only achieves a high-fidelity, low-latency synchronous display effect, but also prevents the accidental exposure of irrelevant sensitive information (such as chat windows, email content, etc.).

[0019] According to at least one embodiment of the page state synchronization method of this disclosure, the corresponding operation is identified from the received operation instruction, and the operation is executed in the local second page view, including: The received operation instructions are stored in a temporary queue, and the stored operation instructions are sorted in the temporary queue according to the order of message identifiers. Operation instructions are read sequentially from the sorted temporary queue, and the read operation instructions are decoded to identify the corresponding operation; The operation is performed by calling the page update function within the local second-page view through the cross-layer communication interface.

[0020] According to the technical solution of this embodiment, the second end can effectively handle the message out-of-order problem caused by network jitter through a temporary queue and message identifier sorting mechanism. Even if the operation instructions arrive in reverse order during network transmission, the second end can restore the true order of the operations of the first end based on the message identifier, avoiding page state disorder caused by instruction out-of-order (such as changing from page turning before input to input before page turning), and ensuring the logical correctness of collaborative editing.

[0021] According to at least one embodiment of the page state synchronization method of this disclosure, the page state synchronization method further includes: Retrieve the latest full page status from the server; Compare the retrieved full page state with the page state of the local second page view; If the comparison results are inconsistent, the page state of the local second page view is overwritten according to the full page state.

[0022] According to the technical solution of this embodiment, by fetching the full page state, an error correction opportunity is provided to the second end, ensuring that even if intermediate instructions are lost, the page state of the second page view on the second end can be aligned with the full page state recorded by the server, which significantly improves the reliability of page state synchronization.

[0023] According to another aspect of this disclosure, a page state synchronization system is provided for performing a page state synchronization method as described in any embodiment of this disclosure, the page state synchronization system comprising a first end, a second end, and a server; A first long connection is established between the server and the first end, and a second long connection is established between the server and the second end.

[0024] According to another aspect of this disclosure, an electronic device is provided, comprising: a memory storing execution instructions; and a processor executing the execution instructions stored in the memory, such that the processor performs a page state synchronization method according to any embodiment of this disclosure.

[0025] According to another aspect of this disclosure, a readable storage medium is provided, wherein executable instructions are stored therein, which, when executed by a processor, are used to implement a page state synchronization method according to any embodiment of this disclosure.

[0026] According to another aspect of this disclosure, a computer program product is provided, including a computer program that, when executed by a processor, implements a page state synchronization method according to any embodiment of this disclosure. Attached Figure Description

[0027] The accompanying drawings illustrate exemplary embodiments of the present disclosure and, together with the description thereof, serve to explain the principles of the present disclosure. These drawings are included to provide a further understanding of the present disclosure and are incorporated in and constitute a part of this specification.

[0028] Figure 1 This is a schematic diagram of the architecture of a page state synchronization system according to one embodiment of the present disclosure.

[0029] Figure 2 This is a flowchart illustrating a page state synchronization method according to one embodiment of the present disclosure.

[0030] Figure 3 This is a flowchart illustrating step S210 of a page state synchronization method according to one embodiment of the present disclosure.

[0031] Figure 4This is a flowchart illustrating step S210 of a page state synchronization method according to another embodiment of the present disclosure.

[0032] Figure 5 This is a schematic diagram of the first-end page state synchronization process in a page state synchronization method according to one embodiment of the present disclosure.

[0033] Figure 6 This is a flowchart illustrating the process of opening a page view in a page state synchronization method according to one embodiment of the present disclosure.

[0034] Figure 7 This is a flowchart illustrating a page state synchronization method according to another embodiment of the present disclosure.

[0035] Figure 8 This is a flowchart illustrating the execution of operation instructions by the second end in a page state synchronization method according to one embodiment of the present disclosure.

[0036] Figure 9 This is a schematic diagram of the second-end page state synchronization process in a page state synchronization method according to one embodiment of the present disclosure.

[0037] Figure 10 This is a flowchart illustrating a page state synchronization method according to another embodiment of the present disclosure.

[0038] Figure 11 This is a schematic structural block diagram of a page state synchronization device according to one embodiment of the present disclosure.

[0039] Figure 12 This is a schematic structural block diagram of a page state synchronization device according to another embodiment of the present disclosure.

[0040] Figure 13 This is a schematic structural block diagram of an electronic device according to one embodiment of the present disclosure. Detailed Implementation

[0041] The present disclosure will now be described in further detail with reference to the accompanying drawings and examples. It should be understood that the specific examples described herein are for illustrative purposes only and are not intended to limit the scope of the disclosure. Furthermore, it should be noted that, for ease of description, only the parts relevant to the present disclosure are shown in the accompanying drawings.

[0042] It should be noted that, where there is no conflict, the embodiments and features described in this disclosure can be combined with each other. The technical solutions of this disclosure will now be described in detail with reference to the accompanying drawings and embodiments.

[0043] Existing technologies struggle to achieve real-time collaborative editing and synchronized display of cross-platform document content while ensuring low cost, high definition, and high privacy and security.

[0044] To this end, the present disclosure proposes the following technical solution, wherein the operation in the local first page view is encoded into an operation instruction by the first end (such as a terminal device for editing a document) and sent to the server via a long connection. Then, the server forwards the operation instruction to the second end (such as a terminal device for displaying a document) via the long connection. The second end parses the received operation instruction and executes the corresponding operation in its local second page view, thereby realizing the synchronization of page state between the first page view and the second page view.

[0045] In this way, only lightweight operation instructions are synchronized between the first and second ends, avoiding the occupation of computing resources of the first or second end by video encoding and decoding, which significantly reduces the device load and data transmission costs.

[0046] Furthermore, since the second end independently renders the second page view locally based on the operation command, the image clarity is not affected by network fluctuations. This not only achieves a high-fidelity, low-latency synchronous display effect, but also prevents the accidental exposure of irrelevant sensitive information (such as chat windows, email content, etc.).

[0047] Figure 1 This is a schematic diagram of the architecture of a page state synchronization system according to one embodiment of the present disclosure.

[0048] like Figure 1 As shown, the page state synchronization system includes a first terminal 101, a second terminal 102, and a server 103. A first long connection is established between the first terminal 101 and the server 103, and a second long connection is established between the second terminal 102 and the server 103. These first and second long connections are used to enable bidirectional real-time data transmission between the first terminal 101 and the server 103, and between the second terminal 102 and the server 103. Preferably, the first or second long connection is established based on the WebSocket protocol.

[0049] For example, the first terminal 101 acts as an editing terminal (such as a smartphone, computer, or other terminal device used by business personnel), and it has a first page view open locally, which loads a target document (such as a business contract). The first terminal 101 listens for user operation events in the first page view. When the user performs operations such as page turning, scrolling, inputting, or zooming in the first page view, the first terminal 101 encodes the user's operation in the first page view into a corresponding operation instruction and sends the operation instruction to the server 103 through a first long connection.

[0050] Server 103 acts as a data relay center (such as a centralized service node deployed in the cloud), responsible for maintaining the first long connection and the second long connection between the server 101 and the server 102. Specifically, server 103 forwards operation instructions received via the first long connection to the server 102 via the second long connection.

[0051] The second end 102 serves as a display end (such as a smartphone, computer, large-screen terminal, or other terminal device used by the client for viewing). The second end 102 has a second page view open locally, which loads the same target document. When the second end 102 receives an operation command, it parses the received operation command, identifies the corresponding operation, and executes it in the second page view, thereby achieving page state synchronization between the second page view and the first page view.

[0052] Figure 2 This is a flowchart illustrating a page state synchronization method according to one embodiment of the present disclosure. This page state synchronization method is applied to the first end of a page state synchronization system as described above.

[0053] like Figure 2 As shown, the page state synchronization method preferably includes steps S210 to S220.

[0054] In step S210, the operation is encoded according to the operation in the local first page view to obtain the corresponding operation instruction.

[0055] In this implementation, the first page view is a WebView component running within the native application on the first side. This first page view is used to load and display the target document page. In other implementations, the page view can also be a UI (User Interface) component built into the native application, without any special limitations.

[0056] The operation refers to the specific interactive behavior that the user performs on the target document in the first page view, including but not limited to page turning, scrolling, text input, zooming, clicking, etc.

[0057] In this implementation, when a user performs an operation in the first page view on the first terminal, the first terminal encodes the detected operation to obtain the corresponding standardized instruction object (i.e., operation instruction).

[0058] In step S220, the operation instruction is sent to the server through the first long connection, so that the server forwards the operation instruction to the second end through the second long connection. The second end performs the corresponding operation in its local second page view according to the received operation instruction, thereby realizing the synchronization of page state between the second page view and the first page view.

[0059] The second page view is a Webview component running within the native application on the second end, used to load and display the same target document as the first end.

[0060] In this implementation, the first end sends the encoded operation command to the server through an established first long connection. Upon receiving the operation command, the server parses it to determine the corresponding receiving end information. Based on this receiving end information, the server queries its maintained connection mapping relationship to determine the second end corresponding to the first end. Then, through a second long connection established with the second end, the operation command is forwarded to the second end in real time, ensuring that the operation command can be accurately and with low latency delivered from the editing end (i.e., the first end) to the display end (i.e., the second end).

[0061] After receiving the operation instruction through the second long connection, the second end decodes the operation instruction, identifies the corresponding operation, and executes the operation in the second page view on the local side of the second end, thereby realizing the synchronization of page state between the second page view and the first page view.

[0062] Thus, in the page state synchronization method disclosed herein, only lightweight operation instructions are synchronized between the first and second ends, avoiding the occupation of computing resources of the first or second end by video encoding and decoding, and significantly reducing device load and data transmission costs.

[0063] Furthermore, since the second end independently renders the second page view locally based on the operation command, the image clarity is not affected by network fluctuations. This not only achieves a high-fidelity, low-latency synchronous display effect, but also prevents the accidental exposure of irrelevant sensitive information (such as chat windows, email content, etc.).

[0064] In some embodiments of this disclosure, step S210, encoding the operation in the local first page view to obtain the corresponding operation instruction, preferably includes steps S310 to S320. Please refer to [link / reference needed]. Figure 3 .

[0065] In step S310, in response to an operation in the local first page view, the operation is sent to the native layer of the first end via a cross-layer communication interface.

[0066] In step S320, the native layer of the first end encodes the received operation to obtain the corresponding operation instruction, which includes a message identifier for identifying the order in which the operations occur.

[0067] Among them, the native layer of the first end is the local code layer of the native application of the first end, which is responsible for managing Webview components, maintaining network connections, and handling business logic coding, etc.

[0068] The cross-layer communication interface serves as a communication bridge between the page layer and the native code, enabling bidirectional data transfer between the web container (i.e., the first page view) and the native container (i.e., the native layer). Preferably, this cross-layer communication interface is a JavaScript bridge interface.

[0069] In this implementation, the first page view listens for user operation events in real time. When an operation event is detected, the first page view (such as JavaScript code in the first page view) generates a notification message corresponding to the operation event. Preferably, the notification message includes the operation type and the corresponding operation parameters.

[0070] Next, the first page view sends the notification message of the operation event to the native layer on the first end through the pre-injected cross-layer communication interface. After receiving the notification message, the native layer on the first end parses the notification message to obtain the corresponding operation type and operation parameters. Then, it encodes the operation type and operation parameters into a standardized instruction object and assigns a unique and auto-incrementing message identifier to the standardized instruction object.

[0071] It should be noted that this message identifier can be used to identify the order in which operations occur. Preferably, the native layer at the first end maintains a global auto-incrementing counter, with an initial value of 1. Each time a new operation instruction is generated, the native layer assigns the current value of the global auto-incrementing counter to the message identifier (msgId) field of that operation instruction, and then increments the global auto-incrementing counter by 1. This ensures that the message identifier is unique and monotonically increasing, accurately reflecting the order in which operations occur even when different types or a large number of operation instructions are sent together.

[0072] Therefore, by using a cross-layer communication interface, the isolation between the page layer and the native layer is broken down, allowing operations in the page view to be seamlessly transmitted to the native layer for processing, fully utilizing the network communication capabilities and computing resources of the native layer. Furthermore, during the encoding phase, each operation instruction is assigned a unique message identifier that identifies the order in which operations occur, enabling the second-end to sort the received operation instructions based on this message identifier. Even if network instability causes operation instructions to arrive out of order, the second-end can still reconstruct the true order of operations, avoiding page state corruption.

[0073] In other embodiments of this disclosure, step S210, encoding the operation in the local first page view to obtain the corresponding operation instruction, preferably includes steps S410 to S420. Please refer to [link / reference needed]. Figure 4 .

[0074] In step S410, the operation type corresponding to the operation is determined based on the operation in the local first page view. The operation type includes instantaneous operation or continuous operation.

[0075] In step S420, if the operation type is determined to be an instantaneous operation, the operation is encoded immediately after the operation is detected to obtain the corresponding operation instruction. If the operation type is determined to be a continuous operation, the operation is encoded to obtain the corresponding operation instruction after the target time interval of the operation is detected.

[0076] The operation type is a classification of user operations based on their triggering characteristics and duration.

[0077] Preferably, the operation types include instantaneous operations and continuous operations. Instantaneous operations are those that are completed immediately after being triggered and do not have continuous intermediate states, such as page turning (clicking once to jump to a new page) and text input (single character input). Continuous operations are those that may last for a period of time after being triggered and produce continuous intermediate states, such as scrolling (the position changes continuously during finger dragging) and zooming (the display ratio changes continuously during two-finger pinching).

[0078] In this implementation, after receiving a notification message of an operation event transmitted from a cross-layer communication interface (such as a JavaScript bridge interface), the first native layer determines whether the operation is an instantaneous operation or a continuous operation based on the operation type parsed from the notification message. For example, if the parsed operation is page turning, it can be determined as an instantaneous operation; if the parsed operation is scrolling, it can be determined as a continuous operation.

[0079] If the operation type is determined to be an instantaneous operation, the first-end native layer immediately encodes the operation to obtain the corresponding operation instruction.

[0080] When the operation type is determined to be a continuous operation, the first-end native layer encodes the operation to obtain the corresponding operation instruction after detecting the target time interval of the operation. Preferably, when the operation type is determined to be a continuous operation, the first-end native layer starts a timer. During the continuous operation, the first-end native layer continuously updates the temporary state in memory (such as the current scroll displacement or scaling ratio). When the operation stops or the target time interval (e.g., 300ms) is reached, the first-end native layer records the final scroll displacement or scaling ratio and encodes the corresponding operation instruction based on this.

[0081] Preferably, if the operation continues within the target time interval, the first native layer can reset the timer or continue to update the final state to ensure that the generated operation instruction contains the stable state value after the operation ends.

[0082] Therefore, an immediate encoding strategy is adopted for instantaneous operations, ensuring low-latency synchronization of critical business operations such as page turning and text input, and meeting users' expectations for real-time response; while a target time interval throttling strategy is adopted for continuous operations, avoiding the sending of massive operation instructions due to the generation of dozens of operation events per second during scrolling or zooming, which significantly reduces network bandwidth usage and server forwarding pressure.

[0083] Preferably, when the second end receives an operation instruction of continuous operation type, it smoothly scrolls to the target position or scales to the corresponding ratio through a certain period of animation when performing the corresponding operation, so as to avoid abrupt changes in the page state.

[0084] In some embodiments of this disclosure, the page state synchronization method preferably further includes steps S510 to S530, please refer to... Figure 5 .

[0085] In step S510, the latest full page state is retrieved from the server.

[0086] In step S520, the retrieved full page state is compared with the page state of the local first page view.

[0087] In step S530, when the comparison results are inconsistent, the page state of the local first page view is overwritten according to the full page state.

[0088] The full page state refers to the state information recorded by the server that can completely describe the current page view state. Preferably, the full page state includes state data such as the current page number, scroll position coordinates, zoom level, and the input content of all form fields.

[0089] The local page state of the first end is obtained by gradually updating the first end based on the sent operation instructions, and is used to reflect the current page state of the first page view of the first end.

[0090] In this implementation, the first end initiates a timed task to send a heartbeat packet to the server at preset time intervals (e.g., every 10 seconds). This heartbeat packet is used not only to maintain the activity of the long connection but also as a trigger signal to retrieve the full page state. After receiving the heartbeat packet, the server queries the latest stored full page state and returns it as heartbeat response data to the first end that initiated the request through the first long connection.

[0091] After receiving the full page status returned by the server through the first long connection, the native layer at the first end compares the full page status with its own local page status.

[0092] Preferably, the first end iterates through each field value in the full page state and compares it one by one with the corresponding field values ​​in the locally recorded page state. For example, it checks whether the current page number in the full page state is equal to the current page number recorded in the local page state, whether the scroll position coordinates are consistent with the scroll position coordinates recorded in the local page state, or whether the form data in the full page state is the same as the form data recorded locally. If all field values ​​are consistent, the first end can determine that the page state synchronization is normal. If any field value is different, the comparison result can be determined to be inconsistent, indicating that there may have been command loss, out-of-order execution, or execution failure during the previous operation command transmission process.

[0093] If the comparison results are inconsistent, the first end overwrites the local page state with the full page state. Specifically, the first end discards the locally maintained page state and directly uses the values ​​from the full page state returned by the server to update the field values ​​of the local page state.

[0094] In this way, by periodically fetching the full page state, the first-end is given the opportunity to correct errors, ensuring that the page state on the first-end is aligned with the full page state recorded by the server, which significantly improves the reliability of page state synchronization.

[0095] Preferably, while forwarding operation instructions, the server updates its stored status fields according to the content of the operation instructions (e.g., if an operation instruction for turning pages is received, the current page number field is updated; if an operation instruction for scrolling is received, the scroll position coordinates are updated), thereby obtaining the latest full page status.

[0096] In some embodiments of this disclosure, before encoding the corresponding operation instruction based on the operation in the local first page view, the page state synchronization method of this disclosure preferably further includes steps S610 to S620. Please refer to [link / reference]. Figure 6 .

[0097] In step S610, a page open instruction is generated based on the target document loaded in the local first page view, wherein the page open instruction includes the address information of the target document and the screen resolution of the first end.

[0098] In step S620, the page open instruction is sent to the server through the first long connection, so that the server forwards the page open instruction to the second end through the second long connection. The second end extracts the address information of the target document and the screen resolution from the received page open instruction, loads and displays the target document in the second page view according to the address information, and adjusts the display area of ​​the second page view according to the screen resolution.

[0099] The target document is the document that requires collaborative editing. Preferably, the target document exists in the form of an H5 page and is accessed through its address information (such as a Uniform Resource Locator).

[0100] In this implementation, the first native layer responds to the user's (e.g., business personnel) operation of opening the target document by launching the first page view, and loads and displays the target document in the first page view using the target document's address information.

[0101] Next, the first-end native layer encapsulates the target document's address information and the first-end's screen resolution to obtain the corresponding page open instruction. This page open instruction is then sent to the server via a pre-established first long connection, and the server forwards the instruction to the corresponding second-end via a second long connection.

[0102] Upon receiving the page open command, the second end extracts the target document's address information and the first end's screen resolution from the command. The second end then launches a local second page view and loads and displays the target document in this view based on the extracted address information. Subsequently, the second end calculates the scaling ratio based on the extracted screen resolution and proportionally scales or adjusts the display area of ​​the second page view to ensure that the target document's layout, pagination, and display ratio remain consistent with the first end, preventing distortion or incomplete display of the target document content.

[0103] In this way, by transmitting address information instead of the document file itself or a screenshot, it ensures that the first and second ends are loading the same target document from the network. This not only avoids content discrepancies caused by different local file versions but also prevents the accidental exposure of irrelevant sensitive information.

[0104] Furthermore, by transmitting the screen resolution of the first end and guiding the second end to adjust the display area, the display problem caused by differences in screen sizes of different terminal devices is solved. The second end can scale proportionally according to the resolution of the first end, ensuring that the display ratio and pagination position of the target document content on the second end are consistent with those on the first end, thus improving the visual experience on the second end and the accuracy of business confirmation.

[0105] Figure 7 This is a flowchart illustrating a page state synchronization method according to another embodiment of the present disclosure. This page state synchronization method is applied to the second end of the page state synchronization system as described above.

[0106] like Figure 7 As shown, the page state method preferably includes steps S710 to S720.

[0107] In step S710, an operation instruction forwarded by the server through the second long connection is received. The operation instruction is encoded by the first end based on the operation in its local first page view and sent to the server through the first long connection.

[0108] In step S720, the corresponding operation is identified from the received operation instruction, and the operation is executed in the local second page view to achieve page state synchronization between the second web page view and the first web page view.

[0109] In this embodiment, when the second end receives the operation instruction forwarded by the server through the second long connection, it decodes the operation instruction and identifies the corresponding operation. Then, the second end executes the operation in its local second page view, thereby realizing the synchronization of page state between the second page view and the first page view.

[0110] In some embodiments of this disclosure, the corresponding operation is identified from the received operation instruction and the operation is executed in the local second page view, preferably including steps S810 to S830. Please refer to [link / reference]. Figure 8 .

[0111] In step S810, the received operation instructions are stored in a temporary queue, and the stored operation instructions are sorted in the temporary queue according to the order of message identifiers.

[0112] In step S820, operation instructions are read sequentially from the sorted temporary queue, and the read operation instructions are decoded to identify the corresponding operation.

[0113] In step S830, the operation is performed by calling the page update function in the local second page view through the cross-layer communication interface.

[0114] The temporary queue is a first-in-first-out or sortable data structure maintained by the second-end native layer, used to temporarily store received operation instructions.

[0115] A page update function is a predefined, callable unit of program logic used to perform specific page state change operations (such as page turning, scrolling, input, zooming, etc.). Preferably, the page update function is a JavaScript function.

[0116] In this implementation, the native layer at the second end maintains a temporary queue. When it receives an operation instruction forwarded by the server through the second long connection, the native layer at the second end stores the operation instruction in the temporary queue. Furthermore, it sorts each operation instruction in the temporary queue according to the message identifier in each operation instruction (e.g., sorting in ascending order of message identifier), thereby eliminating out-of-order problems caused by network transmission.

[0117] After sorting, the second end reads and decodes the operation instructions sequentially (i.e., in ascending order of message identifiers) from the sorted temporary queue to obtain the corresponding operation type and parameters. The native layer of the second end then uses the decoded operation type and parameters to pass them to the page update function within the second page view via the cross-layer communication interface, whereby the page update function executes the corresponding operation.

[0118] For example, if the operation type is pagination, the page update function controls the second page view to jump to the specified page number; if the operation type is scrolling, the page update function controls the second page view to scroll to the specified position.

[0119] Thus, through a temporary queue and message identifier sorting mechanism, the second end can effectively handle message out-of-order issues caused by network jitter. Even if the operation commands arrive in reverse order during network transmission, the second end can still restore the true order of operations from the first end based on the message identifiers, avoiding page state confusion caused by command out-of-order (e.g., changing from page turning before input to input before page turning), ensuring the logical correctness of collaborative editing. Furthermore, through a strict sorting and decoding execution process, it is ensured that every page state update of the second page view on the second end strictly corresponds to the operation intent of the first end. Combined with a local independent rendering mechanism, the image clarity on the second end is unaffected by network fluctuations, always maintaining the highest clarity of native rendering, achieving high-fidelity page state synchronization.

[0120] In some embodiments of this disclosure, the page state synchronization method preferably further includes steps S910 to S930, please refer to... Figure 9 .

[0121] In step S910, the latest full page state is retrieved from the server.

[0122] In step S920, the retrieved full page state is compared with the page state of the local second page view.

[0123] In step S930, when the comparison results are inconsistent, the page state of the local second page view is overwritten according to the full page state.

[0124] The page state of the second page is obtained by the second end through gradual updates based on the received and executed operation instructions, and is used to reflect the current page state of the second page view on the second end.

[0125] In this implementation, similar to the first end fetching the full page state, the second end periodically fetches the latest full page state from the server. Specifically, the second end starts a timed task to send a heartbeat packet to the server at preset time intervals (e.g., every 10 seconds). This heartbeat packet is used not only to maintain the activity of the long connection but also as a trigger signal to fetch the full page state. After receiving the heartbeat packet, the server queries the latest stored full page state and returns it as heartbeat response data to the second end that initiated the request through the second long connection.

[0126] After receiving the full page state returned by the server through the second long connection, the native layer on the second end compares this full page state with its own local page state. If the comparison result is inconsistent, the second end overwrites its local page state with the full page state.

[0127] In this way, by periodically fetching the full page state, an error correction opportunity is provided to the second end, ensuring that even if operation instructions are lost, the page state of the second end can be aligned with the full page state recorded by the server, which significantly improves the reliability of page state synchronization.

[0128] Figure 10 This is a flowchart illustrating a page state synchronization method according to another embodiment of the present disclosure.

[0129] like Figure 10 As shown, the page state synchronization method preferably includes steps S1001 to S1011.

[0130] In step S1001, a first long connection is established. After the native application on the first end starts, it actively initiates a long connection establishment request to the server. The server accepts the request and maintains the first long connection for real-time transmission of subsequent instructions (including page opening instructions and operation instructions).

[0131] In step S1002, a second long connection is established. After the native application on the second end starts, it also establishes an independent second long connection with the server. The server records the connection mapping relationship between the two ends to prepare for subsequent command routing.

[0132] In step S1003, the first end sends a page open instruction to the server. When a business user opens a document page on the first end, the native layer of the first end generates a page open instruction, which includes the address information of the target document and the screen resolution of the first end, and sends the page open instruction to the server through the established first long connection.

[0133] In step S1004, the server forwards the page open command. The server forwards the received page open command to the second end through the second long connection.

[0134] In step S1005, the second end starts the second page view, loads the target document, and adjusts the resolution. The native layer of the second end parses the address information in the page open instruction, starts the local second page view, loads the same target document, and simultaneously scales the display area of ​​the second page view proportionally according to the screen resolution of the first end in the page open instruction, ensuring that the content of the target document is displayed completely and proportionally in the second page view.

[0135] In step S1006, the first terminal encodes the user operation to obtain an operation instruction containing a message identifier. When a business user performs an operation (such as page turning, scrolling, or inputting) in the first page view, the first terminal captures the operation, encodes it into an operation instruction, and assigns a unique and auto-incrementing message identifier (msgId) to each operation instruction to identify the order in which the operations occur.

[0136] In step S1007, the first end sends the operation command to the server through the first long connection.

[0137] In step S1008, the server forwards the received operation instructions to the second end through the second long connection.

[0138] In step S1009, the second end stores the received operation instructions into a temporary queue and sorts them. The native layer of the second end puts the operation instructions into the temporary queue and sorts the operation instructions in the temporary queue in ascending order according to the message identifier carried by each operation instruction, so as to eliminate out-of-order problems that may be caused by network transmission.

[0139] In step S1010, the second end consumes operation instructions in sequence and decodes the operation instructions to obtain the corresponding operations. The native layer of the second end retrieves operation instructions from the temporary queue in sorted order and parses out the operation type and operation parameters (such as the target page number for page turning, the target coordinates for scrolling, etc.).

[0140] In step S1011, the second end performs an operation through the JavaScript bridge interface (i.e., the aforementioned cross-layer communication interface) to update the second page view. The second end's native layer, based on the decoded operation type and parameters, calls the JavaScript function (i.e., the aforementioned page update function) in the second page view through the JavaScript bridge interface, driving the page to perform corresponding updates (such as scrolling to a specified position, page navigation, etc.), thereby achieving synchronization with the page state of the first end. For continuous operations such as scrolling and zooming, animation is used to simulate smooth transitions during execution to enhance the visual experience.

[0141] Figure 11 This is a schematic structural block diagram of a page state synchronization device according to one embodiment of the present disclosure. The page state synchronization device is applied in the first end of the page state synchronization system as described above.

[0142] like Figure 11 As shown, the page state synchronization device includes an encoding module 1110 and a sending module 1120. Specifically, the encoding module 1110 is used to encode the operation in the local first page view to obtain the corresponding operation instruction; the sending module 1120 is used to send the operation instruction to the server through the first long connection, so that the server forwards the operation instruction to the second end through the second long connection, and the second end executes the corresponding operation in its local second page view according to the received operation instruction, thereby realizing the page state synchronization between the second page view and the first page view.

[0143] In some embodiments of this disclosure, the sending module 1120 is further configured to: retrieve the latest full page state from the server; compare the retrieved full page state with the page state of the local first page view; and, if the comparison results are inconsistent, overwrite the page state of the local first page view according to the full page state.

[0144] In some embodiments of this disclosure, before encoding the operation based on the operation in the local first page view to obtain the corresponding operation instruction, the sending module 1120 is further configured to: generate a page open instruction based on the target document loaded in the local first page view, wherein the page open instruction includes the address information of the target document and the screen resolution of the first end; and send the page open instruction to the server through the first long connection, so that the server forwards the page open instruction to the second end through the second long connection, the second end extracts the address information of the target document and the screen resolution from the received page open instruction, loads and displays the target document in the second page view according to the address information, and adjusts the display area of ​​the second page view according to the screen resolution.

[0145] Figure 12 This is a schematic structural block diagram of a page state device according to another embodiment of the present disclosure. This page state synchronization device is applied in the second end of the page state synchronization system as described above.

[0146] like Figure 12 As shown, the page state synchronization device includes a receiving module 1210 and a processing module 1220. Specifically, the receiving module 1210 is used to receive operation instructions forwarded by the server through the second long connection. The operation instructions are encoded by the first end based on the operation in its local first page view and sent to the server through the first long connection. The processing module 1220 is used to identify the corresponding operation from the received operation instructions and execute the operation in its local second page view, thereby realizing page state synchronization between the second webpage view and the first webpage view.

[0147] In some embodiments of this disclosure, the processing module 1220 is further configured to: retrieve the latest full page state from the server; compare the retrieved full page state with the page state of the local second page view; and, if the comparison results are inconsistent, overwrite the page state of the local second page view according to the full page state.

[0148] Figure 13 This is a schematic structural block diagram of an electronic device according to one embodiment of the present disclosure.

[0149] like Figure 13As shown, the hardware architecture of an electronic device can be implemented using a bus architecture. The bus architecture can include any number of interconnect buses and bridges, depending on the specific application and overall design constraints of the hardware. Bus 1100 connects various circuits including one or more processors 1200, memory 1300, and / or hardware modules. Bus 1100 can also connect various other circuits 1400 such as peripherals, voltage regulators, power management circuits, external antennas, etc. Bus 1100 can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Component (EISA) bus, etc. Buses can be categorized as address buses, data buses, control buses, etc. For ease of illustration, only one connection line is used in this figure, but this does not indicate that there is only one bus or one type of bus.

[0150] This disclosure also provides a readable storage medium storing a computer program that, when executed by a processor, is used to implement the methods described above. A "readable storage medium" can be any means that can contain a program for storage, communication, propagation, or transmission for use by or in conjunction with an instruction execution system, apparatus, or device. More specific examples of a readable storage medium include: an electrical connection with one or more wires (electronic device), a portable computer disk drive (magnetic device), random access memory (RAM), read-only memory (ROM), erasable and programmable read-only memory (EPROM or flash memory), fiber optic devices, and portable read-only memory (CDROM), etc.

[0151] This disclosure also provides a computer program product, the methods of which can be implemented wholly or partially through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented wholly or partially as a computer program product. The computer program product includes one or more computer programs or instructions. When the computer program or instructions are loaded and executed, all or part of the processes or functions of this disclosure are performed.

[0152] Computer programs or instructions can be stored in a readable storage medium or transferred from one readable storage medium to another. For example, the computer program or instructions can be transferred from one website, computer, server, or data center to another website, computer, server, or data center via wired or wireless means. The readable storage medium can be any available medium capable of access, or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium, such as a floppy disk, hard disk, or magnetic tape; an optical medium, such as a digital video optical disc; or a semiconductor medium, such as a solid-state drive. The computer-readable storage medium can be a volatile or non-volatile storage medium, or it can include both volatile and non-volatile types of storage media.

[0153] Those skilled in the art will understand that embodiments of this disclosure can be provided as methods, systems, or computer program products. Therefore, this disclosure can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this disclosure can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0154] This disclosure is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to this disclosure. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0155] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0156] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0157] In the description of this specification, the references to terms such as "one embodiment / mode," "some embodiments / modes," "example," "specific example," or "some examples," etc., refer to specific features, structures, or characteristics described in connection with that embodiment / mode or example, which are included in at least one embodiment / mode or example of this disclosure. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment / mode or example. Moreover, the specific features, structures, or characteristics described may be combined in any suitable manner in one or more embodiments / modes or examples. Furthermore, without contradiction, those skilled in the art can combine and integrate the different embodiments / modes or examples described in this specification, as well as the features of different embodiments / modes or examples.

[0158] Those skilled in the art should understand that the above embodiments are merely for illustrating the present disclosure and are not intended to limit the scope of the disclosure. Those skilled in the art can make other changes or modifications based on the above disclosure, and these changes or modifications still fall within the scope of the present disclosure.

Claims

1. A method for synchronizing page state, characterized in that, The first end is applied to the page state synchronization system. The page state synchronization system also includes a second end and a server. The server establishes a first long connection with the first end and a second long connection with the second end. The page state synchronization method includes: Encode the corresponding operation instructions based on the operations performed in the local first page view; as well as The operation instruction is sent to the server through the first long connection, so that the server forwards the operation instruction to the second end through the second long connection. The second end executes the corresponding operation in its local second page view according to the received operation instruction, thereby realizing the synchronization of page state between the second page view and the first page view.

2. The page state synchronization method as described in claim 1, characterized in that, The corresponding operation instructions are obtained by encoding the operations performed in the local first page view, including: In response to an operation in the first page view, the operation is sent to the native layer of the first end via a cross-layer communication interface; and The native layer of the first end encodes the received operation to obtain the corresponding operation instruction, which contains a message identifier to identify the order in which the operations occur.

3. The page state synchronization method as described in claim 1, characterized in that, The corresponding operation instructions are obtained by encoding the operations performed in the local first page view, including: Based on the operation performed in the local first page view, the operation type corresponding to the operation is determined, and the operation type includes instantaneous operation or continuous operation; and If the operation type is determined to be an instantaneous operation, the operation is encoded immediately after the operation is detected to obtain the corresponding operation instruction. If the operation type is determined to be a continuous operation, the operation is encoded to obtain the corresponding operation instruction after the target time interval of the operation is detected.

4. The page state synchronization method as described in claim 1, characterized in that, The page state synchronization method also includes: Retrieve the latest full page status from the server; Compare the retrieved full page state with the page state of the local first page view; and If the comparison results are inconsistent, the page state of the local first page view is overwritten according to the full page state.

5. The page state synchronization method as described in any one of claims 1-4, characterized in that, Before encoding the corresponding operation instructions based on the operations in the local first page view, the page state synchronization method further includes: Based on the target document loaded in the local first page view, a page open instruction is generated, wherein the page open instruction includes the address information of the target document and the screen resolution of the first end; and The page open instruction is sent to the server through the first long connection, so that the server forwards the page open instruction to the second end through the second long connection. The second end extracts the address information of the target document and the screen resolution from the received page open instruction, loads and displays the target document in the second page view according to the address information, and adjusts the display area of ​​the second page view according to the screen resolution.

6. A method for synchronizing page state, characterized in that, The second end is applied to the page state synchronization system, which also includes a first end and a server. The server establishes a first long connection with the first end and a second long connection with the second end. The page state synchronization method includes: The first end receives an operation instruction forwarded by the server through the second long connection. The operation instruction is encoded by the first end based on the operation in its local first page view and sent to the server through the first long connection. as well as The system identifies the corresponding operation from the received operation instruction and executes the operation in the local second page view, thereby synchronizing the page state between the second page view and the first page view.

7. The page state synchronization method as described in claim 6, characterized in that, Identify the corresponding operation from the received operation instruction and execute the operation in the local second page view, including: The received operation instructions are stored in a temporary queue, and the stored operation instructions are sorted in the temporary queue according to the order of message identifiers. Operation instructions are read sequentially from the sorted temporary queue, and the read operation instructions are decoded to identify the corresponding operations; and The operation is performed by calling the page update function within the local second-page view through the cross-layer communication interface.

8. The page state synchronization method as described in claim 6 or 7, characterized in that, The page state synchronization method also includes: Retrieve the latest full page status from the server; Compare the retrieved full page state with the page state of the local second page view; and If the comparison results are inconsistent, the page state of the local second page view is overwritten according to the full page state.

9. An electronic device, characterized in that, include: The memory stores execution instructions; as well as A processor that executes execution instructions stored in the memory, causing the processor to perform the page state synchronization method according to any one of claims 1-8.

10. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by the processor, it implements the page state synchronization method according to any one of claims 1 to 8.

Images