WebSocket Webpage Component Loading Reduces Bandwidth
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current webpage loading methods based on HTTP requests are inefficient, leading to bandwidth wastage due to periodic polling, lack of user data flow control, and inability to personalize webpage loading, especially in high concurrent user access scenarios.
Innovation Solution
Implementing a method that uses WebSocket connections to establish communication between clients and servers, allowing for efficient loading of webpage components and dynamic control of page layouts, enabling personalized experiences and reducing bandwidth usage by sending updates only when necessary.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Reliability
If HTTP request polling is used for page updating, then the client can receive updated data from the server, but bandwidth is wasted due to frequent requests and long request headers
Solution Approach 1:
The patent establishes a WebSocket connection that maintains a continuous, persistent communication channel between client and server. This eliminates the need for repeated HTTP request-header handshakes, as the connection remains open and ready for data transmission, thereby continuously providing update capability without periodic bandwidth waste.
Solution Approach 2:
The patent extracts the essential communication functionality from the complete HTTP protocol suite by using WebSocket for subsequent communications after initial connection. This removes the overhead of repeated HTTP headers and protocol handshakes, keeping only the necessary data transmission capability.
2Speed
If AJAX requests are sent periodically for partial page update, then update frequency can be controlled, but bandwidth is still wasted when no actual updates occur
Solution Approach 1:
The server pushes data to the client only when actual updates occur, based on feedback from the data generation source. This eliminates unnecessary transmissions when no changes have occurred, as the server selectively sends updates only when warranted by actual data changes.
Solution Approach 2:
The system enables the server to autonomously push updates to clients without requiring clients to initiate requests. The server monitors data changes and automatically transmits updates when necessary, eliminating the need for client-side polling logic and associated bandwidth waste.
3Ease of manufacture
If traditional HTTP request methods are used, then simple implementation is achieved, but user data flow control at page component granularity cannot be provided
Solution Approach 1:
The patent segments the webpage into independent updateable components or modules. Each component can be individually controlled and updated through the WebSocket connection, allowing granular data flow control at the component level rather than requiring entire page updates.
4Stability of the object's composition
If conventional webpage loading is used, then uniform page display is achieved for all users, but personalized webpage loading cannot be implemented
Solution Approach 1:
The patent applies local quality by allowing different webpage components or sections to be customized for different users based on their profiles, preferences, or authorization levels. The base page structure remains consistent, but specific components can be dynamically personalized through selective data pushing via WebSocket.
Data Source
AI summary
The present disclosure discloses a method and a device for loading a webpage. The method for loading a webpage includes: sending a webpage request message to a server; receiving an initial webpage of the webpage returned from the server, the initial webpage including an agent; sending a WebSocket connection request message to the server through the agent, to establish a WebSocket connection with the server; sending a page component request message of the webpage to the server based on the WebSocket connection, to load page component of the webpage; receiving the page components of the webpage returned from the server based on the WebSocket connection; and creating the page components at corresponding positions in the initial webpage.