Webpage refresh methods, devices, electronic equipment and storage media

Abstract

This invention provides a webpage refresh method, apparatus, electronic device, and storage medium. The method includes: acquiring a connection establishment request and establishing a full-duplex communication connection with a server based on the connection establishment request; receiving pending response data sent by the server; updating pending data of the webpage based on the pending response data; and refreshing the webpage based on the pending data. This invention, by establishing a full-duplex communication connection between the terminal and the server and updating the pending data of the webpage based on the pending response data sent by the server, enables the browser client to refresh the webpage based on the pending data, thereby reducing the resource overhead of webpage refresh.

Description

Technical Field

[0001] This invention relates to the field of data communication technology, and in particular to a webpage refresh method, apparatus, electronic device, and storage medium. Background Technology

[0002] With the continuous improvement of internet technology, users can search and browse the content they need on their browser pages to obtain more comprehensive information. During the search process, the browser page refreshes based on the user's search query, ensuring timely updates to the information.

[0003] In existing technology, when a browser refreshes a page, the browser client periodically sends HTTP requests to the server. The server then returns data to be refreshed to the client based on the HTTP requests, allowing the browser client to refresh the page according to the data.

[0004] However, in existing technologies, the browser client needs to constantly send HTTP requests to the server, resulting in significant data transmission resource overhead and wasting bandwidth resources. Summary of the Invention

[0005] This invention provides a webpage refresh method, apparatus, electronic device, and storage medium. By providing a method for refreshing webpages online based on data returned by a server, the resource overhead of webpage refresh is reduced.

[0006] In a first aspect, the present invention provides a webpage refresh method, comprising:

[0007] Obtain a connection establishment request and establish a full-duplex communication connection with the server based on the connection establishment request; receive pending response data sent by the server; update the pending data of the webpage based on the pending response data, and refresh the webpage based on the pending data.

[0008] In one possible design, refreshing the webpage based on the data to be processed includes: obtaining a data identifier of the data to be processed; if the data identifier is consistent with a preset data identifier, then causing the browser client to refresh the webpage based on the data to be processed.

[0009] In one possible design, before updating the data to be refreshed on the webpage based on the data to be processed, the method further includes: configuring a VUE component according to a preset initialization file, wherein the preset initialization file includes a state object, a mutation object, and an execution object, wherein the state object is used to store the data to be updated, the mutation object is used to configure the data processing logic executed by the execution object, and the data processing logic is to update the data in the state object based on the data to be processed.

[0010] In one possible design, after establishing a full-duplex communication connection with the server according to the connection establishment request, the process includes: obtaining a status code and determining whether the connection is normal based on the status code; if the connection is determined to be failed, sending a heartbeat data packet to the server at a preset time interval, wherein the heartbeat data packet contains the connection establishment request.

[0011] In one possible design, the full-duplex communication is WebSocket communication.

[0012] Secondly, the present invention provides a webpage refresh device, comprising: an acquisition module, configured to acquire a connection establishment request and establish a full-duplex communication connection with a server according to the connection establishment request; a receiving module, configured to receive pending response data sent by the server; and a refresh module, configured to update pending processing data of the webpage according to the pending response data and refresh the webpage according to the pending processing data.

[0013] In one possible design, the refresh module is specifically used to obtain the data identifier of the data to be processed; if the data identifier is consistent with a preset data identifier, then the webpage is refreshed according to the data to be processed, and the data identifier is used to set the data type of the data to be processed.

[0014] In one possible design, the device further includes a configuration module for configuring VUE components according to a preset initialization file. The preset initialization file includes a state object, a mutation object, and an execution object. The state object is used to store data to be updated, and the mutation object is used to configure the data processing logic executed by the execution object. The data processing logic is to update the data in the state object according to the data to be processed.

[0015] Thirdly, the present invention provides an electronic device, comprising: a processor, and a memory communicatively connected to the processor; the memory storing computer execution instructions; the processor executing the computer execution instructions stored in the memory to implement the webpage refresh method as described in the first aspect and various possible designs of the first aspect.

[0016] Fourthly, the present invention provides a computer storage medium storing computer execution instructions, wherein when a processor executes the computer execution instructions, the webpage refresh method described in the first aspect and various possible designs of the first aspect is implemented.

[0017] The webpage refresh method, apparatus, electronic device, and storage medium provided by this invention establish a full-duplex communication connection between the terminal and the server, and update the data to be processed on the webpage according to the data to be processed sent by the server, so that the browser client refreshes the webpage according to the data to be processed, thereby reducing the resource overhead of webpage refresh. Attached Figure Description

[0018] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0019] Figure 1 This is a schematic diagram illustrating an application scenario of the webpage refresh method provided in this embodiment of the invention;

[0020] Figure 2 Flowchart of the webpage refresh method provided in this embodiment of the invention Figure 1 ;

[0021] Figure 3 Flowchart of the webpage refresh method provided in this embodiment of the invention Figure 2 ;

[0022] Figure 4 This is a schematic diagram of the structure of the webpage refresh device provided in an embodiment of the present invention;

[0023] Figure 5 This is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present invention.

[0024] The accompanying drawings have illustrated specific embodiments of the invention, which will be described in more detail below. These drawings and descriptions are not intended to limit the scope of the invention in any way, but rather to illustrate the concept of the invention to those skilled in the art through reference to particular embodiments. Detailed Implementation

[0025] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0026] Existing webpage refresh mechanisms all use a polling method, where the browser client automatically sends data retrieval requests at specific time intervals and receives messages from the server, causing the browser client to refresh the page based on these messages. However, in existing technologies, the browser client needs to continuously send HTTP requests to the server, resulting in significant data transmission resource overhead and wasted bandwidth resources. To address these technical problems, this invention proposes the following technical solution: by establishing a full-duplex communication connection between the terminal and the server, and updating the pending data of the webpage based on the pending response data sent by the server, the browser client refreshes the webpage based on the pending data, reducing the resource overhead of webpage refresh. The following detailed embodiments illustrate the technical solution of this application and how it solves the aforementioned technical problems. These specific embodiments can be combined with each other, and similar concepts or processes may not be repeated in some embodiments. The embodiments of this application will be described below with reference to the accompanying drawings.

[0027] Figure 1 This is a schematic diagram illustrating an application scenario of the webpage refresh method provided in an embodiment of the present invention. For example... Figure 1 As shown, the terminal achieves full-duplex communication with the server by creating a full-duplex communication client. It receives the data to be processed from the server through online data transmission, updates the data to be processed on the webpage based on the data to be processed, and causes the browser client on the terminal to refresh the webpage based on the data to be processed.

[0028] Figure 2 Flowchart of the webpage refresh method provided in this embodiment of the invention Figure 1 The execution entity in this embodiment can be Figure 1 The terminal shown in the illustrated embodiment is not specifically limited in this embodiment. Figure 2 As shown, the method includes:

[0029] S201: Obtain a connection establishment request and establish a full-duplex communication connection with the server based on the connection establishment request.

[0030] In this embodiment of the invention, a full-duplex communication mode is established between the terminal and the server, enabling simultaneous sending and receiving of information. For example, full-duplex communication is set to WebSocket communication. Before initializing WebSocket, it is necessary to assess whether the current browser client supports WebSocket. If the browser client is found to support WebSocket, a new WebSocket instance is created to create a WebSocket client. Simultaneously, a WebSocket connection request is generated and sent to the server's WebSocket server via the Transmission Control Protocol (TCP), thus establishing a full-duplex WebSocket communication mode between the terminal and the server. The establishment phase of WebSocket communication relies on the HTTP protocol. The first handshake phase of establishing a connection utilizes the HTTP protocol. After successful connection establishment (i.e., after the first handshake), the connection switches to the WebSocket protocol and completely decouples from HTTP. WebSocket completes a handshake between the browser and the server. After establishing the connection, the WebSocket server can actively send data to the WebSocket client, and the WebSocket client can also send data to the WebSocket server at any time. Both the WebSocket server and the WebSocket client can freely send data at any time, making it very suitable for business scenarios where the WebSocket server actively pushes real-time data. WebSocket communication transmits data based on data frames, which can transmit not only text data but also binary data directly. It has high data transmission efficiency and is suitable for transmitting webpage refresh data.

[0031] S202: Receive the pending response data sent by the server.

[0032] S203: Update the pending data of the webpage based on the pending response data, and refresh the webpage based on the pending data.

[0033] In this embodiment of the invention, specifically, after receiving the data sent by the WebSocket server in S202, the pending response data is obtained by receiving messages in the onmessage method of the WebSocket, and the dispatch method in Vuex is called to update the pending data of the webpage according to the pending response data.

[0034] In this embodiment of the invention, the web page interface is designed using Vue.js. Specifically, Vue.js is a progressive framework for building user interfaces. Unlike other large frameworks, Vue.js is designed to be applied layer by layer from the bottom up. Vue.js's core library focuses only on the view layer, making it easy to learn and integrate with third-party libraries or existing projects. Its simple and compact core, along with its progressive technology stack, is sufficient to handle applications of any size.

[0035] In this embodiment of the invention, to implement Vue's webpage design, before updating the pending data of the webpage based on the pending response data, Vue components can be configured according to a preset initialization file. The preset initialization file includes a state object, mutation objects, and execution objects. The state object stores the data to be updated, and the mutation objects configure the data processing logic executed by the execution objects. The data processing logic updates the data in the state object based on the pending data. Specifically, a new file, Vue.js, is created using the preset initialization file. Vue.js aims to achieve responsive data binding and composable view components through the simplest possible API. The preset initialization file includes a state object (state), mutation objects (mutations), and execution objects (actions). The dispatch method in Vuex triggers the methods defined in the actions object. Then, the methods defined in these actions call the methods defined in mutations to pass the pending response data to the state object (state), completing the update operation of the pending data of the webpage based on the pending response data.

[0036] In this embodiment of the invention, after updating the pending data of the webpage based on the data to be responded to, the Vue's `watch` method is used to listen to the Vuex store. `watch` is a built-in Vue property that you can put into this property when you need to listen for a data change and make some modifications to the page based on that change. By listening to the corresponding object in the state through `watch`, the data in the state is filtered to obtain valid data. Finally, the webpage interface is refreshed using Vue's two-way data binding principle to perform operations such as adding, deleting, or modifying page data.

[0037] In this embodiment of the invention, a data identifier for the data to be processed is obtained. If the data identifier matches a preset data identifier, the browser client refreshes the webpage based on the data to be processed. Specifically, a data identifier is set. This data identifier can be any string or number, but it must comply with JavaScript's string or number naming rules. Each module that needs to use the real-time webpage data viewing function will have a corresponding data identifier. When the data identifier for the data to be processed matches the preset data identifier, it can be determined that the function of the current data to be processed is to refresh the webpage, and the browser client refreshes the webpage based on the data to be processed.

[0038] The webpage refresh method provided in this embodiment establishes a full-duplex communication connection between the terminal and the server, and updates the pending data of the webpage according to the pending response data sent by the server, so that the browser client refreshes the webpage according to the pending data, thereby reducing the resource overhead of webpage refresh.

[0039] Figure 3 Flowchart of the webpage refresh method provided in this embodiment of the invention Figure 2 In this embodiment of the invention, in Figure 2 Based on the provided embodiments, the specific implementation method after establishing a full-duplex communication connection with the server according to the connection establishment request in S201 is described in detail. For example... Figure 3 As shown, the method includes:

[0040] S301: Obtain the status code and determine whether the connection is normal based on the status code.

[0041] In this embodiment of the invention, the status code is, for example, the readyState flag in the WebSocket communication protocol. readyState stores the current status, specifically four possible states: connecting, open, closing, and closed. Specifically, when readyState returns a connecting state, a value of 0 indicates a normal connection; when readyState returns an open state, a value of 1 indicates communication can begin; when readyState returns a closing state, a value of 2 indicates the connection is closing; and when readyState returns a closed state, a value of 3 indicates the connection has been closed or opening the connection failed.

[0042] S302: If the connection is determined to fail, a heartbeat data packet is sent to the server at a preset time interval, and the heartbeat data packet contains a connection establishment request.

[0043] In this embodiment of the invention, a dedicated interface for the heartbeat monitoring mechanism is set up at the interface between the server and the terminal, enabling data transmission between the server and the terminal using heartbeat data packets. When the connection fails based on the status code, the WebSocket connection establishment request needs to be resent to the WebSocket server. In this embodiment of the invention, a timer program is set to generate heartbeat data packets according to the heartbeat data format of the connection establishment request, and sends the heartbeat data packets to the WebSocket server at preset time intervals set by the timer program, avoiding frequent reconnection requests to the WebSocket server.

[0044] The webpage refresh method provided in this embodiment can send a heartbeat data packet containing a reconnection request to the server at preset time intervals when the communication connection failure is identified based on the status code, thereby establishing a reconnection and avoiding frequent reconnection requests to the WebSocket server, thus reducing resource overhead.

[0045] Figure 4 This is a schematic diagram of the structure of a webpage refresh device provided in an embodiment of the present invention. Figure 4 As shown, the webpage refresh device includes: an acquisition module 401, a receiving module 402, and a refresh module 403.

[0046] The acquisition module 401 is used to acquire a connection establishment request and establish a full-duplex communication connection with the server based on the connection establishment request.

[0047] The receiving module 402 is used to receive the pending response data sent by the server;

[0048] The refresh module 403 is used to update the pending data of the webpage according to the pending response data, and to refresh the webpage according to the pending data.

[0049] In one possible implementation, the refresh module is specifically used to obtain the data identifier of the data to be processed; if the data identifier is consistent with a preset data identifier, the browser client refreshes the webpage according to the data to be processed.

[0050] In one possible implementation, the device further includes a configuration module for configuring VUE components according to a preset initialization file. The preset initialization file includes a state object, a mutation object, and an execution object. The state object is used to store data to be updated, and the mutation object is used to configure the data processing logic executed by the execution object. The data processing logic is to update the data in the state object according to the data to be processed.

[0051] In one possible implementation, the device further includes a sending module, which is used to obtain a status code and determine whether the connection is normal based on the status code; if the connection is determined to be failed, a heartbeat data packet is sent to the server at a preset time interval, wherein the heartbeat data packet contains a connection establishment request.

[0052] The apparatus provided in this embodiment can be used to execute the technical solutions of the above method embodiments. Its implementation principle and technical effects are similar, and will not be described again here.

[0053] Figure 5 This is a schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present invention. For example... Figure 5 As shown, the electronic device of this embodiment includes: a processor 501 and a memory 502; wherein

[0054] Memory 502 is used to store instructions executed by the computer;

[0055] The processor 501 is used to execute computer execution instructions stored in the memory to implement the various steps performed by the electronic device in the above embodiments. For details, please refer to the relevant descriptions in the foregoing method embodiments.

[0056] Alternatively, the memory 502 can be either standalone or integrated with the processor 501.

[0057] When the memory 502 is set up independently, the electronic device also includes a bus 503 for connecting the memory 502 and the processor 501.

[0058] This invention also provides a computer storage medium storing computer execution instructions. When a processor executes the computer execution instructions, it implements the webpage refresh method described above.

[0059] This invention also provides a computer program product, including a computer program that, when executed by a processor, implements the webpage refresh method described above.

[0060] In the several embodiments provided by this invention, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are merely illustrative; for instance, the division of modules is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple modules may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be indirect coupling or communication connection through some interfaces, devices, or modules, and may be electrical, mechanical, or other forms.

[0061] The modules described as separate components may or may not be physically separate. The components shown as modules may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to implement the solution of this embodiment according to actual needs.

[0062] Furthermore, the functional modules in the various embodiments of the present invention can be integrated into one processing unit, or each module can exist physically separately, or two or more modules can be integrated into one unit. The unit composed of the above modules can be implemented in hardware or in the form of hardware plus software functional units.

[0063] The integrated modules implemented as software functional modules described above can be stored in a computer-readable storage medium. These software functional modules, stored in a storage medium, include several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) or processor to execute some steps of the methods described in the various embodiments of this application.

[0064] It should be understood that the aforementioned processor can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), etc. A general-purpose processor can be a microprocessor or any conventional processor. The steps of the method disclosed in this invention can be directly manifested as being executed by a hardware processor, or executed by a combination of hardware and software modules within the processor.

[0065] The memory may include high-speed RAM, and may also include non-volatile storage (NVM), such as at least one disk storage device, and may also be a USB flash drive, external hard drive, read-only memory, disk or optical disc, etc.

[0066] The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus, etc. Buses can be categorized as address buses, data buses, control buses, etc. For ease of illustration, the buses shown in the accompanying drawings are not limited to a single bus or a single type of bus.

[0067] The aforementioned storage medium can be implemented from any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk. The storage medium can be any available medium accessible to general-purpose or special-purpose computers.

[0068] An exemplary storage medium is coupled to a processor, enabling the processor to read information from and write information to the storage medium. Alternatively, the storage medium can be an integral part of the processor. Both the processor and the storage medium can reside in an Application Specific Integrated Circuit (ASIC). Alternatively, the processor and storage medium can exist as discrete components in an electronic device or host device.

[0069] Those skilled in the art will understand that all or part of the steps of the above-described method embodiments can be implemented by hardware related to program instructions. The aforementioned program can be stored in a computer-readable storage medium. When executed, the program performs the steps of the above-described method embodiments; and the aforementioned storage medium includes various media capable of storing program code, such as ROM, RAM, magnetic disks, or optical disks.

[0070] Other embodiments of this application will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of this application that follow the general principles of this application and include common knowledge or customary techniques in the art not disclosed herein. The specification and examples are to be considered exemplary only, and the true scope and spirit of this application are indicated by the following claims.

[0071] It should be understood that this application is not limited to the precise structure described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this application is limited only by the appended claims.

Claims

1. A webpage refresh method, characterized in that, include: Obtain a connection establishment request, and establish a full-duplex communication connection with the server based on the connection establishment request; Receive pending response data sent by the server; The pending data of the webpage is updated based on the pending response data, and the webpage is refreshed based on the pending data. After updating the pending data of the webpage based on the data to be responded to, the Vue's watch method is used to listen to the Vuex store. By watching the corresponding objects in the state, the data in the state is filtered to obtain valid data, and the webpage is refreshed using Vue's two-way binding principle. Before updating the data to be refreshed on the webpage based on the data to be processed, the method further includes: VUE components are configured according to a preset initialization file. The preset initialization file includes a state object, a mutation object, and an execution object. The state object is used to store data to be updated. The mutation object is used to configure the data processing logic executed by the execution object. The data processing logic is to update the data in the state object according to the data to be processed.

2. The method according to claim 1, characterized in that, The step of refreshing the webpage based on the data to be processed includes: Obtain the data identifier of the data to be processed; If the data identifier matches the preset data identifier, the browser client will refresh the webpage based on the data to be processed.

3. The method according to claim 1, characterized in that, After establishing a full-duplex communication connection with the server according to the connection establishment request, the process includes: Obtain the status code and determine whether the connection is normal based on the status code; If the connection is determined to fail, a heartbeat data packet is sent to the server at a preset time interval, wherein the heartbeat data packet contains a connection establishment request.

4. The method according to any one of claims 1 to 3, characterized in that, The full-duplex communication is WebSocket communication.

5. A webpage refresh device, characterized in that, include: The acquisition module is used to acquire a connection establishment request and establish a full-duplex communication connection with the server based on the connection establishment request. The receiving module is used to receive pending response data sent by the server. The refresh module is used to update the pending data of the webpage according to the pending response data, and to refresh the webpage according to the pending data. The refresh module is specifically used to update the data to be processed on the webpage according to the data to be responded to, and then use the watch method of Vue to listen to the Vuex store. By watching the corresponding object in the state, the data in the state is filtered to obtain valid data, and the webpage interface is refreshed using Vue's two-way binding principle. The configuration module is used to configure VUE components according to a preset initialization file. The preset initialization file includes a state object, a mutation object, and an execution object. The state object is used to store data to be updated, and the mutation object is used to configure the data processing logic executed by the execution object. The data processing logic is to update the data in the state object according to the data to be processed.

6. The apparatus according to claim 5, characterized in that, The refresh module is specifically used to obtain the data identifier of the data to be processed; if the data identifier is consistent with the preset data identifier, the browser client refreshes the webpage according to the data to be processed.

7. An electronic device, characterized in that, include: A processor, and a memory communicatively connected to the processor; The memory stores computer-executed instructions; The processor executes computer execution instructions stored in the memory to implement the webpage refresh method as described in any one of claims 1 to 4.

8. A computer storage medium, characterized in that, The computer storage medium stores computer execution instructions, and when the processor executes the computer execution instructions, it implements the webpage refresh method as described in any one of claims 1 to 4.

9. A computer program product, comprising a computer program, characterized in that, When executed by a processor, the computer program is used to implement the webpage refresh method as described in any one of claims 1 to 4.

Images