求适配Laravel7/Livewire1.3等技术栈的用户闲置检测插件或方案

Great question! Since you're working with Laravel 7, Livewire 1.3, Turbolinks 5, and Alpine.js v2, here are a few tailored solutions for user idle detection that work similarly to idle-vue:

1. Custom Alpine.js v2 Component (No External Dependencies) #

This is the most flexible option—you can build a lightweight idle detector directly with Alpine.js v2, which plays perfectly with your existing stack and avoids external library bloat.

Here's a ready-to-use implementation:

<!-- Add this wrapper around your app content -->
<div x-data="idleDetector({ 
    timeout: 300000, 
    onIdle: () => this.handleIdle(), 
    onActive: () => this.handleActive() 
})">
    <!-- Your app content here -->
</div>

<script>
// Initialize on Turbolinks page load to handle page transitions
document.addEventListener('turbolinks:load', () => {
    Alpine.data('idleDetector', (config) => ({
        timeoutId: null,
        timeout: config.timeout || 300000, // Default: 5 minutes

        init() {
            this.resetTimer();
            // Listen for common user interaction events
            ['mousemove', 'keydown', 'scroll', 'click'].forEach(event => {
                window.addEventListener(event, () => this.resetTimer());
            });
        },

        resetTimer() {
            clearTimeout(this.timeoutId);
            this.timeoutId = setTimeout(config.onIdle, this.timeout);
            config.onActive?.();
        },

        handleIdle() {
            // Example: Trigger a Livewire action to handle idle state
            @this.call('handleUserIdle');
            // Or show a timeout modal: document.getElementById('idle-modal').classList.remove('hidden');
        },

        handleActive() {
            // Example: Hide idle modal if it's visible
            // document.getElementById('idle-modal').classList.add('hidden');
        }
    }));
});
</script>

In your Livewire component, add the corresponding method to handle backend logic:

public function handleUserIdle()
{
    // Example: Log the user out after idle
    auth()->logout();
    session()->invalidate();
    session()->regenerateToken();
    
    return redirect('/login');
}

2. Integrate idle-js with Alpine.js v2 #

If you prefer using a pre-built library, idle-js is a lightweight, battle-tested option that works seamlessly with your tech stack. It handles edge cases like event throttling out of the box.

Here's how to set it up:

<div x-data="idleWithIdleJs()">
    <!-- Your app content here -->
</div>

<!-- Load the library (use CDN or local file) -->
<script src="https://cdn.jsdelivr.net/npm/idle-js@1.1.3/dist/idle.min.js"></script>

<script>
document.addEventListener('turbolinks:load', () => {
    Alpine.data('idleWithIdleJs', () => ({
        idleInstance: null,

        init() {
            this.idleInstance = new Idle({
                idle: 300000, // 5 minutes of inactivity
                onIdle: () => {
                    console.log('User is idle');
                    // Trigger Livewire event
                    @this.dispatch('user-idle');
                },
                onActive: () => {
                    console.log('User is active again');
                },
                events: ['mousemove', 'keydown', 'scroll', 'click']
            });

            this.idleInstance.start();

            // Clean up on Turbolinks page navigation to avoid duplicate instances
            document.addEventListener('turbolinks:before-visit', () => {
                this.idleInstance.stop();
            });
        }
    }));
});
</script>

Then listen for the user-idle event in your Livewire component to trigger backend actions.

3. Hybrid Livewire + Frontend Approach #

Combine frontend idle detection with Livewire's session management for a robust solution. The frontend detects inactivity, notifies Livewire, and the backend handles session cleanup or user redirection.

This is useful if you need server-side validation of idle state (e.g., to prevent session hijacking or enforce strict timeout policies).

内容的提问来源于stack exchange，提问作者mstdmstd