WebSocket connection callback method and device, storage medium and processor

By using listening events in a multi-page WebSocket connection to uniformly handle callback methods, the problems of high code repetition and low componentization are solved, and higher scalability and componentization are achieved.

CN119766796AActive Publication Date: 2025-04-04CHINA CONSTRUCTION BANK +1
View PDF 6 Cites 0 Cited by

Patent Information

Application Number
CN202411541974.0
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2024-10-31
Publication Date
2025-04-04
Estimated Expiration
2044-10-31

AI Technical Summary

Technical Problem

When multiple pages call the same WebSocket connection at the same time, the existing technology has problems with high code repetition and low componentization, which leads to developers need to frequently write callback methods and poor code readability.

Method used

By establishing a listening event and a WebSocket connection between the front-end and the back-end, the listening event is triggered in the callback methods of each front-end page, and the general methods and homepage usage methods of each front-end page are written into the listening event, and the callback events of each front-end page are obtained to realize the callbacks of each front-end page by the back-end.

Benefits of technology

This avoids the situation where multiple pages require repeated modification of callback methods, reduces code repetition, improves scalability and componentization, and allows each page to handle WebSocket callbacks independently.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN119766796A_ABST
    Figure CN119766796A_ABST
Patent Text Reader

Abstract

The invention provides a WebSocket connection callback method and device, a storage medium and a processor, and relates to the technical field of computers. The method comprises the following steps: establishing a monitoring event and WebSocket connection between a front end and a rear end, when a plurality of front-end pages call the WebSocket connection, triggering the monitoring event in a callback method corresponding to each front-end page, respectively writing a universal method and a home page use method corresponding to each front-end page into the monitoring event, and writing the universal method and the home page use method corresponding to each front-end page into the monitoring event. And obtaining a callback event corresponding to each front-end page, so that when a back end carries out callback, callback of each front-end page is realized by calling the callback event corresponding to each page in the monitoring event. The situation that multiple pages need to repeatedly modify the callback method is avoided, code repeatability is low, and expansibility is high. And the processing of other pages is not influenced, so that the expansibility of code engineering is higher, and the modularization degree is higher.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a WebSocket connection callback method, a WebSocket connection callback device, a machine-readable storage medium, and a processor. Background Art

[0002] In Web development, there are scenarios where instant communication between the front-end and back-end is required. In this case, the WebSocket protocol can be used to enable the back-end to actively send notifications to the front-end to achieve the instant communication function. When establishing a WebSocket connection, there are scenarios in the front-end page where the same connection needs to be used on multiple pages after the connection is established, and different pages have different callback processing for the connection. For example, after page 1 receives a message from the back-end, a specific pop-up box needs to be opened, while after page 2 receives a message from the back-end, a text prompt is displayed. After establishing a connection and jumping to other pages, the callback method can be rewritten, but the original callback method will be overwritten, resulting in the inability to call the original method.

[0003] When multiple pages call the same WebSocket connection at the same time, it is necessary to solve the problem that different pages handle callback methods differently. The existing method is to duplicate the callback method on each page. The steps of this method are as follows: 1) connect to the WebSocket protocol and write the callback method; 2) jump to the next page, duplicate the new callback method, return to the previous page, and duplicate the callback method again.

[0004] The existing method requires rewriting the same callback method for some callback methods that need to be called on each page, resulting in high code duplication and poor scalability. Developers need to understand more logic beyond the functions they are responsible for. When the callback method used by page 1 uses a large number of variables of the page, if page 2 also needs to use this method, these variables need to be passed in additionally or the two pages need to be merged into one page, resulting in poor code readability and reduced componentization.

[0005] Therefore, when multiple pages call the same WebSocket connection at the same time, existing methods have problems such as high code duplication and low componentization. Summary of the invention

[0006] The purpose of the embodiments of the present application is to provide a WebSocket connection callback method, device, storage medium and processor.

[0007] In order to achieve the above-mentioned object, the first aspect of the present application provides a WebSocket connection callback method, the WebSocket connection callback method comprising:

[0008] Establish monitoring events and WebSocket connection between the front-end and the back-end;

[0009] When multiple front-end pages call the WebSocket connection, the listening event is triggered in the callback method corresponding to each front-end page;

[0010] The general method corresponding to each front-end page and the home page usage method are respectively written into the listening event to obtain the callback event corresponding to each front-end page, so that when the back-end makes a callback, it can realize the callback of each front-end page by calling the callback event corresponding to each page in the listening event. The general method is a common method in instant messaging, and the home page usage method is a method used only on the home page in instant messaging.

[0011] In the embodiment of the present application, the general method corresponding to each front-end page and the home page usage method are written into the monitoring event respectively to obtain the callback event corresponding to each front-end page, including:

[0012] When rendering components or pages, using the life cycle of Vue, after the DOM element rendering is completed, the operation of writing the listening event is executed through the mounted hook function, so that the common methods corresponding to the various front-end pages and the home page usage methods are respectively written into the listening event, and the callback events corresponding to the various front-end pages are obtained.

[0013] In the embodiment of the present application, the general method corresponding to each front-end page and the home page usage method are written into the monitoring event respectively to obtain the callback event corresponding to each front-end page, including:

[0014] After executing the operation of opening or jumping to the target page on each front-end page, the general method corresponding to the target page and the method of using the home page are written into the monitoring event to obtain the callback event corresponding to each front-end page.

[0015] In the embodiment of the present application, after executing the jump target page operation on each front-end page, the general method corresponding to the target page and the home page usage method are written into the monitoring event, including:

[0016] Before executing the page jump operation, determine whether the callback event corresponding to the current page needs to be destroyed;

[0017] When it is determined that the callback event corresponding to the current page needs to be destroyed, the callback event corresponding to the current page is destroyed, and the jump to the target page is performed;

[0018] After the jump target page operation is completed, the general method corresponding to the target page and the home page usage method are written into the monitoring event.

[0019] In the embodiment of the present application, the callback event corresponding to the destruction of the current page includes:

[0020] Destroy the home page usage method in the callback event corresponding to the current page, and retain the general method in the callback event corresponding to the current page;

[0021] The writing of the general method corresponding to the target page and the method for using the home page into the monitoring event includes:

[0022] The general method in the callback event corresponding to the current page is used as the general method corresponding to the target page, and the home page usage method corresponding to the target page is written into the monitoring event.

[0023] In the embodiment of the present application, it also includes:

[0024] When leaving each front-end page or preset node, disconnect the WebSocket connection and destroy the listening event.

[0025] A second aspect of the present application provides a WebSocket connection callback device, the WebSocket connection callback device comprising:

[0026] Create a module to monitor events and establish WebSocket connections between the front-end and the back-end;

[0027] A trigger module, used to trigger the listening event in the callback method corresponding to each front-end page when multiple front-end pages call the WebSocket connection;

[0028] A writing module is used to write the general methods corresponding to the various front-end pages and the home page usage methods into the listening events respectively, and obtain the callback events corresponding to the various front-end pages, so that when the back end makes a callback, it can realize the callback of each front-end page by calling the callback events corresponding to each page in the listening event. The general method is a common method in instant messaging, and the home page usage method is a method used only on the home page in instant messaging.

[0029] A third aspect of the present application provides a processor configured to execute the above-mentioned WebSocket connection callback method.

[0030] A fourth aspect of the present application provides a machine-readable storage medium having instructions stored thereon, which, when executed by a processor, configure the processor to execute the above-mentioned WebSocket connection callback method.

[0031] A fifth aspect of the present application provides a computer program product, including a computer program, which implements the above-mentioned WebSocket connection callback method when executed by a processor.

[0032] Through the above technical scheme, by establishing a listening event and a WebSocket connection between the front end and the back end, when multiple front-end pages call the WebSocket connection, the listening event is triggered in the callback method corresponding to each front-end page, and the general method and the home page usage method corresponding to each front-end page are written into the listening event respectively, and the callback event corresponding to each front-end page is obtained, so that when the back end is making a callback, the callback event corresponding to each page in the listening event is called to realize the callback of each front-end page, the general method is a common method in instant messaging, and the home page usage method is a method used only on the home page in instant messaging. This method does not directly write the method to be executed in the callback of the WebSoc ket connection, but uses the listening event as a transit, first calls the listening event and then calls the method actually required to be executed through the listening event. In this way, while maintaining the immediacy of the WebSocket connection, it avoids the situation where multiple pages need to repeatedly modify the callback method, and the code has low repetitiveness and high scalability. When processing the WebSocket callback, each page only needs to pay attention to the processing logic of the current page, without additionally considering the processing scenarios of other pages for the callback. The method of adding WebSocket callbacks to each page independently does not affect the processing of other pages, making the code project more scalable and more componentized.

[0033] Other features and advantages of the embodiments of the present application will be described in detail in the subsequent specific implementation section. BRIEF DESCRIPTION OF THE DRAWINGS

[0034] The accompanying drawings are used to provide a further understanding of the embodiments of the present application and constitute a part of the specification. Together with the following specific implementations, they are used to explain the embodiments of the present application, but do not constitute a limitation on the embodiments of the present application. In the accompanying drawings:

[0035] Figure 1 A schematic diagram of an application environment of a WebSocket connection callback method according to an embodiment of the present application is schematically shown;

[0036] Figure 2 The following is a schematic diagram showing a flow chart of a WebSocket connection callback method according to an embodiment of the present application;

[0037] Figure 3 The detailed process diagram of the WebSocket connection callback according to the embodiment of the present application is schematically shown;

[0038] Figure 4A schematic diagram of a structure of a WebSocket connection callback device according to an embodiment of the present application is shown;

[0039] Figure 5 The internal structure diagram of a computer device according to an embodiment of the present application is schematically shown.

[0040] Description of Reference Numerals

[0041] 102-terminal; 104-server; 410-establishment module; 420-trigger module; 430-write module; A01-processor; A02-network interface; A03-internal memory; A04-display screen; A05-input device; A06-non-volatile storage medium; B01-operating system; B02-computer program. DETAILED DESCRIPTION

[0042] In order to make the purpose, technical scheme and advantages of the embodiments of the present application clearer, the technical scheme 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. It should be understood that the specific implementation methods described herein are only used to illustrate and explain the embodiments of the present application, and are not used to limit the embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.

[0043] It should be noted that if the embodiments of the present application involve directional indications (such as up, down, left, right, front, back...), the directional indications are only used to explain the relative position relationship, movement status, etc. between the components under a certain specific posture (as shown in the accompanying drawings). If the specific posture changes, the directional indication will also change accordingly.

[0044] In addition, if there are descriptions involving "first", "second", etc. in the embodiments of the present application, the descriptions of "first", "second", etc. are only used for descriptive purposes and cannot be understood as indicating or suggesting their relative importance or implicitly indicating the number of technical features indicated. Therefore, the features defined as "first" and "second" may explicitly or implicitly include at least one of the features. In addition, the technical solutions between the various embodiments can be combined with each other, but they must be based on the ability of ordinary technicians in the field to implement them. When the combination of technical solutions is contradictory or cannot be implemented, it should be deemed that such combination of technical solutions does not exist and is not within the scope of protection required by this application.

[0045] The acquisition, transmission, storage, use, and processing of data in the technical solution of this application are in compliance with the relevant provisions of national laws and regulations. In addition, it should be noted that in the embodiments of this application, some existing solutions in the industry such as certain software, components, and models may be mentioned, which should be considered as exemplary, and their purpose is only to illustrate the feasibility of the implementation of the technical solution of this application, but it does not mean that the applicant has or will necessarily use the solution.

[0046] The explanations of the terms mentioned in this embodiment include:

[0047] Vue: is a progressive framework for building user interfaces. It adopts a bottom-up incremental development design, provides a software architecture model (Model-View-ViewModel, MVVM) data binding and a composable component system, and has a simple and flexible application programming interface (Application Programming Interface, API). Responsive data binding and composable view components can be achieved through a simple API.

[0048] WebSocket: A protocol for establishing real-time, two-way communication connections between web applications and servers. It provides a persistent connection through a single Transmission Control Protocol (TCP) connection, which enables web slave applications to deliver data in a more real-time manner.

[0049] addEventListener: specifies an event handler for a specified element without overwriting the existing event handler. It can add multiple event handlers to an element, can add multiple event handlers of the same type to an element, and can add event handlers to any Document Object Model (DOM) object instead of just HTML elements, such as the window object. The DOM object is a programming interface for representing and manipulating documents such as HTML and XML.

[0050] Callback: A two-way calling mode in which the called party will also call the other party's interface when the interface is called.

[0051] The WebSocket connection callback method provided by this application can be applied to Figure 1In the application environment shown. Among them, the terminal 102 communicates with the server 104 through the network. This method does not directly write the method to be executed in the callback of the WebSocket connection, but uses the listening event as a transfer, first calls the listening event and then calls the method actually required to be executed through the listening event. In this way, while maintaining the immediacy of the WebSocket connection, it avoids the situation where multiple pages need to repeatedly modify the callback method, the code has low repetitiveness and high scalability. Among them, the terminal 102 can be but is not limited to various personal computers, laptops, smart phones, tablet computers and portable wearable devices, and the server 104 can be implemented with an independent server or a server cluster consisting of multiple servers.

[0052] Figure 2 The flowchart of the WebSocket connection callback method according to the embodiment of the present application is schematically shown. Figure 2 As shown, in one embodiment of the present application, a WebSocket connection callback method is provided. This embodiment mainly applies this method to the above Figure 1 Taking the terminal 102 (or server 104) in FIG. 1 as an example, the following steps are included:

[0053] Step 210: Establishing a monitoring event and a WebSocket connection between the front end and the back end;

[0054] In this embodiment, the above listening event is a global listening event, which can capture callback events within the scope of the entire application. The above WebSocket connection between the front end and the back end can be triggered to establish a WebSocket connection at the front end.

[0055] Step 220: When multiple front-end pages call the WebSocket connection, trigger the monitoring event in the callback method corresponding to each front-end page;

[0056] In this embodiment, when multiple front-end pages call the same WebSocket connection at the same time, the WebSocket callback method on the front end can be triggered through the WebSocket protocol with each front-end page, and the listening event is triggered in the callback method of the WebSocket that needs to use this method.

[0057] Step 230: Write the general method corresponding to each front-end page and the home page usage method into the listening event respectively, and obtain the callback event corresponding to each front-end page, so that when the back-end makes a callback, it can realize the callback of each front-end page by calling the callback event corresponding to each page in the listening event. The general method is a common method in instant messaging, and the home page usage method is a method used only on the home page in instant messaging.

[0058] In this embodiment, after triggering the listening event, the function code to be executed is written in this listening event, that is, the method corresponding to each front-end page can be written into the listening event, where the method corresponding to the front-end page refers to the function code to be executed. In the Vue project, window.addEventListener can be used to create an event listening method. When the back end makes a callback, it first calls the listening event, and then calls the method actually required to be executed through the listening event, that is, calls the callback event corresponding to each page in the listening event to implement the callback of each front-end page. Among them, the general method is a general method in instant messaging, and the home page usage method is a method used only on the home page in instant messaging. For example: when entering a function module that requires instant messaging, a websocket connection will be made when the home page is opened, a listening event will be created, and the callback method will be written in the listening event. In the callback method, the methods that are general in the function module (such as document expiration reminder, management end sending notifications to the client, etc.) and the methods that are only used on the home page (such as updating part of the data on the home page) will be written in independent methods.

[0059] In some embodiments, the general method and the home page usage method corresponding to each front-end page are written into the monitoring event respectively to obtain the callback event corresponding to each front-end page, including the following steps:

[0060] When rendering components or pages, using the life cycle of Vue, after the DOM element rendering is completed, the operation of writing the listening event is executed through the mounted hook function, so that the common methods corresponding to the various front-end pages and the home page usage methods are respectively written into the listening event, and the callback events corresponding to the various front-end pages are obtained.

[0061] In this embodiment, first, Vue triggers the mounted hook function after completing the initialization and DOM rendering of the component. At this point, the DOM structure of the page already exists stably, and DOM operations and event monitoring can be safely performed. By writing the methods corresponding to each front-end page into the monitoring event, a response mechanism can be established for specific user interactions or system events. When these events are triggered, the corresponding callback events will be executed, thereby implementing specific business logic.

[0062] For example, suppose there is a button. When the user clicks this button, a specific method needs to be executed to display a prompt box. In the mounted hook function, you can add a click event listener for this button and write the method for displaying the prompt box into this listener event. In this way, when the user clicks the button, this callback event will be triggered and the method for displaying the prompt box will be executed.

[0063] By using Vue's mounted hook function to write listening events after DOM rendering is completed, the interactive logic of the front-end page can be effectively implemented, improving user experience and development efficiency. You can start listening to the corresponding events immediately after the component is rendered to avoid omissions. Each component or page only needs to write the corresponding required methods, which will not cover or affect each other. And when the component has not been rendered, there will be no redundant listening events.

[0064] In some embodiments, the general method and the home page usage method corresponding to each front-end page are written into the monitoring event respectively to obtain the callback event corresponding to each front-end page, including:

[0065] After executing the operation of opening or jumping to the target page on each front-end page, the general method corresponding to the target page and the method of using the home page are written into the monitoring event to obtain the callback event corresponding to each front-end page.

[0066] In this embodiment, when an operation of opening or jumping to a target page is performed on a front-end page, this usually means that the user's behavior triggers a change in the state of the page. At this time, a specific event mechanism or a hook function of routing navigation can be used to detect this change. Once the jump or opening operation of the page is detected, the method corresponding to the target page can be written into the listening event in the corresponding processing logic, including general methods and home page usage methods. The purpose of this is to be able to execute a specific method of the target page when a specific event occurs, thereby realizing the interactive logic related to the target page.

[0067] For example, when jumping from page A to page B, you can write the initialization method or specific interaction method of page B into the global listening event in the jump logic of page A. When page B is loaded, this listening event will trigger the corresponding callback event and execute the method of page B, thus achieving seamless transition and interaction between pages.

[0068] In this way, a flexible interaction mechanism can be established between different front-end pages to improve the user experience and functional scalability of the application. At the same time, the state and data transfer between pages can be better managed, making application development more efficient and reliable.

[0069] In some embodiments, after executing the jump target page operation on each front-end page, writing the common method corresponding to the target page and the home page usage method into the monitoring event includes the following steps:

[0070] First, before executing the page jump operation, determine whether the callback event corresponding to the current page needs to be destroyed;

[0071] In this embodiment, in actual use, there may be a scenario of page jump, for example, a listening event is written on page 1 and WebSocket is connected, because jumping to the page will destroy page 1, so before the jump action is performed, the characteristics of the listening event can be used to select whether to destroy the callback event created on page 1. The above judgment can be to determine whether the callback event corresponding to the current page is an event similar to a global prompt. If so, it does not need to be destroyed, otherwise, it needs to be destroyed.

[0072] Then, when it is determined that the callback event corresponding to the current page needs to be destroyed, the callback event corresponding to the current page is destroyed, and the jump to the target page operation is performed;

[0073] In this embodiment, if it does not need to be destroyed, it means that it is an event similar to a global prompt. After jumping to the page, it can be triggered without rewriting the listening event, and the jump to the target page operation is performed. If it is an event applied independently to page 1, that is, it is not an event similar to a global prompt, the listening event can be destroyed along with the destruction of the current page, so that the listening event of the original page will not be triggered after jumping to the page.

[0074] Finally, after the jump to the target page is completed, the general method corresponding to the target page and the home page usage method are written into the monitoring event.

[0075] In this embodiment, assuming that the target page is page 2, after jumping to page 2, the Vue life cycle is utilized to perform the operation of writing listening events after the DOM element rendering is completed through the mounted hook function. The corresponding events can be listened immediately after page 2 is rendered to avoid omissions.

[0076] By using the characteristics of the listening event before making a jump, you can choose whether to destroy the listening event created on the current page. If the event is similar to a global prompt event, it does not need to be destroyed. After jumping to the page, you do not need to rewrite the listening event to trigger it. If it is an event applied independently to the page, the listening event is destroyed along with the destruction of the page, so that the listening event of the original page will not be triggered after jumping to the page. After jumping to the target page, execute the operation of writing the listening event, and you can start listening to the corresponding event immediately after the page is rendered. The public methods in the WebSocket connection callback do not need to be written repeatedly on each page, reducing the duplication of the code.

[0077] In some embodiments, the destroying of the callback event corresponding to the current page includes:

[0078] Destroy the home page usage method in the callback event corresponding to the current page, and retain the general method in the callback event corresponding to the current page;

[0079] Correspondingly, writing the general method corresponding to the target page and the home page usage method into the listening event includes: using the general method in the callback event corresponding to the current page as the general method corresponding to the target page, and writing the home page usage method corresponding to the target page into the listening event.

[0080] In this embodiment, before the current page is destroyed, the method used only in the home page in the listening event, that is, the method used in the home page, will be destroyed, and the general method corresponding to the current page will be retained, so that in subsequent use, useless methods will not be called, and there is no need to rewrite the general method. After completing the page jump and entering the target page, write the method used only in the target page in the listening event, write the method used in the home page corresponding to the target page, and you can also receive the call of the general method.

[0081] During use, the general method can be written when the current page establishes a WebSocket connection, and can be called normally during full-function use, thus avoiding repeated writing. When each page and component is opened or called, write independent home page usage methods in the listening event for its own use only, and destroy the home page usage methods when it is destroyed, avoiding triggering the callback method and causing errors due to failure to find component data.

[0082] In some embodiments, it also includes: when the components in each front-end page are closed, destroying the callback event corresponding to the component in the listening event.

[0083] In this embodiment, in order to destroy the callback event corresponding to the component in the listening event, it can be processed in the destruction lifecycle hook function (beforeDestroy or destroyed) of the component. In these hook functions, the callback event related to the component can be ensured not to be triggered again by removing the event listener or unsubscribing. Doing so can ensure the performance and stability of the application and avoid potential problems caused by undestroyed callback events. At the same time, it also helps to better manage the resources and status of the application, improve development efficiency and user experience.

[0084] For example, if a click event listener is added to an element in the mounted hook function of a component, and the corresponding processing method is written into the listening event, then in the beforeDestroy hook function of the component, the removeEventListener method can be used to remove the click event listener, thereby destroying the callback event corresponding to the component.

[0085] In some embodiments, it also includes: when leaving each front-end page or preset node, disconnecting the WebSocket connection and destroying the listening event.

[0086] In this embodiment, the above-mentioned preset node can be a specific node, such as a page unloading event node, a route change event, etc., and the page unloading event can be used to perform a cleanup operation. In these event handlers, a method for closing the WebSocket connection can be called, and the related listening events can be removed. If a front-end routing framework is used, the route change event can be listened to. When the route changes, it is determined whether a specific page or node has been left. If so, the operation of disconnecting the WebSocket connection and destroying the listening event is executed.

[0087] When leaving the front-end page or the preset node, the WebSocket connection is disconnected and the listening event is destroyed. At this time, the WebSocket callback information cannot be received, which can improve the performance stability and maintainability of the application. In the same listening event, writing different calling methods does not overwrite the previous method, but multiple methods exist at the same time and are executed in sequence. When leaving the page or other node, destroying the corresponding method in the listening event can avoid the impact of the current page method on other pages, and will not affect the previously written method.

[0088] The following is a detailed explanation of the scheme with a specific example. Figure 3 , Figure 3 The detailed process diagram of the WebSocket connection callback according to an embodiment of the present application is schematically shown.

[0089] First, create a global listener event.

[0090] Then, trigger the WebSocket connection, trigger the listening event in the callback method, and write the method 1 that needs to be executed in the listening event.

[0091] Then, jump to the page and write method 2 in the listening event. At this time, both method 1 and method 2 will be called during the callback.

[0092] Then, jump to the page and destroy method 2. At this time, only method 1 is called during the callback.

[0093] Finally, when you leave the page or a specific node, the WebSocket connection is disconnected and the listening event is destroyed. At this time, you cannot receive the WebSocket callback information.

[0094] In the above implementation process, by establishing a listening event and a WebSocket connection between the front end and the back end, when multiple front end pages call the WebSocket connection, the listening event is triggered in the callback method corresponding to each front end page, and the general method and the home page usage method corresponding to each front end page are written into the listening event respectively, so as to obtain the callback event corresponding to each front end page, so that when the back end makes a callback, the callback of each front end page is realized by calling the callback event corresponding to each page in the listening event, the general method is a general method in instant messaging, and the home page usage method is a method used only on the home page in instant messaging. This method does not directly write the method to be executed in the callback of the WebSocket connection, but uses the listening event as a transit, first calls the listening event and then calls the method actually required to be executed through the listening event. In this way, while maintaining the immediacy of the WebSocket connection, it avoids the situation where multiple pages need to repeatedly modify the callback method, and the code has low repetitiveness and high scalability. When processing the WebSocket callback, each page only needs to pay attention to the processing logic of the current page, without additionally considering the processing scenarios of other pages for the callback. The method of adding WebSocket callbacks to each page independently does not affect the processing of other pages, making the code project more scalable and more componentized.

[0095] Figure 2 FIG. 1 is a flow chart of a WebSocket connection callback method in one embodiment. It should be understood that although Figure 2 The steps in the flowchart are shown in sequence as indicated by the arrows, but these steps are not necessarily executed in the order indicated by the arrows. Unless otherwise specified in this document, there is no strict order restriction for the execution of these steps, and these steps can be executed in other orders. Moreover, Figure 2 At least part of the steps may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily executed at the same time, but can be executed at different times. The execution order of these sub-steps or stages is not necessarily sequential, but can be executed in turn or alternately with other steps or at least part of the sub-steps or stages of other steps.

[0096] In one embodiment, Figure 4 As shown, a WebSocket connection callback device is provided, and the WebSocket connection callback device includes an establishment module 410, a trigger module 420 and a writing module 430, wherein:

[0097] Establishing module 410, for establishing a monitoring event and a WebSocket connection between the front end and the back end;

[0098] The trigger module 420 is used to trigger the monitoring event in the callback method corresponding to each front-end page when multiple front-end pages call the WebSocket connection;

[0099] The writing module 430 is used to write the general methods corresponding to the various front-end pages and the home page usage methods into the listening events respectively, and obtain the callback events corresponding to the various front-end pages, so that when the back-end makes a callback, it can realize the callback of each front-end page by calling the callback events corresponding to each page in the listening event. The general method is a common method in instant messaging, and the home page usage method is a method used only on the home page in instant messaging.

[0100] Wherein, the writing module 430 includes:

[0101] The first writing unit is used to utilize the life cycle of Vue when rendering components or pages. After the DOM element rendering is completed, the operation of writing the listening event is performed through the mounted hook function, so as to write the common methods corresponding to each front-end page and the home page usage method into the listening event respectively, and obtain the callback event corresponding to each front-end page.

[0102] Wherein, the writing module 430 includes:

[0103] The second writing unit is used to write the general method and the home page usage method corresponding to the target page into the monitoring event after the front-end pages respectively perform the operation of opening or jumping to the target page, so as to obtain the callback event corresponding to each front-end page.

[0104] Wherein, the second writing unit comprises:

[0105] The judgment subunit is used to judge whether the callback event corresponding to the current page needs to be destroyed before executing the page jump operation;

[0106] The destroy subunit is used to destroy the callback event corresponding to the current page and execute the jump to the target page when it is determined that the callback event corresponding to the current page needs to be destroyed;

[0107] The writing subunit is used to write the general method corresponding to the target page and the method of using the home page into the monitoring event after the operation of jumping to the target page is completed.

[0108] The destroy subunit is specifically used to destroy the home page usage method in the callback event corresponding to the current page, and retain the general method in the callback event corresponding to the current page;

[0109] The writing subunit is specifically used to use the general method in the callback event corresponding to the current page as the general method corresponding to the target page, and write the home page usage method corresponding to the target page into the listening event.

[0110] Among them, it also includes:

[0111] The second destruction module is used to disconnect the WebSocket connection and destroy the monitoring event when leaving each front-end page or preset node.

[0112] The WebSocket connection callback device includes a processor and a memory. The establishment module 410, the trigger module 420 and the writing module 430 are all stored in the memory as program units, and the processor executes the program modules stored in the memory to implement corresponding functions.

[0113] The processor includes a kernel, which calls the corresponding program unit from the memory. The kernel can be set to one or more, and the WebSocket connection callback method can be implemented by adjusting the kernel parameters.

[0114] The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM, and the memory includes at least one memory chip.

[0115] An embodiment of the present application provides a machine-readable storage medium on which a program is stored. When the program is executed by a processor, the above-mentioned WebSocket connection callback method is implemented.

[0116] An embodiment of the present application provides a processor, which is used to run a program, wherein the above-mentioned WebSocket connection callback method is executed when the program is running.

[0117] In one embodiment, a computer device is provided. The computer device may be a terminal, and its internal structure diagram may be as follows: Figure 5As shown. The computer device includes a processor A01, a network interface A02, a display screen A04, an input device A05 and a memory (not shown in the figure) connected through a system bus. Among them, the processor A01 of the computer device is used to provide computing and control capabilities. The memory of the computer device includes an internal memory A03 and a non-volatile storage medium A06. The non-volatile storage medium A06 stores an operating system B01 and a computer program B02. The internal memory A03 provides an environment for the operation of the operating system B01 and the computer program B02 in the non-volatile storage medium A06. The network interface A02 of the computer device is used to communicate with an external terminal through a network connection. When the computer program is executed by the processor A01, a WebSocket connection callback method is implemented. The display screen A04 of the computer device can be a liquid crystal display or an electronic ink display, and the input device A05 of the computer device can be a touch layer covered on the display screen, or a button, trackball or touchpad set on the computer device housing, or an external keyboard, touchpad or mouse, etc.

[0118] Those skilled in the art will understand that Figure 5 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 those shown in the figure, or combine certain components, or have a different arrangement of components.

[0119] In one embodiment, the process approval processing device provided by the present application can be implemented in the form of a computer program. The computer program can be Figure 5 The memory of the computer device can store various program modules that constitute the process approval processing device, such as: Figure 4 The establishment module 410, the trigger module 420 and the writing module 430 are shown. The computer program composed of various program modules enables the processor to execute the steps of the process approval processing method of each embodiment of the present application described in this specification.

[0120] Figure 5 The computer device shown can be Figure 4 The establishment module 410 in the process approval processing device shown executes step 210. The computer device can execute step 220 through the trigger module 420 and execute step 230 through the write module 430.

[0121] The present application also provides a computer program product, which, when executed on a data processing device, is suitable for executing a program for initializing the following method steps:

[0122] Establish monitoring events and WebSocket connection between the front-end and the back-end;

[0123] When multiple front-end pages call the WebSocket connection, the listening event is triggered in the callback method corresponding to each front-end page;

[0124] The general method corresponding to each front-end page and the home page usage method are respectively written into the listening event to obtain the callback event corresponding to each front-end page, so that when the back-end makes a callback, it can realize the callback of each front-end page by calling the callback event corresponding to each page in the listening event. The general method is a common method in instant messaging, and the home page usage method is a method used only on the home page in instant messaging.

[0125] In one embodiment, the general method and the home page usage method corresponding to each front-end page are written into the monitoring event respectively to obtain the callback event corresponding to each front-end page, including:

[0126] When rendering components or pages, using the life cycle of Vue, after the DOM element rendering is completed, the operation of writing the listening event is executed through the mounted hook function, so that the common methods corresponding to the various front-end pages and the home page usage methods are respectively written into the listening event, and the callback events corresponding to the various front-end pages are obtained.

[0127] In one embodiment, the general method and the home page usage method corresponding to each front-end page are written into the monitoring event respectively to obtain the callback event corresponding to each front-end page, including:

[0128] After executing the operation of opening or jumping to the target page on each front-end page, the general method corresponding to the target page and the method of using the home page are written into the monitoring event to obtain the callback event corresponding to each front-end page.

[0129] In one embodiment, after executing the jump target page operation on each front-end page, writing the common method corresponding to the target page and the home page usage method into the monitoring event includes:

[0130] Before executing the page jump operation, determine whether the callback event corresponding to the current page needs to be destroyed;

[0131] When it is determined that the callback event corresponding to the current page needs to be destroyed, the callback event corresponding to the current page is destroyed, and the jump to the target page is performed;

[0132] After the jump target page operation is completed, the general method corresponding to the target page and the home page usage method are written into the monitoring event.

[0133] In one embodiment, the destroying of the callback event corresponding to the current page includes:

[0134] Destroy the home page usage method in the callback event corresponding to the current page, and retain the general method in the callback event corresponding to the current page;

[0135] The writing of the general method corresponding to the target page and the method for using the home page into the monitoring event includes:

[0136] The general method in the callback event corresponding to the current page is used as the general method corresponding to the target page, and the home page usage method corresponding to the target page is written into the monitoring event.

[0137] In one embodiment, it further includes:

[0138] When leaving each front-end page or preset node, disconnect the WebSocket connection and destroy the listening event.

[0139] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented in one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that include computer-usable program code.

[0140] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0141] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1A function specified in one or more boxes.

[0142] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0143] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0144] The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0145] Computer readable media include permanent and non-permanent, removable and non-removable media, and can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0146] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0147] The above are only embodiments of the present application and are not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included within the scope of the claims of the present application.

Claims

1. A WebSocket connection callback method, characterized in that: The WebSocket connection callback method includes: Establish monitoring events and WebSocket connection between the front-end and the back-end; When multiple front-end pages call the WebSocket connection, the listening event is triggered in the callback method corresponding to each front-end page; The general method corresponding to each front-end page and the home page usage method are respectively written into the listening event to obtain the callback event corresponding to each front-end page, so that when the back-end makes a callback, it can realize the callback of each front-end page by calling the callback event corresponding to each page in the listening event. The general method is a common method in instant messaging, and the home page usage method is a method used only on the home page in instant messaging.

2. The method according to claim 1, characterized in that The general method corresponding to each front-end page and the home page usage method are written into the monitoring event respectively to obtain the callback event corresponding to each front-end page, including: When rendering components or pages, using the life cycle of Vue, after the DOM element rendering is completed, the operation of writing the listening event is executed through the mounted hook function, so that the common methods corresponding to the various front-end pages and the home page usage methods are respectively written into the listening event, and the callback events corresponding to the various front-end pages are obtained.

3. The method according to claim 1, characterized in that: The general method corresponding to each front-end page and the home page usage method are written into the monitoring event respectively to obtain the callback event corresponding to each front-end page, including: After executing the operation of opening or jumping to the target page on each front-end page, the general method corresponding to the target page and the method of using the home page are written into the monitoring event to obtain the callback event corresponding to each front-end page.

4. The method according to claim 3, characterized in that After executing the jump target page operation on each front-end page, writing the common method corresponding to the target page and the home page usage method into the monitoring event includes: Before executing the page jump operation, determine whether the callback event corresponding to the current page needs to be destroyed; When it is determined that the callback event corresponding to the current page needs to be destroyed, the callback event corresponding to the current page is destroyed, and the jump to the target page is performed; After the jump target page operation is completed, the general method corresponding to the target page and the home page usage method are written into the monitoring event.

5. The method according to claim 4, characterized in that The callback event corresponding to destroying the current page includes: Destroy the home page usage method in the callback event corresponding to the current page, and retain the general method in the callback event corresponding to the current page; The writing of the general method corresponding to the target page and the method for using the home page into the monitoring event includes: The general method in the callback event corresponding to the current page is used as the general method corresponding to the target page, and the home page usage method corresponding to the target page is written into the monitoring event.

6. The method according to claim 1, characterized in that Also includes: When leaving each front-end page or preset node, disconnect the WebSocket connection and destroy the listening event.

7. A WebSocket connection callback device, characterized in that: The WebSocket connection callback device includes: Create a module to monitor events and establish WebSocket connections between the front-end and the back-end; A trigger module, used to trigger the listening event in the callback method corresponding to each front-end page when multiple front-end pages call the WebSocket connection; A writing module is used to write the general methods corresponding to the various front-end pages and the home page usage methods into the listening events respectively, and obtain the callback events corresponding to the various front-end pages, so that when the back end makes a callback, it can realize the callback of each front-end page by calling the callback events corresponding to each page in the listening event. The general method is a common method in instant messaging, and the home page usage method is a method used only on the home page in instant messaging.

8. A processor, characterized in that: The method is configured to execute the WebSocket connection callback method according to any one of claims 1 to 6.

9. A machine-readable storage medium having instructions stored thereon, characterized in that: When the instruction is executed by a processor, the processor is configured to execute the WebSocket connection callback method according to any one of claims 1 to 6.

10. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the computer program implements the WebSocket connection callback method according to any one of claims 1 to 6.

Citation Information

Patent Citations

  • Page retreating method and device based on vue management and computer equipment

    CN114547501A

  • Method for realizing multi-page sharing based on WebSocket, electronic equipment and storage medium

    CN115396414A

  • Method and device for constructing multi-page KVM over IP, equipment and medium

    CN117668393A

  • Data processing method and device for page updating

    CN117851700A

  • Communication method and device based on WebSocket and Broadcast Channel, computing equipment and storage medium

    CN118555275A