Live message display method and device

Abstract

The application discloses a live message display method and device, and the method comprises the steps of listening to a component change event of a webpage to obtain a change event stream; calculating a component change frequency in a preset sliding time window according to the change event stream; dynamically and adaptively determining a display mode of a live message according to a comparison result of the component change frequency and a frame loss triggering threshold, so as to adjust the live message to be displayed in different display modes; the display mode comprises an animation mode and / or a frame loss mode; the frame loss triggering threshold is determined according to device performance, message type and / or display feedback information of the webpage. By listening to the change event of the component in the webpage and counting the component change frequency, the adaptive adjustment can be performed in time based on the component change frequency, different display modes are switched, the display of the live message in the webpage can facilitate the user to view the latest content, and a good viewing experience can be provided for the user, and manual pre-setting is not needed, so that the difficulty of coding development is reduced.

Description

Technical Field

[0001] This application relates to the field of live streaming technology, specifically to a method and apparatus for displaying live stream messages. Background Technology

[0002] In scenarios with high-frequency content updates, such as web live streaming rooms and chat rooms, smooth scrolling animations can provide a smooth visual experience and enhance the user's interactive experience. Scrolling animations move the view from its current position to a target position through a gradual transition, allowing users to clearly perceive the trajectory of content changes. Using this for message scrolling displays makes it easy for users to clearly perceive message updates.

[0003] Existing scrolling animations typically employ fixed scrolling or manual switching. Fixed scrolling can achieve smooth scrolling using browser-provided interfaces, but its scrolling behavior is fixed in the code and cannot be dynamically adjusted based on runtime conditions. This lack of flexibility is problematic when there are many updates. If a new message arrives before the previous animation has finished, users may not see the latest message immediately, resulting in a display delay that impacts message real-time performance and user experience. Manually switching scrolling requires developers to manually configure settings based on specific scenarios, necessitating the writing of complex conditional logic. Since message update frequencies are dynamically changing, this approach is difficult to predict and handle in real-time, increasing development and maintenance costs. Summary of the Invention

[0004] In view of the above problems, embodiments of this application are proposed to provide a live message display method and apparatus that overcomes or at least partially solves the above problems.

[0005] According to a first aspect of the embodiments of this application, a method for displaying live messages is provided, comprising: Listen for component change events on the webpage and obtain the event stream; The frequency of component changes within a preset sliding time window is calculated based on the change event flow. Based on the comparison results of component change frequency and frame drop trigger threshold, the display mode of live messages is dynamically and adaptively determined to adjust the live messages to be displayed in different display modes; the display modes include animation mode and / or frame drop mode; the frame drop trigger threshold is determined based on the device performance of the webpage, message type and / or display feedback information.

[0006] Optionally, listening for component change events on the webpage and obtaining the change event stream further includes: Monitor changes to specified message components on a webpage in real time and / or at regular intervals, and record the change event stream corresponding to the change events. Change events include component node addition events, component position change events, and / or component container size change events. The change event stream includes the initial change timestamp, the number of changed component nodes, component container size information, component scroll position information, and / or the queue length information corresponding to the component.

[0007] Optionally, calculating the component change frequency within a preset sliding time window based on the change event stream further includes: Use the initial change timestamp as the window start time, and calculate the difference between the initial change timestamp and the current time; Determine if the difference is greater than a preset sliding time window; the preset sliding time window is determined based on the animation scrolling time and / or visual delay data. If not, the component change frequency within the preset sliding time window is determined based on the change event flow.

[0008] Optionally, determining the component change frequency within a preset sliding time window based on the change event flow further includes: The number of component nodes that change within the cumulative difference is used to determine the component change frequency within a preset sliding time window. And / or, The container size change information is determined based on the change in component container size information within a preset sliding time window, and is used as the component change frequency within the preset sliding time window. And / or, The scrolling distance is determined based on the difference in the scrolling positions of the components within the preset sliding time window, and is used as the component change frequency within the preset sliding time window; And / or, The frequency of component change within the preset sliding time window is determined by the increase in the queue length information corresponding to the component within that window.

[0009] Optionally, if the difference is greater than a preset sliding time window, the method further includes: Reset the window start time and set the live message display mode to animation mode.

[0010] Optionally, based on the comparison results between the component change frequency and the frame dropping trigger threshold, the display mode of the live message is dynamically and adaptively determined to adjust the live message display to different display modes, further including: Determine whether the component change frequency exceeds the frame drop trigger threshold; the frame drop trigger threshold includes the node number threshold, container size threshold, scroll position threshold, and / or length threshold; the frame drop trigger threshold is determined based on the performance consumption and / or visual latency data of the animation scrolling; If so, adjust the display mode of the live stream messages to frame dropping mode; If not, adjust the display mode of the live stream messages to animation mode.

[0011] Optionally, adjusting the display mode of live messages to a frame-dropping mode further includes: For the live message component, call the real-time scrolling interface to locate the target position and display the live message; And / or, shorten the scrolling animation duration of the live message component.

[0012] Optionally, adjusting the display mode of live messages to animation mode further includes: For the live message component, call the smooth scrolling interface to play a scrolling animation to display the live message; And / or, increase the duration of the scrolling animation in the live message component.

[0013] Optionally, the method further includes: Set the frame dropping trigger threshold based on the current device performance of the webpage; the frame dropping trigger threshold is directly proportional to the device performance. And / or, Set the corresponding frame dropping trigger threshold according to the animation duration required for displaying different types of live messages; the frame dropping trigger threshold is inversely proportional to the animation duration of different types of live messages; And / or, Adjust the frame drop trigger threshold based on the feedback information displayed.

[0014] Optionally, the method further includes: Set a preset sliding time window based on the current device performance of the webpage; the size of the preset sliding time window is inversely proportional to the device performance. And / or, Set a corresponding preset sliding time window based on the animation duration of the live message; the size of the preset sliding time window is proportional to the animation duration. And / or, Adjust the preset sliding time window based on the feedback from the display.

[0015] According to a second aspect of the embodiments of this application, a live broadcast message display device is provided, comprising: The listening module is suitable for listening to component change events on a webpage and obtaining the event stream. The frequency calculation module is suitable for calculating the component change frequency within a preset sliding time window based on the changing event stream; The adaptive adjustment module is suitable for dynamically and adaptively determining the display mode of live messages based on the comparison results of component change frequency and frame drop trigger threshold, so as to adjust the live messages to be displayed in different display modes; the display modes include animation mode and / or frame drop mode; the frame drop trigger threshold is determined based on the device performance of the webpage, message type and / or display feedback information.

[0016] According to a third aspect of the embodiments of this application, a computing device is provided, including: a processor, a memory, a communication interface, and a communication bus, wherein the processor, the memory, and the communication interface communicate with each other through the communication bus; The memory is used to store at least one executable instruction, which causes the processor to perform the operation corresponding to the above-described live message display method.

[0017] According to a fourth aspect of the embodiments of this application, a computer storage medium is provided, the storage medium storing at least one executable instruction, the executable instruction causing a processor to perform an operation corresponding to the above-described live message display method.

[0018] According to a fifth aspect of the embodiments of this application, a computer program product is provided, including at least one executable instruction that causes a processor to perform an operation corresponding to the above-described live message display method.

[0019] According to the live message display method and apparatus provided in this application, by listening to the change events of components in the webpage and counting the frequency of component changes, timely adaptive adjustments can be made based on the frequency of component changes to switch between different display modes. This makes the display of live messages in the webpage both convenient for users to view the latest content and provides users with a good viewing experience. Moreover, it does not require manual pre-setting, reducing the difficulty of coding development.

[0020] The above description is only an overview of the technical solution of this application. In order to better understand the technical means of this application and to implement it in accordance with the contents of the specification, and to make the above and other objects, features and advantages of this application more obvious and understandable, the following are specific embodiments of this application. Attached Figure Description

[0021] Various other advantages and benefits will become apparent to those skilled in the art upon reading the following detailed description of preferred embodiments. The accompanying drawings are for illustrative purposes only and are not intended to limit the embodiments of this application. Furthermore, the same reference numerals denote the same parts throughout the drawings. In the drawings: Figure 1 A flowchart of a live message display method according to an embodiment of this application is shown; Figure 2A flowchart of a live message display method according to another embodiment of this application is shown; Figure 3 A schematic diagram of the structure of a live message display device according to an embodiment of this application is shown; Figure 4 A schematic diagram of the structure of a computing device according to an embodiment of this application is shown. Detailed Implementation

[0022] Exemplary embodiments of the present disclosure will now be described in more detail with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be implemented in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.

[0023] First, the terms and concepts involved in one or more embodiments of this application will be explained.

[0024] Scrolling frame dropping: Skipping animation frames during scrolling and directly positioning to the target position to ensure timely display of content; Adaptive frame dropping: Automatically determines whether to drop frames based on the content update frequency; DOM change frequency: The number of times DOM child elements change per unit of time; Sliding time window: A time range used to count the frequency of DOM changes; the window slides and updates over time. Frame dropping trigger threshold: The critical frequency value for triggering the frame dropping mechanism, determined based on a balance between performance bottlenecks and user experience.

[0025] Figure 1 A flowchart of a live message display method according to an embodiment of this application is shown, such as... Figure 1 As shown, the method includes the following steps: Step S101: Listen for component change events on the webpage and obtain the change event stream.

[0026] This embodiment is based on scenarios where high-frequency messages are displayed on web pages, such as live streams and chat rooms. When using scrolling animations to display live stream messages, users can view real-time updates without manual operation, providing a good viewing experience. However, when there are too many live stream messages, scrolling animations may experience display delays, preventing the latest messages from being displayed to users in a timely manner. Manual settings require pre-writing complex logic, but also suffer from issues such as inaccurate prediction of dynamic changes in the live stream message update frequency.

[0027] Considering the above issues, this embodiment addresses scenarios where live webpage messages need to be displayed frequently. Starting with the live webpage itself, it listens for component change events related to the live webpage. These component change events are caused by the addition of corresponding component nodes due to the increase of live webpage messages. These events include events such as component node addition, component position change, and component container size change. By listening to these component change events, a change event stream can be obtained. Here, the obtained change event stream is a data sequence formed by a series of monitored component change events arranged in chronological order.

[0028] For listening to component change events on a webpage, you can use interfaces that asynchronously monitor changes in the DOM tree to monitor the components displaying live stream messages in real time, such as the timestamps and number of nodes added to these components, or monitor changes in the scrolling positions of components to obtain scrolling position information. Alternatively, you can use interfaces that asynchronously monitor changes in the size of the container containing the component displaying live stream messages to obtain container size information. Or, you can monitor component changes to determine changes in the component queue and obtain queue length information. These are just examples; specific settings depend on the implementation and are not limited here.

[0029] Furthermore, the growth rate of the number of live stream messages will vary at different times. By statistically analyzing the number of historical messages at different times, real-time monitoring can be used for periods with a large number of live stream messages to manage the playback of live stream messages and ensure the real-time display of live stream messages. For periods with fewer live stream messages, timers can be used for periodic monitoring, eliminating the need for real-time monitoring. The above are just examples; specific settings should be configured according to the implementation situation, and no limitations are made here.

[0030] Step S102: Calculate the component change frequency within the preset sliding time window based on the change event stream.

[0031] The change event stream obtained from monitoring components on the webpage includes a sequence of component change data corresponding to multiple component change events occurring over time. The change event stream includes the initial timestamp of the component change and the change data for each component.

[0032] The change event stream acquires a series of component change data sequences that occur sequentially over time. This embodiment employs a preset sliding time window to ensure the real-time nature of live message statistics. The time window slides over time, automatically discarding expired data to ensure timely processing of the latest data. The preset sliding time window can be determined based on animation scrolling time and visual delay data. For example, it balances animation scrolling time with acceptable visual delay data for the user. If the animation scrolling time is several hundred milliseconds and the user's perception threshold for visual delay is approximately 1 second, the preset sliding time window should be longer than the animation scrolling time but shorter than the visual delay data, such as 1000ms. The above is an example; specific settings should be made according to the implementation situation and are not limited here.

[0033] Component change frequency refers to the number of times a component changes within a unit of time (preset sliding time window). Based on the component change frequency, the growth of live stream messages within a unit of time can be determined in real time, and this growth can be used to determine whether the growth of live stream messages within the current unit of time is in a high-frequency or low-frequency scenario. Component change frequency can be expressed as the number of times DOM child elements change within a unit of time, such as the number of added component nodes, changes in component container size, component scroll distance, and the growth of the queue length corresponding to the component.

[0034] The difference between the initial change timestamp and the current time can be used to determine the change time window. This window can be compared with a preset sliding time window. When the difference is less than or equal to the preset sliding time window, the frequency of component changes from the initial change timestamp to the current time can be counted to obtain the real-time growth of live messages.

[0035] Furthermore, the preset sliding time window can also adjust the animation scrolling time based on the number of live messages in different time periods during historical live streams, using different thresholds to flexibly respond and reduce the number of comparison operations. No limitations are specified here.

[0036] Step S103: Based on the comparison results of component change frequency and frame dropping trigger threshold, dynamically and adaptively determine the display mode of live messages, so as to adjust the live messages to be displayed in different display modes.

[0037] Based on the preset sliding time window, the component change frequency is obtained. Comparing this frequency with the frame drop trigger threshold reflects whether the live stream message growth is high-frequency or low-frequency within the current time period. The frame drop trigger threshold is used to classify high-frequency or low-frequency live stream message growth scenarios. When the component change frequency exceeds the frame drop trigger threshold, it indicates that the live stream message growth is rapid within the current time period, falling into a high-frequency scenario. The scrolling animation display method may not be able to promptly display the latest live stream messages to the user, requiring a corresponding adjustment to the live stream message display mode to frame drop mode to quickly locate the latest live stream message and avoid delayed display. If the component change frequency does not exceed the frame drop trigger threshold, it indicates that the live stream message growth is slow within the current time period, falling into a low-frequency scenario. The scrolling animation display method can promptly display the latest live stream messages to the user, and it also makes it convenient for users to view all new live stream messages. Adjusting the live stream message display mode to animation mode provides a good viewing experience for users while they view the live stream messages.

[0038] This embodiment can dynamically and adaptively determine different display modes for live messages based on the comparison results of component change frequency and frame drop trigger threshold, and dynamically switch display modes to cope with the real-time update frequency of live messages, without the need for manual intervention, making it more convenient and flexible.

[0039] Here, the frame drop trigger threshold can be set based on the performance consumption of animation scrolling and visual latency data. For example, the required scrolling time can be determined by analyzing the consumption of various device performance resources by the animation scrolling, and then matched with the visual latency data acceptable to the user to determine the final frame drop trigger threshold. For instance, if the frame drop trigger threshold is a node number threshold, it can be set to 3 per second. Furthermore, the frame drop trigger threshold can also be adjusted in real time by taking into account the performance of the terminal device used by the webpage, the different types of live messages displayed, and the collected display feedback information, in order to meet the needs of different terminal devices, different live message types, and different user visual experience feedback, and to provide personalized display effects adapted to different terminal devices, different live message types, and different user visuals.

[0040] According to the live message display method provided in this application, by listening to the change events of components in the webpage and counting the frequency of component changes, timely adaptive adjustments can be made based on the frequency of component changes to switch between different display modes. This makes the display of live messages in the webpage both convenient for users to view the latest content and provides users with a good viewing experience. Moreover, it does not require manual pre-setting, reducing the difficulty of coding and development.

[0041] Figure 2A flowchart of a live message display method according to an embodiment of this application is shown, such as... Figure 2 As shown, the method includes the following steps: Step S201: Monitor the change events of the specified message component in the webpage in real time and / or at regular intervals, and record the change event stream corresponding to the change events.

[0042] Live stream messages displayed on the webpage can be presented using corresponding message components. These include like messages, text chat messages, image / emoji chat messages, video live stream messages, and virtual gift messages. Different types of live stream messages can be displayed using different message components. During monitoring, specific message components on the webpage can be monitored in real-time or on a timed basis. For example, when there are many live stream viewers, many live stream messages from historical periods, or frequent interactions, real-time or timed monitoring can be implemented based on the number of views, time periods, and interaction traffic. There are no specific limitations here.

[0043] This feature listens for change events in specified message components, retrieves the change data within these events, and records a series of change event streams generated in chronological order. Component change events are primarily caused by the addition of live messages. By listening for events such as adding component nodes, changing component positions, and changing component container sizes, the corresponding change event streams are obtained. This streams include information such as the initial change timestamp, the number of changed component nodes, component container size, component scroll position, and the length of the corresponding queue. Different change event streams are retrieved depending on the specific component change event; the specific stream retrieval depends on the implementation and is not limited here.

[0044] Step S202: Use the initial change timestamp as the window start time, calculate the difference between the initial change timestamp and the current time, and determine whether the difference is greater than the preset sliding time window.

[0045] The initial change timestamp in the change event stream is used as the start time of the sliding time window. The difference between the initial change timestamp and the current time is calculated and compared with a preset sliding time window. The preset sliding time window can be set to, for example, 1000ms. By comparing with the preset sliding time window, the time window slides, ensuring that the judgment is based on the latest live news in the current unit of time. Historical data that exceeds the time window can be discarded in a timely manner. Here, the change event stream can record the timestamp corresponding to each component change event. The timestamps are sorted from first to last, and the timestamp that appears first in the sorted list is the initial change timestamp.

[0046] When the difference is not greater than the preset sliding time window, step S203 can be executed to statistically analyze the change event stream within the preset sliding time window, determine the component change frequency, and adjust the display mode of the live message; when the difference is greater than the preset sliding time window, it means that compared with the time of the initial component change event, the current time has exceeded the unit time, and the corresponding live message should have been displayed. In this case, the data in the expired change event stream needs to be discarded, and step S207 is executed to reset the window start time and start timing again in order to cope with the new live messages that need to be displayed.

[0047] The preset sliding time window here is a time range used to statistically analyze the frequency of component changes. It better balances statistical accuracy and response speed, and is determined based on the animation scrolling completion time and the user's perceived viewing latency, such as 1000ms. Furthermore, to better adapt to real-time live message displays, a preset sliding time window can be set based on the current device performance of the webpage. The size of the preset sliding time window is inversely proportional to the device performance. That is, when the terminal device used by the webpage has high performance and the animation scrolling completion time is relatively short, the preset sliding time window can be shortened accordingly to improve response speed. A corresponding preset sliding time window can be set according to the animation duration of the current live message; the size of the preset sliding time window is directly proportional to the animation duration. When the animation duration is long, the preset sliding time window is correspondingly extended. The preset sliding time window can also be adjusted according to display feedback information, such as user viewing preferences. The above are examples; specific settings should be made according to the implementation situation, and no limitations are specified here.

[0048] This embodiment uses a preset sliding time window, which can be adjusted in real time according to various conditions. It can adapt to scenarios where live streaming is continuous and the frequency of component changes is dynamically changing, ensuring the real-time performance, smoothness, and accuracy of subsequent component change frequency statistics.

[0049] Step S203: Determine the component change frequency within the preset sliding time window based on the change event flow.

[0050] When the difference is determined to be no greater than the preset sliding time window, the data of the currently recorded change event stream can be statistically analyzed to obtain the component change frequency within the preset sliding time window.

[0051] Specifically, the data recorded in the change event stream may differ depending on the specific component change event. Statistics can be performed based on this data, such as the cumulative number of changed component nodes within the difference range. The total number of changed component nodes can then be used to determine the component change frequency within a preset sliding time window. The increase in the number of component nodes is based on the construction of corresponding components for newly added live stream messages, and the number of component nodes reflects the increase in live stream messages. A component can display one or multiple live stream messages, depending on the implementation; no specific limitation is made here. If the number of changed component nodes accumulated within a preset sliding time window is 3, then the component change frequency within the preset sliding time window is 3. Alternatively, if the change event stream obtains changes in the size of the component container, adding a live message to be displayed will cause the container's size to change accordingly. Based on the changes in the container's size information within the preset sliding time window, the magnitude of the size change is determined. For example, if the container size increases by xx, the increased size, i.e., the container size change information, is determined as the component change frequency within the preset sliding time window. Alternatively, if the change event stream obtains information about component scrolling, adding a new live message causes existing live messages to scroll upwards, generating a component position change event. The component scrolling position information can be obtained. Based on the changes in the component scrolling position within the preset sliding time window, the difference between the component scrolling position at the start time and the current scrolling position is used to determine the scrolling distance, which is then used as the component change frequency within the preset sliding time window. Alternatively, if the queue length information corresponding to the component increases due to the addition of live messages within the preset sliding time window, the increase in queue length is used as the component change frequency within the preset sliding time window. These are just examples; specific settings depend on the implementation and are not limited here.

[0052] Step S204: Determine whether the component change frequency exceeds the frame dropping trigger threshold.

[0053] The frame drop trigger threshold corresponds to the component change frequency and may include thresholds such as node number threshold, container size threshold, scroll position threshold, and length threshold. The corresponding frame drop trigger threshold is used for comparison based on different component change frequencies.

[0054] The frame drop trigger threshold can be set based on the performance consumption of animation scrolling and visual latency data. The required scrolling time can be determined by analyzing the consumption of various device performance resources by the animation scrolling, and then matched with the visual latency data acceptable to the user to determine the final frame drop trigger threshold. When setting the frame drop trigger threshold for different component change frequencies, the balance between the performance consumption of animation scrolling and visual latency data must be considered. The frame drop trigger threshold divides the display of live messages into high-frequency and low-frequency scenarios. In high-frequency scenarios, there are many live messages, and animation scrolling cannot quickly display the latest live messages to the user; in low-frequency scenarios, there are fewer live messages, and animation scrolling can provide a good viewing experience for the user. Therefore, by dividing different scenarios through the frame drop trigger threshold, the display mode of live messages can be dynamically and adaptively adjusted to match the required display mode in different scenarios.

[0055] If the component change frequency exceeds the frame dropping trigger threshold, it indicates that the current scenario is a high-frequency live message scenario. Then, step S205 is executed to adjust the display mode of the live message to frame dropping mode to avoid delay in the display of live messages and allow users to watch the latest live messages more promptly. If the component change frequency does not exceed the frame dropping trigger threshold, it indicates that the current scenario is a low-frequency live message scenario. Then, step S206 is executed to adjust the display mode of the live message to animation mode to provide users with a good message viewing experience.

[0056] Furthermore, the frame drop trigger threshold can be adjusted in real time based on factors such as the performance of the terminal device used by the webpage, the different types of live stream messages displayed, and collected display feedback information. This allows for personalized display effects adapted to different terminal devices, live stream message types, and user visual experiences. Specifically, the frame drop trigger threshold is set based on the current device performance of the webpage. The threshold value is directly proportional to the device performance, which includes factors such as CPU, memory, and rendering performance. That is, when the terminal device used by the webpage has higher performance, the animation scrolling time is relatively shorter, and more animation scrolling can be displayed in the same amount of time. Therefore, the frame drop trigger threshold is increased accordingly to provide a better animation experience. Conversely, for terminal devices with lower performance, the frame drop trigger threshold is decreased to ensure smoothness. Alternatively, a corresponding frame-dropping trigger threshold can be set based on the animation duration required for displaying different types of live stream messages. Live stream message types can include different formats such as text, images, and videos. For text messages, which have shorter animation durations, the frame-dropping trigger threshold can be appropriately increased. Conversely, for image and video messages, which have longer animation durations, the frame-dropping trigger threshold can be appropriately decreased. In other words, the frame-dropping trigger threshold is inversely proportional to the animation duration of different types of live stream messages. Based on display feedback, such as user viewing preferences, the frame-dropping trigger threshold can be adjusted accordingly. The above is an example; specific settings should be determined based on the implementation situation and are not limited here.

[0057] Step S205: Adjust the display mode of the live broadcast message to frame dropping mode.

[0058] For high-frequency scenarios, frame dropping mode allows users to quickly locate the latest live stream message, avoiding delays in its display. Specifically, for the live stream message component, the instant scrolling API can be called to position the user at the target location for displaying the live stream message. For example, the instant scrolling API can directly scroll the scrollbar of the live stream message component to the position of the latest live stream message. Alternatively, shortening the scrolling animation duration of the live stream message component can increase the scrolling speed, reduce the time required to scroll to the latest live stream message, avoid delays, and preserve the animation display effect.

[0059] Step S206: Adjust the display mode of the live broadcast message to animation mode.

[0060] For low-frequency scenarios, an animation mode can be used. For example, for the live message component, the smooth scrolling interface can be called to play a scrolling animation to display the live message. The smooth scrolling interface allows the live message component to scroll smoothly at the same speed, providing a good user viewing experience. Alternatively, by adjusting the interface, the scrolling animation duration of the live message component in the original high-frequency scenario can be increased to maintain the scrolling animation display effect. By adaptively adjusting the scrolling animation duration, different high-frequency or low-frequency scenarios can be handled.

[0061] Step S207: Reset the window start time and set the display mode of the live message to animation mode.

[0062] When the difference is greater than the preset sliding time window, that is, the difference between the initial change timestamp and the current time has exceeded the preset sliding time window, the expired data is discarded, the window start time is reset, such as to the current time, and the display mode of the live message is set to animation mode to ensure the user's viewing experience.

[0063] According to the live message display method provided in this application, the method monitors changes in live message components on a webpage, counts the frequency of component changes within a preset sliding time window, and obtains the latest changes in live message components in real time, thereby accurately counting the frequency of component changes. By comparing with a frame drop trigger threshold, high-frequency or low-frequency scenarios are identified, and adaptive adjustments are made for different scenarios, switching to different display modes. For high-frequency scenarios, this ensures that users can view the latest live messages in a timely manner, avoiding message delays; for low-frequency scenarios, an animated scrolling model provides users with a good viewing experience. Adaptively adjusting the display mode of live messages on the webpage requires no manual intervention and avoids the inability of a single animation mode to adapt to the dynamic component change frequency of live messages. Furthermore, both the frame drop trigger threshold and the preset sliding time window can be adaptively adjusted to provide users with personalized display effects that match terminal devices, different live messages, and different user viewing needs, thereby improving the user's viewing experience.

[0064] Figure 3 A schematic diagram of the structure of a live message display device according to an embodiment of this application is shown. Figure 3 As shown, the device includes: The listening module 310 is suitable for listening to component change events of a webpage and obtaining the change event stream; The frequency calculation module 320 is adapted to calculate the component change frequency within a preset sliding time window based on the change event flow; The adaptive adjustment module 330 is adapted to dynamically and adaptively determine the display mode of the live message based on the comparison results of the component change frequency and the frame drop trigger threshold, so as to adjust the live message to be displayed in different display modes; the display modes include animation mode and / or frame drop mode; the frame drop trigger threshold is determined based on the device performance of the webpage, the message type and / or the display feedback information.

[0065] Optionally, the monitoring module 310 is further adapted to: Monitor changes to specified message components on a webpage in real time and / or at regular intervals, and record the change event stream corresponding to the change events. Change events include component node addition events, component position change events, and / or component container size change events. The change event stream includes the initial change timestamp, the number of changed component nodes, component container size information, component scroll position information, and / or the queue length information corresponding to the component.

[0066] Optionally, the frequency calculation module 320 is further adapted to: Use the initial change timestamp as the window start time, and calculate the difference between the initial change timestamp and the current time; Determine if the difference is greater than a preset sliding time window; the preset sliding time window is determined based on the animation scrolling time and / or visual delay data. If not, the component change frequency within the preset sliding time window is determined based on the change event flow.

[0067] Optionally, the frequency calculation module 320 is further adapted to: The number of component nodes that change within the cumulative difference is used to determine the component change frequency within a preset sliding time window. And / or, The container size change information is determined based on the change in component container size information within a preset sliding time window, and is used as the component change frequency within the preset sliding time window. And / or, The scrolling distance is determined based on the difference in the scrolling positions of the components within the preset sliding time window, and is used as the component change frequency within the preset sliding time window; And / or, The frequency of component change within the preset sliding time window is determined by the increase in the queue length information corresponding to the component within that window.

[0068] Optionally, if the difference is greater than a preset sliding time window, the device further includes: a reset module 340, adapted to reset the window start time and set the display mode of the live message to animation mode.

[0069] Optionally, the adaptive adjustment module 330 is further adapted to: Determine whether the component change frequency exceeds the frame drop trigger threshold; the frame drop trigger threshold includes the node number threshold, container size threshold, scroll position threshold, and / or length threshold; the frame drop trigger threshold is determined based on the performance consumption and / or visual latency data of the animation scrolling; If so, adjust the display mode of the live stream messages to frame dropping mode; If not, adjust the display mode of the live stream messages to animation mode.

[0070] Optionally, the adaptive adjustment module 330 is further adapted to: For the live message component, call the real-time scrolling interface to locate the target position and display the live message; And / or, shorten the scrolling animation duration of the live message component.

[0071] Optionally, the adaptive adjustment module 330 is further adapted to: For the live message component, call the smooth scrolling interface to play a scrolling animation to display the live message; And / or, increase the duration of the scrolling animation in the live message component.

[0072] Optionally, the device further includes: a threshold adjustment module 350, adapted to set a frame dropping trigger threshold according to the current device performance of the webpage; the size of the frame dropping trigger threshold is proportional to the device performance. And / or, Set the corresponding frame dropping trigger threshold according to the animation duration required for displaying different types of live messages; the frame dropping trigger threshold is inversely proportional to the animation duration of different types of live messages; And / or, Adjust the frame drop trigger threshold based on the feedback information displayed.

[0073] Optionally, the device also includes: a window adjustment module 360, adapted to set a preset sliding time window according to the current device performance of the webpage; the size of the preset sliding time window is inversely proportional to the device performance. And / or, Set a corresponding preset sliding time window based on the animation duration of the live message; the size of the preset sliding time window is proportional to the animation duration. And / or, Adjust the preset sliding time window based on the feedback from the display.

[0074] The descriptions of the above modules refer to the corresponding descriptions in the method embodiments, and will not be repeated here.

[0075] According to the live message display device provided in this application, by listening to the change events of components in the webpage and counting the frequency of component changes, it can make timely adaptive adjustments based on the frequency of component changes and switch between different display modes. This makes the display of live messages in the webpage both convenient for users to view the latest content and provide users with a good viewing experience. Moreover, it does not require manual pre-setting, reducing the difficulty of coding and development.

[0076] This application also provides a non-volatile computer storage medium storing at least one executable instruction that can perform the operation corresponding to the live message display method in any of the above method embodiments.

[0077] This application also provides a computer program product, which includes at least one executable instruction or computer program that enables a processor to perform the operation corresponding to the live message display method in any of the above method embodiments.

[0078] Figure 4 The diagram shows a structural schematic of a computing device according to an embodiment of the present application. The specific embodiments of the present application do not limit the specific implementation of the computing device.

[0079] like Figure 4 As shown, the computing device may include: a processor 402, a communications interface 404, a memory 406, and a communications bus 408.

[0080] in: The processor 402, communication interface 404, and memory 406 communicate with each other via communication bus 408.

[0081] Communication interface 404 is used to communicate with other network elements such as clients or other servers.

[0082] The processor 402 is used to execute program 410, specifically to execute the relevant steps in the above-described live message display method embodiment.

[0083] Specifically, program 410 may include program code that includes computer operation instructions.

[0084] Processor 402 may be a central processing unit (CPU), an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement this application. The computing device includes one or more processors, which may be processors of the same type, such as one or more CPUs; or processors of different types, such as one or more CPUs and one or more ASICs.

[0085] Memory 406 is used to store program 410. Memory 406 may include high-speed RAM memory, and may also include non-volatile memory, such as at least one disk storage device.

[0086] Specifically, program 410 can be used to cause processor 402 to execute the live message display method in any of the above method embodiments. The specific implementation of each step in program 410 can be found in the corresponding descriptions of the steps and units in the above live message display embodiments, and will not be repeated here. Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working process of the devices and modules described above can be referred to the corresponding process descriptions in the foregoing method embodiments, and will not be repeated here.

[0087] The algorithms or displays provided herein are not inherently related to any particular computer, virtual system, or other device. Various general-purpose systems can also be used in conjunction with the teachings herein. The required structure for constructing such systems is apparent from the above description. Furthermore, this application is not directed to any particular programming language. It should be understood that the content of this application described herein can be implemented using various programming languages, and the above description of specific languages ​​is for the purpose of disclosing preferred embodiments of this application.

[0088] Numerous specific details are set forth in the specification provided herein. However, it will be understood that embodiments of this application may be practiced without these specific details. In some instances, well-known methods, structures, and techniques have not been shown in detail so as not to obscure the understanding of this specification.

[0089] Similarly, it should be understood that, in order to simplify this application and aid in understanding one or more of the various inventive aspects, in the above description of exemplary embodiments of this application, various features of this application are sometimes grouped together into a single embodiment, figure, or description thereof. However, this method of disclosure should not be construed as reflecting an intention that the claimed application requires more features than are expressly recited in each claim. Rather, as reflected in the following claims, inventive aspects lie in fewer than all features of a single foregoing disclosed embodiment. Therefore, the claims following the detailed description are hereby expressly incorporated into that detailed description, wherein each claim itself is a separate embodiment of this application.

[0090] Those skilled in the art will understand that modules in the device of the embodiments can be adaptively changed and placed in one or more devices different from that embodiment. Modules, units, or components in the embodiments can be combined into a single module, unit, or component, and further, they can be divided into multiple sub-modules, sub-units, or sub-components. Except where at least some of such features and / or processes or units are mutually exclusive, any combination can be used to combine all features disclosed in this specification (including the accompanying claims, abstract, and drawings) and all processes or units of any method or device so disclosed. Unless expressly stated otherwise, each feature disclosed in this specification (including the accompanying claims, abstract, and drawings) may be replaced by an alternative feature that serves the same, equivalent, or similar purpose.

[0091] Furthermore, those skilled in the art will understand that although some embodiments herein include certain features included in other embodiments but not others, combinations of features from different embodiments are intended to be within the scope of this application and form different embodiments. For example, in the following claims, any of the claimed embodiments can be used in any combination.

[0092] The various component embodiments of this application can be implemented in hardware, or as software modules running on one or more processors, or a combination thereof. Those skilled in the art will understand that microprocessors or digital signal processors (DSPs) can be used in practice to implement some or all of the functions of some or all of the components according to this application. This application can also be implemented as a device or apparatus program (e.g., a computer program and computer program product) for performing part or all of the methods described herein. Such an implementation of this application can be stored on a computer-readable medium, or can be in the form of one or more signals. Such signals can be downloaded from an Internet website, provided on a carrier signal, or provided in any other form.

[0093] It should be noted that the above embodiments are illustrative of this application and not restrictive, and that those skilled in the art can devise alternative embodiments without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses should not be construed as limiting the claims. The word "comprising" does not exclude the presence of elements or steps not listed in the claims. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. This application can be implemented by means of hardware comprising several different elements and by means of a suitably programmed computer. In the unit claims enumerating several means, several of these means may be embodied by the same item of hardware. The use of the words first, second, and third, etc., does not indicate any order. These words can be interpreted as names. The steps in the above embodiments, unless otherwise specified, should not be construed as limiting the order of execution. The algorithms and displays provided herein are not inherently related to any particular computer, virtual system, or other device. Various general-purpose systems can also be used with the teachings herein. The required structure for constructing such systems is apparent from the above description. Furthermore, the embodiments of this application are not directed to any particular programming language. It should be understood that the contents of the embodiments of this application described herein can be implemented using various programming languages, and the above description of a particular language is for the purpose of disclosing the best implementation of the embodiments of this application.

Claims

1. A method for displaying live stream messages, comprising: Listen for component change events on the webpage and obtain the event stream; Based on the change event stream, the component change frequency within the preset sliding time window is calculated; Based on the comparison results between the component change frequency and the frame dropping trigger threshold, the display mode of the live message is dynamically and adaptively determined so as to adjust the live message to be displayed in different display modes. The display modes include animation mode and / or frame dropping mode; the frame dropping trigger threshold is determined based on the device performance of the webpage, message type and / or display feedback information.

2. The method according to claim 1, wherein, The process of listening for component change events on a webpage and obtaining the change event stream further includes: Monitor changes to specified message components on a webpage in real time and / or at regular intervals, and record the change event stream corresponding to the change events; the change events include component node addition events, component position change events, and / or component container size change events; the change event stream includes initial change timestamp, number of changed component nodes, component container size information, component scroll position information, and / or component corresponding queue length information.

3. The method according to claim 1 or 2, wherein, The step of calculating the component change frequency within a preset sliding time window based on the change event stream further includes: Using the initial change timestamp as the window start time, calculate the difference between the initial change timestamp and the current time; Determine whether the difference is greater than a preset sliding time window; the preset sliding time window is determined based on the animation scrolling time and / or visual delay data; If not, the component change frequency within the preset sliding time window is determined based on the change event stream.

4. The method according to claim 3, wherein, The step of determining the component change frequency within the preset sliding time window based on the change event stream further includes: The frequency of component change within a preset sliding time window is obtained by accumulating the number of changing component nodes within the difference. And / or, The container size change information is determined based on the change in component container size information within the preset sliding time window, and is used as the component change frequency within the preset sliding time window. And / or, The scrolling distance is determined based on the difference in the scrolling positions of the components within the preset sliding time window, and is used as the component change frequency within the preset sliding time window; And / or, The increase in the queue length information corresponding to the component within the preset sliding time window is used as the component change frequency within the preset sliding time window.

5. The method according to claim 3, wherein, If the difference is greater than a preset sliding time window, the method further includes: Reset the window start time and set the live message display mode to animation mode.

6. The method according to any one of claims 1-5, wherein, Based on the comparison results between the component change frequency and the frame dropping trigger threshold, the display mode of the live broadcast message is dynamically and adaptively determined to adjust the live broadcast message to be displayed in different display modes. This further includes: Determine whether the frequency of component changes exceeds the frame drop trigger threshold; the frame drop trigger threshold includes a node number threshold, a container size threshold, a scroll position threshold, and / or a length threshold; the frame drop trigger threshold is determined based on the performance and / or visual latency data consumed by the animation scrolling. If so, adjust the display mode of the live stream messages to frame dropping mode; If not, adjust the display mode of the live stream messages to animation mode.

7. The method according to claim 6, wherein, The adjustment of the live message display mode to frame dropping mode further includes: For the live message component, call the real-time scrolling interface to locate the target position and display the live message; And / or, shorten the scrolling animation duration of the live message component.

8. The method according to claim 6, wherein, The adjustment of the live message display mode to animation mode further includes: For the live message component, call the smooth scrolling interface to play a scrolling animation to display the live message; And / or, increase the duration of the scrolling animation of the live message component.

9. The method according to any one of claims 1-8, wherein, The method further includes: The frame dropping trigger threshold is set according to the current device performance of the webpage; the frame dropping trigger threshold is directly proportional to the device performance. And / or, Set the corresponding frame dropping trigger threshold according to the animation duration required for displaying different types of live messages; the frame dropping trigger threshold is inversely proportional to the animation duration of different types of live messages; And / or, Adjust the frame drop trigger threshold based on the feedback information displayed.

10. The method according to any one of claims 1-8, wherein, The method further includes: The preset sliding time window is set according to the current device performance of the webpage; the size of the preset sliding time window is inversely proportional to the device performance. And / or, Set a corresponding preset sliding time window based on the animation duration of the live message; the size of the preset sliding time window is proportional to the animation duration. And / or, Adjust the preset sliding time window based on the feedback from the display.

11. A live message display device, comprising: The listening module is suitable for listening to component change events on a webpage and obtaining the event stream. The frequency calculation module is adapted to calculate the component change frequency within a preset sliding time window based on the change event stream; The adaptive adjustment module is adapted to dynamically and adaptively determine the display mode of the live message based on the comparison result of the component change frequency and the frame dropping trigger threshold, so as to adjust the live message to be displayed in different display modes. The display modes include animation mode and / or frame dropping mode; the frame dropping trigger threshold is determined based on the device performance of the webpage, message type and / or display feedback information.

12. A computing device, comprising: The processor, memory, communication interface, and communication bus are provided, wherein the processor, memory, and communication interface communicate with each other via the communication bus. The memory is used to store at least one executable instruction, which causes the processor to perform the operation corresponding to the live message display method as described in any one of claims 1-10.

13. A computer storage medium storing at least one executable instruction that causes a processor to perform an operation corresponding to the live message display method as described in any one of claims 1-10.

14. A computer program product comprising at least one executable instruction that causes a processor to perform an operation corresponding to the live message display method as described in any one of claims 1-10.

Images