type
status
date
slug
summary
tags
category
icon
password
In the web version of Douyin (TikTok China), live rooms have a clever feature: if the user is inactive for a long time, the session automatically exits. This is typically implemented using front-end idle detection, combining event listeners with timers.
Let’s break down how this feature works and how you can implement it yourself.
✅ Core Mechanism
- Listen for user activity: The system listens for events like mouse movement, key presses, clicks, scrolls, and touches.
- Set an inactivity timer: If the user doesn’t interact with the page for a specified period (e.g., 5 minutes), the app performs an action—like exiting the live stream.
- Reset the timer on activity: Every time the user interacts with the page, the timer is reset.
🔧 Example: TypeScript Implementation
Here’s how to implement this using vanilla JavaScript:
🚀 Advanced Option: Using IdleDetector (Experimental API)
For modern browsers, you can also use the IdleDetector API:
⚠️ Note: This API is not supported in Safari and Firefox yet, so it’s not production-ready for all users.
🧠 Additional Considerations
- WebSocket Heartbeats: In live streaming apps, the backend may expect regular “heartbeat” messages from the client. If the front end is inactive and stops sending them, the server may disconnect the session.
- Server-Side Logic: Some systems combine front-end detection with server-side session timeouts.
- Confirmation Dialogs: Optionally, you can prompt the user with a “Still watching?” dialog before exiting.
有关Notion安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~
- Author:Tao Chen
- URL:https://www.nextdaddy.cn/article/2409b3f5-e6ae-80e7-8d44-c7764da5496f
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
