Page data processing method and device, computer equipment, product and storage medium
By generating a static second page with the same display style as the first page, and monitoring and synchronously triggering operations, the problem of data inconsistency between the two ends is solved, the operation convenience is improved and the learning cost is reduced.
Patent Information
- Application Number
- CN202510246070.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-02-28
- Publication Date
- 2025-09-23
AI Technical Summary
Existing technologies cannot guarantee data consistency on both ends when performing complex operations or using an application for the first time, resulting in a long learning curve. Traditional voice or screenshot assistance methods also have problems with understanding bias and cumbersome operations.
By receiving the page data of the first terminal, generating a static second page with the same display style as the first page, and monitoring the trigger operation on the second page, sending the event data to the first terminal to update the first page, ensuring the consistency of the page data on both ends.
It achieves consistency of data on both ends of the page, improves operational convenience, and reduces learning costs.
Smart Images
Figure CN120687319A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of computer technology, and in particular to a page data processing method, apparatus, computer equipment, product, and storage medium (computer-readable storage medium). Background Art
[0002] As applications become increasingly user-friendly, they are striving to improve user convenience by providing visual demonstrations. Currently, these demonstrations are primarily conducted through screenshots or voice communication. However, for complex operations or first-time users of applications, these methods require a significant learning curve because they cannot guarantee data consistency on both ends. Summary of the Invention
[0003] In response to the above technical problems, embodiments of the present application provide a page data processing method, apparatus, computer equipment, product, and storage medium.
[0004] In a first aspect, an embodiment of the present application provides a page data processing method, comprising:
[0005] receiving page data of a first page of a first terminal;
[0006] processing the page data according to the type of the page data to generate a second page, wherein the second page has the same display style as the first page and is a static page;
[0007] A trigger operation on the second page is monitored, and first event data of the trigger operation is sent to the first terminal, so as to update the first page according to the first event data.
[0008] In a second aspect, an embodiment of the present application provides a page data processing system, the system comprising a first terminal and a second terminal in communication connection; wherein,
[0009] The first terminal is configured to synchronize page data of the first page to the second terminal;
[0010] The second terminal is configured to receive page data of the first page from the first terminal;
[0011] a second terminal, configured to process the page data according to a type of the page data to generate a second page, wherein the second page has the same display style as the first page and is a static page;
[0012] a second terminal, configured to monitor a trigger operation on the second page, and send first event data of the trigger operation to the first terminal, so as to update the first page according to the first event data;
[0013] The first terminal is configured to restore the triggering operation on the first page according to the event data.
[0014] In a third aspect, an embodiment of the present application provides a page data processing device, comprising:
[0015] A first synchronization module, configured to receive page data of a first page of a first terminal;
[0016] a page generating module, configured to process the page data according to the type of the page data to generate a second page, wherein the second page has the same display style as the first page and is a static page;
[0017] The second synchronization module is configured to monitor a trigger operation on the second page, and send first event data of the trigger operation to the first terminal, so as to update the first page according to the first event data.
[0018] In a fourth aspect, an embodiment of the present application further provides a computer device, comprising a memory storing a plurality of instructions; a processor loading instructions from the memory to execute the steps of any one of the page data processing methods provided in the embodiment of the present application.
[0019] In a fifth aspect, an embodiment of the present application further provides a computer program product, including a computer program or instructions, which, when executed by a processor, implements the steps of any page data processing method provided in the embodiment of the present application.
[0020] In a sixth aspect, an embodiment of the present application further provides a computer-readable storage medium, which stores a plurality of instructions suitable for loading by a processor to execute the steps of any one of the page data processing methods provided in the embodiment of the present application.
[0021] The solution of the embodiment of the application is first received to receive the page data of the first page of the first terminal; then the page data is processed according to the type of the page data to generate a second page, wherein the second page has the same display style as the first page and the second page is a static page; finally, the trigger operation on the second page is monitored, and the first event data of the trigger operation is sent to the first terminal to update the first page according to the first event data. In the embodiment of the present application, the page data to be synchronized sent by the first terminal is received to generate a static second page, the trigger operation performed on the second page is monitored and synchronized to the first terminal. Since the second page is a static page, the second page will not change due to the operation, and the change of the second page can only be transmitted by the first terminal, thereby ensuring the consistency of the page data on both ends. At the same time, the user corresponding to the first terminal can restore the trigger operation on the first page according to the received event data to update the first page, which improves the convenience of operation and reduces the learning cost. BRIEF DESCRIPTION OF THE DRAWINGS
[0022] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present application. For those skilled in the art, other drawings can be obtained based on these drawings without creative work.
[0023] Figure 1 Schematic diagram of the application environment of the page data processing method provided in the embodiment of the present application;
[0024] Figure 2 This is a flow chart of an embodiment of a method for processing page data provided in an embodiment of the present application;
[0025] Figure 3 This is a schematic diagram of a scenario of the page data processing method provided in an embodiment of the present application;
[0026] Figure 4 This is a schematic diagram of a scenario page of the page data processing method provided in an embodiment of the present application;
[0027] Figure 5 This is a flow chart of another embodiment of the page data processing method provided in the embodiments of the present application;
[0028] Figure 6 This is another schematic diagram of a scenario page of the page data processing method provided in an embodiment of the present application;
[0029] Figure 7 1 is a flow chart of another embodiment of the method for processing page data provided in the embodiments of the present application;
[0030] Figure 8 This is a schematic diagram of another scenario page of the page data processing method provided in the embodiment of the present application;
[0031] Figure 9 This is a schematic diagram of a scenario of a page data processing system provided in an embodiment of the present application;
[0032] Figure 10 is a structural diagram of a page data processing device provided in an embodiment of the present application;
[0033] Figure 11 It is a schematic diagram of the internal structure of the computer device provided in the embodiment of the present application. DETAILED DESCRIPTION
[0034] The technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without making creative work are within the scope of protection of this application. At the same time, in the description of the embodiments of the present application, the terms "first", "second", etc. are only used to distinguish the descriptions and cannot be understood as indicating or implying relative importance. Thus, the features defined as "first" and "second" may explicitly or implicitly include one or more features. In the description of the embodiments of the present application, the meaning of "multiple" is two or more, unless otherwise clearly and specifically defined.
[0035] In one embodiment of the present application, the page data processing method can be run on a local terminal device or a server. When the page data processing method is run on a server, the method can be implemented and executed based on a cloud page data processing system, wherein the page data processing system includes a client service terminal device and a client device.
[0036] In order to better understand the page data processing method, device, electronic device and storage medium provided in the embodiments of the present application, the application environment applicable to the embodiments of the present application is described below.
[0037] See also Figure 1 , Figure 1 A schematic diagram of an application environment of the page data processing method provided by an embodiment of the present application is shown. As an implementation method, the page data processing method provided by the embodiment of the present application is applied to an electronic device. The electronic device may be Figure 1The server 110 shown in FIG. 1 can be connected to the terminal device 120 via a network. The network is used to provide a medium for a communication link between the server 110 and the terminal device 120. The network can include various connection types, such as wired communication links, wireless communication links, etc., which are not limited in the embodiments of the present application. Alternatively, in other embodiments, the electronic device can also be a smartphone, a laptop computer, etc.
[0038] It should be understood that Figure 1 The server 110, network, and terminal device 120 are merely illustrative. Any number of servers, networks, and terminal devices may be provided as needed. For example, the server 110 may be a physical server or a server cluster consisting of multiple servers, and the terminal device 120 may be a mobile phone, tablet, desktop computer, laptop computer, or the like. It will be appreciated that embodiments of the present application may also allow multiple terminal devices 120 to access the server 110 simultaneously.
[0039] The following is a detailed description of each step in conjunction with the accompanying drawings. In this embodiment, the execution subject is a terminal device. It should be noted that the order in which the following embodiments are described does not limit the preferred order of the embodiments. Although the flowcharts illustrate a logical order, in some cases, the steps shown or described may be performed in a different order than that shown in the accompanying drawings.
[0040] Due to the complex business scenarios of finance, insurance, trust, etc., users lack sufficient knowledge reserves and are unable to complete the information filling independently. They need the assistance of the corresponding account manager of the customer service end of the corresponding business.
[0041] Traditional assistance methods include voice or screenshots, but each has its own difficulties or problems:
[0042] Method 1: Voice communication: There may be some misunderstanding or cognitive deviations between the two parties;
[0043] Method 2: Screenshot communication: cumbersome operation and time-consuming communication;
[0044] Some related technologies provide demonstrations of accessing web pages and performing page operations, specifically:
[0045] a. The client and the customer service client access the same website, and the website establishes a connection with the server to send messages;
[0046] b. All operations performed by the client are transmitted to the client through the server, and vice versa.
[0047] c. After the client obtains the operation behavior, it uses the event data to simulate the client's operation behavior and sends it to the client so that the client can learn.
[0048] However, since the client and the client are essentially accessing different web pages, and one side is simply mimicking the operations performed by the other side on the page, operational issues still exist, including:
[0049] Problem 1: The web pages of both parties cannot be guaranteed to be completely consistent. Specifically:
[0050] First, the pages are different due to the logic of the web page code, for example:
[0051] Click a button on the web page. The button will determine whether the user is logged in to decide whether to jump to the login page or handle business. The customer manager corresponding to the customer service end will jump to the business processing page after clicking the button because he has logged in. The client will enter the login page after clicking because it is the first time to log in.
[0052] Second, because the network environments accessed by both parties are different, there are differences in network speeds. For example:
[0053] The client's network speed is good, and it clicks button a to enter page A. Then it clicks button b on page A to enter page B. However, the client's network speed is poor, and it receives a message to click button a, but has not yet successfully entered page A. At this time, it receives a message to click button b, but because page A has not yet loaded, it ultimately fails to enter page B.
[0054] In weak network conditions, various abnormal situations such as message loss and confusion may occur during the reception, which may lead to inconsistencies between the pages of both parties.
[0055] Problem 2: There is no dual-end page synchronization mechanism, that is, both parties do not know whether there are inconsistencies in the pages, and if the pages are inconsistent, there is no synchronization function to convert the pages of both parties to be consistent.
[0056] Based on the description of the above related technologies, the technical solution of the present application is proposed to serve the ability to realize the business scenario; the biggest difference between the technical solution of the present application and the solutions of the related technologies is that the page on one end (the customer service end) is copied from the page on the other end (the client end), which can ensure that the two ends are displayed completely consistent when the network is good, and in the case of inconsistent pages caused by network abnormalities, compared with the general solution, there is also a way to synchronize the pages of both parties to be consistent after the network is restored. Specifically, the technical solution of the embodiment of the present application, please refer to Figure 2 The specific process of the page data processing method can be as follows: Step 201 to Step 203, wherein:
[0057] Step 201: Receive page data of a first page from a first terminal.
[0058] Taking the above-mentioned business scenarios of finance, insurance, trust, etc. as an example, the page data processing method in the embodiment of the present application is used at the customer service end (or also called the second terminal).
[0059] The client service end receives page data of the first page to be synchronized sent by the first terminal, wherein the first terminal is the client and the first page data is the page displayed in the client, for example, the first page is a financial information filling page displayed on the client.
[0060] During the process of the client (or also called the first terminal) user filling in the materials, when the client user lacks sufficient knowledge reserves and is unable to complete the filling in the materials independently, the client sends the page data of the first page to the customer service terminal, so that the customer service terminal generates a second page with the same display style as the first page based on the received page data. In the embodiment of the present application, the same display style of the first page and the second page means that the page content seen by the user is the same, but whether the functions of each page display element in the first page and the second page are the same is not limited in the embodiment of the present application.
[0061] The content of the page data in the embodiment of the present application is not specifically limited. For example, the page data can be divided into full page data and incremental page data according to type, wherein:
[0062] The full page data is the data of the entire page sent by the client to the client service end. The full page data includes the page structure data of the first page. In order to reduce the amount of data synchronization, the page structure data in the embodiment of the present application is mainly static page data, and dynamic page data may not be synchronized. In the embodiment of the present application, the static page data includes: page structure data and page style data, etc., wherein the page structure data can be the nodes in the first page, and the association relationship between each node; the page style data includes: parameters such as the size and color of the display elements included in the first page.
[0063] The incremental page data client sends updated page data to the client service end. The incremental page data includes event data collected by the first page on the client. The event data in the embodiment of the present application includes the event name, event triggering time, event triggering method, etc.
[0064] Reference Figure 3 , Figure 3 : This is a schematic diagram of a scenario of the page data processing method provided in an embodiment of the present application. In the embodiment of the present application, before the client receives the page data of the first page synchronized by the client, the client needs to trigger page synchronization. Specifically, the triggering method of page synchronization in the embodiment of the present application is not limited, for example:
[0065] 1. The client synchronizes page data for the first time:
[0066] a. The client calls the recording function of rrweb (record and replay the web) and sends the full page data of the first page to the client. The full page data refers to everything in the first page, but does not include any JavaScript code, because JavaScript will cause page operations on both ends to change differently due to different environments.
[0067] b. The client uses rrweb to monitor all changes to the first page, rather than just operations. The reason for not using the general solution of monitoring operations is that operations can cause page changes, but page changes aren't limited to operations; JavaScript can also cause page changes. For example, an order number might be displayed somewhere on the page. This order number is obtained by calling an API with JavaScript to generate a randomly generated string of numbers, which is then modified using JavaScript to display the page. If the general solution is used, each client will execute JavaScript to display different order numbers, making it impossible to ensure page consistency on both ends.
[0068] 2. Client updates synchronization page data:
[0069] a. rrweb monitors page changes on the client side, collects event data related to the page change, and sends it to the client side as incremental page data. In the embodiment of the present application, since only the event data of the change is collected, the full amount of page data required for initial page synchronization is much smaller, which reduces network consumption and improves data processing efficiency.
[0070] b. Send the incremental page data related to the changes to the client.
[0071] For example, in the embodiment of the present application, the client monitors page changes, collects them and sends them to the client in real time to ensure subsequent page synchronization, which can be subdivided into the following items:
[0072] Listen to the scroll event and record every scroll of the page at a frequency of 100 milliseconds, completing the comprehensive monitoring of all scrolling behaviors of the page.
[0073] By using the browser API Object.get Own Property Descriptor, the value, checked, selected Index and selected attributes of the INPUT, TEXTAREA and SELECT elements (form elements) are monitored to achieve real-time monitoring of user input.
[0074] Perform proxy hijacking on the browser function insert Rule to monitor CSS changes.
[0075] By using the browser API Mutation Observer, it is possible to monitor the addition or deletion of DOM nodes and changes in the properties of existing nodes.
[0076] In the embodiment of the present application, the client server receives the page data of the first page sent by the first terminal, and generates a page according to the page data to ensure that the pages on both ends are consistent. Specifically:
[0077] Step 202: Process the page data according to the type of the page data to generate a second page, wherein the second page has the same display style as the first page and is a static page.
[0078] In the embodiment of the present application, after the customer service end receives the page data sent by the client, the customer service end parses the page data to generate a second page. The display style of the second page is the same as that of the first page to ensure that dual-end page synchronization is achieved. In the embodiment of the present application, the same display style indicates that the generated second page has the same page structure as the first page to be synchronized sent by the first terminal, and the display elements in the same page structure are the same. The same display elements refer to the same shape, color, position, etc. of the page elements.
[0079] It should be noted that, in the embodiment of the present application, the same display style can be understood as the same page seen by the user. The same display style does not limit whether the functions of the display elements in the page are the same. For example, the first page includes display element A, and the function of display element A is to access the server to modify the data in the server; at the same time, the second page also includes display element A, and the function of display element A is to enter the simulation page, and the simulation page displays the modification information.
[0080] Specifically, the client service end obtains the type of the page data, and processes the page data according to the type of the page data to generate a static page, wherein:
[0081] Implementation method 1: In the embodiment of the present application, the customer service end determines that the type of page data is full page data, and the customer service end extracts static page data from the full page data, wherein the static page data includes page structure data and page style data. The customer service end generates a page based on the static page data to obtain a static second page.
[0082] Implementation method two: In the embodiment of the present application, the customer service end determines that the type of page data is incremental page data, and the customer service end extracts event data from the incremental page data, wherein the event data includes event name, event trigger information, event occurrence time, etc. The customer service end updates the generated historical page according to the event data to obtain a static second page.
[0083] Continue to refer to Figure 3 In the embodiments of the present application, an example of how the client generates static pages is given.
[0084] For the full page data, in the embodiment of the present application, after receiving the full page data, the client client will use the playback function of rrweb: first, a container is constructed to isolate the data to avoid conflicts with existing data; the type of container in the embodiment of the present application is not limited, and the iframe container is used as an example for illustration. The client client converts each node in the tree data structure into a corresponding DOM node and gradually builds a DOM tree; finally, through document.write, the DOM tree is rendered into the iframe according to the display style of the static page data to form a static visual second page.
[0085] For incremental page data, in the embodiment of the present application, the client service end will perform a monitoring operation on the DOM tree generated based on the incremental page data, and update the historical page according to the event data corresponding to the monitored triggering operation to obtain the second page, ensuring that subsequent pages can be updated synchronously.
[0086] In the embodiments of the present application, the events monitored by the client end are not limited. Events are those triggered by the user, such as mouse or keyboard events; or generated by an API to indicate the progress of an asynchronous task; events can also be triggered programmatically, such as calling the HTML Element.click() method on an element, or defining some custom events and then using the EventTarget.dispatchEvent() method to dispatch the custom events to a specified target; for example,
[0087] Monitors events including Mouse Up, Mouse Down, Click, Context Menu, Dbl Click, Focus, Blur, and Touch Start, Touch End, and Touch Cancel on the touch screen, enabling comprehensive monitoring of mouse and touch behaviors.
[0088] Listen to the scroll event and record every scroll of the page at a frequency of 100 milliseconds, completing the comprehensive monitoring of all scrolling behaviors of the page.
[0089] By using the browser API Object.get Own Property Descriptor, the value, checked, selected Index, and selected attributes of the INPUT, TEXTAREA, and SELECT elements are monitored, achieving real-time monitoring of user input.
[0090] In the embodiment of the present application, the client service end processes the page data according to the type of page data and generates a static second page with the same display style as the first page. Since the second page is a static page, the second page will not change due to operations. Changes to the second page can only be transmitted by the first terminal, thereby ensuring the consistency of page data on both ends, allowing the client service end to operate on the second page and synchronize the operations to the client.
[0091] Step 203: monitor a trigger operation on the second page, and send first event data of the trigger operation to the first terminal, so as to update the first page according to the first event data.
[0092] In the embodiment of the present application, the customer service end monitors the trigger operation of the second page. When the customer service end monitors the trigger operation of the second page, the customer service end transmits the operation behavior to the client, and the client simulates the operation behavior, and the client then synchronizes the page changes to the customer service end.
[0093] It can be understood that in the embodiment of the present application, the second page generated by the customer service end monitors the operation behavior. The reason for monitoring the operation behavior rather than the page change here is that the static second page will not change due to the operation. In the embodiment of the present application, the page change can only be transmitted by the client, thereby ensuring the synchronization of the pages on both the client and the customer service end.
[0094] In the technical solution in the embodiment of the present application, the second page is a static page and will not respond to operations, but the second page has the function of collecting user operation data, that is, by monitoring the trigger operation in the second page, collecting the first event data of the trigger operation, and sending the first event data to the first terminal, so that the user corresponding to the first terminal updates the first page according to the first event information.
[0095] In the embodiment of the present application, the customer service end monitors the trigger operation of the second page, but the second page is a static page and has no script node. The trigger operation will not cause the second page to change. The customer service end converts the behavior information of the trigger operation into event data and transmits it to the client, so that the client can restore the trigger operation.
[0096] For example, in the embodiment of the present application, the second page carries a script node and the operation behavior activates the script node associated with it, and the page is updated in a predetermined manner, realizing the interface change expected by the user. The specific steps are:
[0097] Operation trigger: The customer manager corresponding to the customer service end triggers specific operation behavior based on the second page.
[0098] Script response: The script node associated with the operation behavior in the second page receives a trigger signal;
[0099] Logic processing: The processing logic in the script node in the second page is executed. The logic in the second page defines how the operation behavior affects the page.
[0100] In the embodiment of the present application, the customer service end performs a page update operation based on the execution result of the script logic to reflect the expected changes after the second page trigger operation. In the embodiment of the present application, the second page is a static page. After the trigger operation, the second page is updated for a short period of time to ensure that the account manager's operation is finally presented on the page of the customer service end, so as to facilitate sending it to the client to simulate the trigger operation; the update of the second page caused by the trigger operation of the customer service end in the embodiment of the present application will not always present the record, and the update of the second page can only be synchronized with the client, that is, the page data of the first page of the first terminal is received, and the second page is updated according to the page data.
[0101] In the embodiment of the present application, the page data to be synchronized sent by the first terminal is received to generate a static second page, the trigger operation performed on the second page is monitored and synchronized to the first terminal. Since the second page is a static page, the second page will not change due to the operation. The change of the second page can only be transmitted by the first terminal, thereby ensuring the consistency of the page data on both ends. At the same time, the user corresponding to the first terminal can restore the trigger operation on the first page according to the synchronized event data, which improves the convenience of operation and reduces the learning cost.
[0102] In one embodiment of the present application, the client service calls a synchronization interface to create a container in response to a synchronization operation. The container is created in the embodiment of the present application for data isolation. For example, the container created by calling the synchronization interface in the embodiment of the present application is an inline frame iframe.
[0103] Reference Figure 4 , Figure 4 This is a schematic diagram of a scenario page of the page data processing method provided in an embodiment of the present application. Figure 4 The left side shows the first page in the client, and the right side shows the container generated by the customer service end. In the embodiment of the present application, the container generated by the customer service end can achieve data isolation and facilitate page data synchronization operations. Figure 4 The blank area corresponding to the container shown is the same size as the area of the first page, but it has no effect if the blank area corresponding to the container is of different sizes from the area of the first page. That is, the area size corresponding to the container in the embodiment of the present application can be set according to the specific scenario, and the embodiment of the present application is not limited.
[0104] After creating the container in the embodiment of the present application, the client will inject the second page generated by the container based on the page data. Figure 5 , Figure 5 : is a flow chart of another embodiment of the method for processing page data provided in the embodiments of the present application; in one embodiment implemented in the present application, processing the page data according to the type of the page data to generate a second page includes:
[0105] Step 301: If the page data is full page data, the full page data is parsed to obtain static page data.
[0106] In the embodiment of the present application, after the customer service end receives the page data, the customer service end determines that the page data is full page data, the customer service end parses the full page data, and extracts static page data from the full page data, wherein the static page data is the page structure data and page style data of the first page, the page structure data includes page nodes, and the relationship between page nodes, the page nodes can be nodes corresponding to parts such as the page title, website logo, header, navigation bar, main content area and footer; the page style data is the display color of the page, the shape of the page elements, etc.
[0107] Step 302: inject the static page data into the container to generate a second page.
[0108] In the embodiment of the present application, the client service injects the extracted static page data into the container to generate a second page, wherein the static page data in the embodiment of the present application includes page structure data and page style data; injecting the static page data into the container to generate the second page includes:
[0109] 1. Generate an initial page structure in the container according to the page structure data;
[0110] 2. Inject the page style data into the page initial structure according to its data type to generate the second page.
[0111] That is, the customer service end first extracts the page structure data describing the page structure from the static data to generate the initial structure of the page, and then extracts the page style data from the static page data and injects it into the container according to the style type to generate the second page. In the embodiment of the present application, the display style of the second page is ensured to be consistent with the display style of the first page.
[0112] In the embodiment of the present application, after the client receives the full page data, the client can also create a separate iframe by calling the play function of rrweb to ensure internal and external data isolation, and then use DOM operations to convert the data into a second page on the client. This second page is a static page because it does not contain the JavaScript code of the client page.
[0113] parameter Figure 6 , Figure 6 This is a schematic diagram of another scenario page of the page data processing method provided in an embodiment of the present application. Figure 6 The left side shows the first page in the client, and the right side shows the second page generated by the customer service end. Figure 6 The second page shown has the same area size as the first page, but the area sizes of the second page and the first page can be different but the proportions can be the same. That is, the size of the second page in the embodiment of the present application can be set according to the specific scenario, and the embodiment of the present application is not limited.
[0114] In the embodiment of the present application, the client service extracts static page data based on the full page data to generate a second page, which can ensure the consistency of the second page with the first page. Similarly, the second page is a static page to facilitate subsequent operation demonstrations.
[0115] Reference Figure 7 , Figure 7 : is a flow chart of another embodiment of the method for processing page data provided in the embodiments of the present application; in one embodiment, processing the page data according to the type of the page data to generate the second page further includes:
[0116] Step 401: If the page data is incremental page data, the incremental page data is parsed to obtain second event data, where the second event data is an event generated by a triggering operation on the first page.
[0117] In the embodiment of the present application, the page data received by the customer service end is incremental page data, and the customer service end parses the incremental page data to obtain event data.
[0118] It can be understood that, that is, the incremental page data obtained by the client server in the embodiment of the present application is synchronized with the client, that is, the client monitors the trigger operation of the first page, and the client sends the event information of the event generated by the trigger operation on the first page to the customer service end, so that the customer service end parses the event information and obtains event data.
[0119] Step 402 : Perform event playback in the container according to the time sequence of the second event data to update the history page generated in the container to obtain the second page.
[0120] In the embodiment of the present application, the client terminal obtains the time sequence of the event data, and the client terminal replays the event in the container according to the time sequence to update the historical page generated in the container to obtain the second page; specifically,
[0121] The client of the embodiment of the present application compares the time sequence of the event data with the time sequence of the historical pages;
[0122] If the time sequence of the event data does not match the time sequence of the historical pages, the customer service end performs a waiting operation; or the customer service end sends the time sequence information of the historical pages to the client, so that the client can feedback the corresponding event data; or if the customer service end does not receive the event information sent by the client within the set time period, the customer service end sends a page synchronization request to the client, so that the client can feedback the full page data of the first page.
[0123] If the time sequence of the event data matches the time sequence of the historical pages, that is, the time sequence in the event data is the latter time sequence of the historical page data, the customer service end replays the event corresponding to the event data in the container to update the historical pages in the container and obtain a second page; in the embodiment of the present application, the customer service end updates the historical pages in the container according to the time sequence of the event data, which can reduce the amount of data transmission while ensuring the synchronization efficiency of the pages.
[0124] Reference Figure 8 , Figure 8 This is another scenario page diagram of the page data processing method provided in the embodiment of the present application. In the embodiment of the present application, the client service end can receive multiple incremental page data, and the incremental page data is set with a sequence number. That is, each time the client generates an incremental page data, the client adds a number to the incremental page data, so that the client service end determines whether to execute immediately based on the variables of the incremental page data. When it is found that the sequence number cannot be matched, the data before the sequence number that cannot be matched will be executed first, and the subsequent data will be executed in sequence after waiting for the sequence number that cannot be matched to be returned.
[0125] In the embodiment of the present application, a new data guarantee mechanism is added to the client and the customer service end. When one end sends a message, when the other end receives it, it needs to send a receipt for the data to the sender to let the sender know that the message has not been lost due to network abnormalities; if the sender does not receive the receipt, the message will be resent; in the case of long-term network disconnection or excessive data loss within the data guarantee mechanism, a full build can be performed directly after the network is restored (the first page of the client is sent to the customer service end in its entirety) to ensure strong consistency of the pages on both ends.
[0126] In one embodiment of the present application, after monitoring a trigger operation on the second page and sending first event data of the trigger operation to the first terminal to update the first page according to the first event data, the page processing method further includes:
[0127] a. receiving incremental page data sent by the first terminal, wherein the incremental page data is data generated by updating the first page in accordance with the first event data;
[0128] That is, in the embodiment of the present application, after the customer service end sends the event data that triggers the operation to the client, the second page of the customer service end will not be updated. It is necessary to wait for the client to perform the operation on the first page. After the client's first page collects the event data that triggers the operation, the client uses the event data as incremental page data and sends it to the customer service end. The customer service end receives the incremental page data synchronized by the client based on the event data, and the customer service end sends feedback information to the client, so that the client sends new incremental page data.
[0129] At the same time, the customer service end executes a second page update operation, that is, the customer service end parses the incremental page data to obtain second event data, where the second event data is an event generated by the trigger operation on the first page; according to the time sequence of the second event data, event playback is performed in the container to update the historical pages generated in the container to obtain the second page.
[0130] In the embodiment of the present application, the client and the customer service end interact to achieve page synchronization on both ends, while at the same time ensuring the timing of page updates.
[0131] b. If the incremental page data sent by the first terminal is not received within the preset first time period, a page synchronization request is sent to enable the first terminal to synchronize the full page data of the first page.
[0132] That is, in an embodiment of the present application, after the customer service end sends the event data that triggers the operation to the client, the customer service end presets a first time period and does not receive incremental page data synchronized by the client based on the event data. The customer service end sends a page synchronization request to the client to synchronize the full page data of the first page with the client, wherein the preset first time period can be set according to the specific scenario, for example, the preset time period is set to one minute.
[0133] In the embodiment of the present application, when the network is disconnected for a long time or too much data is lost within the data guarantee mechanism, a full build can be performed directly after the network is restored, and strong consistency of the pages on both ends is ensured by sending the first page of the client to the client service end in its entirety.
[0134] In an embodiment of the present application, a page data processing system is provided, wherein the system includes a first terminal (client) and a second terminal (client service terminal) in communication with each other; wherein,
[0135] The first terminal is configured to synchronize page data of the first page to the second terminal;
[0136] The second terminal is configured to receive page data of the first page from the first terminal;
[0137] a second terminal, configured to process the page data according to a type of the page data to generate a second page, wherein the second page has the same display style as the first page and is a static page;
[0138] a second terminal, configured to monitor a trigger operation on the second page, and send first event data of the trigger operation to the first terminal, so as to update the first page according to the first event data;
[0139] The first terminal is configured to restore the triggering operation on the first page according to the event data.
[0140] In an embodiment of the present application, the first terminal can synchronize the page data of the first page to the second terminal; the second terminal receives the page data of the first page of the first terminal; the second terminal processes the page data according to the type of the page data to generate a second page, wherein the second page has the same display style as the first page and the second page is a static page; the second terminal monitors the trigger operation on the second page and sends the first event data of the trigger operation to the first terminal to update the first page according to the first event data; the first terminal restores the trigger operation on the first page according to the event data. Since the second page is a static page, the second page will not change due to the operation, and the change of the second page can only be transmitted by the first terminal, thereby ensuring the consistency of the page data on both ends. At the same time, the user corresponding to the first terminal can restore the trigger operation on the first page according to the synchronized event data, which improves the convenience of operation and reduces the learning cost.
[0141] In the embodiment of the present application, the client copies a page and displays it on the customer service end; when the client's page sends changes due to operation behavior (whether it is the client's real operation or the simulated operation of js), the changes will be synchronized to the customer service end; the customer manager operation page corresponding to the customer service end will not send changes, but will transmit the operation behavior to the client, and the client will simulate the operation behavior, and then the client will synchronize the page changes to the customer service end.
[0142] In the embodiment of the present application, the page at one end of the page data processing system (the customer service end) is copied from the page at the other end (the client end), which can ensure that the two ends display completely consistent content when the network is good. In addition, in the case of page inconsistencies caused by network anomalies, compared to the general solution, there is also a way to synchronize the pages of both parties to make them consistent after the network is restored.
[0143] Specifically:
[0144] 1. The client synchronizes the page for the first time:
[0145] a. The client calls rrweb's recording function and sends the full page data of the page to the client. The full page data refers to everything in the page, but does not include any JavaScript code (because JavaScript will cause the page operation on both ends to change differently due to different environments);
[0146] b. Use rrweb to monitor all client page changes, not just operations. The reason for not using the general solution of monitoring operations is that operations can cause page changes, but page changes are not limited to operations; JavaScript can also cause page changes. (For example, the order number is displayed somewhere on the page. This order number is obtained by calling an API in JavaScript to obtain a randomly generated string of numbers, and then JavaScript is used to modify the page to display it. If the general solution is used, JavaScript will execute on both ends and display different order numbers, making it impossible to ensure that the pages on both ends are consistent.)
[0147] c. After receiving the full page data, the client calls rrweb's playback function, creates a separate iframe to isolate the data inside and outside the client, and then uses DOM operations to convert the data into a client-side page. This page does not contain the client's JavaScript code and is therefore a static page (only for display, not for most operations).
[0148] d. Monitor the operation behavior of the client page generated by the customer service end. The reason for monitoring the operation behavior instead of the page change here is that the static page will not change due to the operation (the page change can only be transmitted by the client).
[0149] 2. Client subsequent operation page:
[0150] a. rrweb monitors page changes on the client and collects data related to those changes. Since only the changed data is collected, the amount of full page data required for initial page synchronization is much smaller;
[0151] b. Send the incremental page data related to the change to the customer service client;
[0152] c. After receiving the data, the client calls rrweb's playback function to convert the data into a client-side page.
[0153] 3. Customer Service Operation Page:
[0154] a. Monitor page operations and send data related to the operations to the client;
[0155] b. The client receives the data and simulates the operations of the account manager corresponding to the customer service end;
[0156] c. The page changes due to operational behavior;
[0157] d. Part of the logic of the second step will be repeated later.
[0158] In one embodiment of the present application, the first terminal is further configured to: in response to a triggering operation of the first page according to the event data, synchronize incremental page data corresponding to the triggering operation to the second terminal.
[0159] In the embodiment of the present application, after the first full page data synchronization, the client sends incremental page data to the client according to the triggering operation. That is, the client monitors page changes, collects them and sends them to the client in real time to ensure subsequent page synchronization. This can be broken down into the following steps:
[0160] Listen to the scroll event and record every scroll of the page at a frequency of 100 milliseconds, completing the comprehensive monitoring of all scrolling behaviors of the page.
[0161] By using the browser API Object.get Own Property Descriptor, the value, checked, selected Index and selected attributes of the INPUT, TEXTAREA and SELECT elements (form elements) are monitored to achieve real-time monitoring of user input.
[0162] Perform proxy hijacking on the browser function insert Rule to monitor CSS changes.
[0163] By using the browser API Mutation Observer, it is possible to monitor the addition or deletion of DOM nodes and changes in the properties of existing nodes.
[0164] In the embodiment of the present application, the monitoring mechanism can accurately capture the type and target element of user interaction behavior, and convert this interaction information into data for transmission. For example, when a user scrolls a page with a mouse, the following information can be captured:
[0165] Target element: document
[0166] Operation type: scroll
[0167] Change description: Scrolled 300 pixels;
[0168] Based on this information, an incremental page data object can be constructed to transmit these interaction details. This data object contains the following fields:
[0169] id: unique identifier of the element on which the operation is performed;
[0170] source: The type of operation to be performed, such as "scroll";
[0171] y: The distance to scroll, usually in pixels.
[0172] Furthermore, in an embodiment of the present application, if the first terminal does not receive a trigger operation based on the event data within a preset second time period, the full page data of the first page will be synchronized to the second terminal; wherein, the preset second time period can be set according to the specific scenario, for example, the preset time period is one minute. In an embodiment of the present application, if the network conditions are not good, the full page data can be synchronized to ensure strong consistency of the pages on both ends.
[0173] refer to Figure 9 , Figure 9 : is a schematic diagram of a scenario of a page data processing system provided in an embodiment of the present application; in one embodiment of the present application, the system further includes a cloud server, which is used to:
[0174] receiving page data of a first page from a first terminal and sending the data to a second terminal;
[0175] The event data fed back by the second terminal is received, and the event data is sent to the first terminal.
[0176] In the embodiment of the present application, the first terminal and the second terminal can synchronize data with each other with the help of a server, that is, the server receives the page data of the first page of the first terminal and sends it to the second terminal; the server receives the event data fed back by the second terminal and sends the event data to the first terminal. In other words, other data transmission between the first terminal and the second terminal can also be carried out with the help of WebSocket in the cloud server. WebSocket is a protocol that implements full-duplex communication on a single TCP connection, allowing real-time, two-way data transmission between the client and the server. It can significantly reduce communication overhead and provide a more efficient data exchange method. It is particularly suitable for applications that require fast response and frequent data transmission.
[0177] It should be understood that, although each step in the flowcharts involved in the above-mentioned embodiments is displayed in sequence according to the instructions of the arrows, these steps are not necessarily executed in sequence in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and these steps can be executed in other orders. Moreover, at least a portion of the steps in the flowcharts involved in the above-mentioned embodiments can include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily to be carried out in sequence, but can be executed in turn or alternately with other steps or at least a portion of steps or stages in other steps.
[0178] Based on the same inventive concept, embodiments of the present application further provide a page data processing device for implementing the aforementioned page data processing method, and a page data processing apparatus for implementing the aforementioned page data processing method. The implementation solution provided by the device is similar to the implementation solution described in the aforementioned method, so the specific limitations of the embodiments of one or more page data processing devices and page data processing devices provided below can be found in the above-mentioned definitions of the page data processing method and page data processing method, and the specific limitations are not repeated here.
[0179] This embodiment also provides a page data processing device, which can be integrated into a terminal device. Figure 10 As shown, the page data processing device may include:
[0180] A first synchronization module 501 is configured to receive page data of a first page from a first terminal;
[0181] A page generating module 502 is configured to process the page data according to the type of the page data to generate a second page, wherein the second page has the same display style as the first page and is a static page;
[0182] The second synchronization module 503 is configured to monitor a trigger operation on the second page, and send first event data of the trigger operation to the first terminal, so as to update the first page according to the first event data.
[0183] The above-mentioned page data processing device receives the page data to be synchronized sent by the first terminal to generate a static second page, monitors the trigger operation performed on the second page and synchronizes it to the first terminal. Since the second page is a static page, the second page will not change due to the operation. The change of the second page can only be transmitted by the first terminal, thereby ensuring the consistency of the page data on both ends. At the same time, the user corresponding to the first terminal can restore the trigger operation on the first page according to the synchronized event data, which improves the convenience of operation and reduces the learning cost.
[0184] In some embodiments, the page data processing apparatus further includes:
[0185] In response to the synchronization operation, calling the synchronization interface to create a container;
[0186] The page generation module 502 is further configured to:
[0187] If the page data is full page data, parsing the full page data to obtain static page data;
[0188] The static page data is injected into the container to generate a second page.
[0189] In some embodiments, the page generation module 502 in the page data processing device injects the static page data into the container to generate the second page, including:
[0190] Generate an initial page structure of the page in the container according to the page structure data;
[0191] The page style data is injected into the page initial structure according to its data type to generate a second page.
[0192] In some embodiments, the page generation module 502 in the page data processing apparatus is further configured to:
[0193] If the page data is incremental page data, the incremental page data is parsed to obtain second event data, where the second event data is an event generated by a triggering operation on the first page;
[0194] According to the time sequence of the second event data, event playback is performed in the container to update the historical page generated in the container to obtain the second page.
[0195] In some embodiments, the page generation module 502 in the page data processing device performs event playback in the container according to the time sequence of the second event data, updates the historical pages generated in the container, and obtains the second page, including:
[0196] If the time sequence of the event data matches the time sequence of the historical pages, the corresponding events of the event data are replayed in the container to update the historical pages in the container to obtain the second page.
[0197] In some embodiments, the page data processing apparatus is further configured to:
[0198] receiving incremental page data sent by the first terminal, wherein the incremental page data is data generated by updating the first page according to the first event data;
[0199] If the incremental page data sent by the first terminal is not received within a preset first time period, a page synchronization request is sent to enable the first terminal to synchronize the full page data of the first page.
[0200] Based on the same inventive concept, an embodiment of the present application further provides a computer device, which may be a server or a terminal device. The computer device includes a memory and a processor. The memory stores a computer program, and the processor implements the steps of the above-mentioned page data processing method when executing the computer program. Various functions are thereby achieved, such as:
[0201] receiving page data of a first page of a first terminal;
[0202] processing the page data according to the type of the page data to generate a second page, wherein the second page has the same display style as the first page and is a static page;
[0203] A trigger operation on the second page is monitored, and first event data of the trigger operation is sent to the first terminal, so as to update the first page according to the first event data.
[0204] In the embodiment of the present application, the page data to be synchronized sent by the first terminal is received to generate a static second page, the trigger operation performed on the second page is monitored and synchronized to the first terminal. Since the second page is a static page, the second page will not change due to the operation. The change of the second page can only be transmitted by the first terminal, thereby ensuring the consistency of the page data on both ends. At the same time, the user corresponding to the first terminal can restore the trigger operation on the first page according to the synchronized event data, which improves the convenience of operation and reduces the learning cost.
[0205] The specific implementation of the above operations can be found in the previous embodiments and will not be repeated here.
[0206] In one embodiment, the computer device is a terminal device, for example, its internal structure diagram can be as follows Figure 11 As shown. The computer device includes a processor, a memory, an input / output interface, a communication interface, a display unit and an input device. The processor, the memory and the input / output interface are connected via a system bus, and the communication interface, the display unit and the input device are connected to the system bus via the input / output interface. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The input / output interface of the computer device is used to exchange information between the processor and an external device. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner can be implemented through WIFI, a mobile cellular network, NFC (near field communication) or other technologies. When the computer program is executed by the processor, a page data processing method is implemented. The display unit of the computer device is used to form a visually visible image, and can be a display screen, a projection device or a virtual reality imaging device. The display screen can be a liquid crystal display screen or an electronic ink display screen. The input device of the computer device can be a touch layer covering the display screen, or a button, trackball or touchpad set on the computer device casing, or an external keyboard, touchpad or mouse, etc.
[0207] Those skilled in the art will understand that Figure 11 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than shown in the figure, or combine certain components, or have a different component arrangement.
[0208] Based on the same inventive concept, an embodiment of the present application also provides a computer-readable storage medium, which may include: a read-only memory (ROM), a random access memory (RAM), a disk or an optical disk, etc.
[0209] Since the computer program stored in the computer-readable storage medium can execute any of the page data processing methods provided in the embodiments of the present application, the beneficial effects that can be achieved by any of the page data processing methods provided in the embodiments of the present application can be achieved. Please refer to the previous embodiments for details and will not be repeated here.
[0210] Based on the same inventive concept, embodiments of the present application further provide a computer program product or computer program, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the methods provided in various optional implementations of the above embodiments.
[0211] It should be noted that the object data (including but not limited to user device information, user personal information, etc.) and conversation data involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions. Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be implemented by instructing the relevant hardware through a computer program. The computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods.
[0212] Any reference to the memory, database or other media used in the various embodiments provided herein may include at least one of non-volatile and volatile memory. Non-volatile memory may include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory may include random access memory (RAM) or external cache memory, etc. As an illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM).
[0213] The databases involved in the various embodiments provided herein may include at least one of a relational database and a non-relational database. Non-relational databases may include, but are not limited to, distributed databases based on blockchains. The processors involved in the various embodiments provided herein may include, but are not limited to, general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic units, data processing logic units based on quantum computing, and the like.
[0214] In the above-described embodiments of the page data processing apparatus, computer-readable storage medium, computer device, and computer program product, the descriptions of each embodiment have their respective emphases. For portions not described in detail in one embodiment, reference can be made to the relevant descriptions of other embodiments. Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific operating procedures and beneficial effects of the above-described page data processing apparatus, computer-readable storage medium, computer program product, computer device, and their corresponding units can be referred to in the description of the page data processing method in the above embodiments, and no further details will be given here.
[0215] The technical features of the above embodiments can be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.
[0216] The above is a detailed introduction to a page data processing method, device, computer equipment, computer-readable storage medium and computer program product provided in the embodiments of the present application. Specific examples are used herein to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core ideas. At the same time, for those skilled in the art, according to the ideas of the present application, there will be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as limiting the present application.
Claims
1. A page data processing method, characterized in that: The method comprises: receiving page data of a first page of a first terminal; processing the page data according to the type of the page data to generate a second page, wherein the second page has the same display style as the first page and is a static page; A trigger operation on the second page is monitored, and first event data of the trigger operation is sent to the first terminal, so as to update the first page according to the first event data.
2. The method according to claim 1, wherein The method further comprises: In response to the synchronization operation, calling the synchronization interface to create a container; The step of processing the page data according to the type of the page data to generate a second page includes: If the page data is full page data, parsing the full page data to obtain static page data; The static page data is injected into the container to generate the second page.
3. The method according to claim 2, wherein The static page data includes page structure data and page style data; The step of injecting the static page data into the container to generate the second page includes: Generate an initial page structure in the container according to the page structure data; The page style data is injected into the page initial structure according to its data type to generate the second page.
4. The method according to claim 2, wherein The step of processing the page data according to the type of the page data to generate a second page includes: If the page data is incremental page data, the incremental page data is parsed to obtain second event data, where the second event data is an event generated by a triggering operation on the first page; According to the time sequence of the second event data, event playback is performed in the container to update the historical page generated in the container to obtain the second page.
5. The method according to claim 4, wherein The step of replaying the event in the container and updating the generated historical page in the container according to the time sequence of the second event data to obtain the second page includes: If the time sequence of the event data matches the time sequence of the historical pages, the corresponding event of the second event data is replayed in the container to update the historical pages in the container to obtain the second page.
6. The method according to any one of claims 1 to 5, wherein: After monitoring the trigger operation on the second page and sending first event data of the trigger operation to the first terminal to update the first page according to the first event data, the method further includes: receiving incremental page data sent by the first terminal, wherein the incremental page data is data generated by updating the first page according to the first event data; or If the incremental page data sent by the first terminal is not received within the preset first time period, a page synchronization request is sent to enable the first terminal to send the full page data of the first page.
7. A page data processing device, characterized in that: The device comprises: A first synchronization module, configured to receive page data of a first page of a first terminal; a page generating module, configured to process the page data according to the type of the page data to generate a second page, wherein the second page has the same display style as the first page and is a static page; The second synchronization module is configured to monitor a trigger operation on the second page, and send first event data of the trigger operation to the first terminal, so as to update the first page according to the first event data.
8. A computer device, characterized in that: The method comprises a processor and a memory, wherein the memory stores a plurality of instructions; the processor loads instructions from the memory to execute the steps of the page data processing method according to any one of claims 1 to 6.
9. A computer program product, characterized in that The computer program product includes a computer program or instructions, and the computer program or instructions are used by a processor to execute the steps of the page data processing method according to any one of claims 1 to 6.
10. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a plurality of instructions, and the instructions are suitable for being loaded by a processor to execute the steps of the page data processing method according to any one of claims 1 to 6.