Appearance

Real-time Features ​

File Information ​

  • Path: app/plugins/laravel-echo.client.ts, server/api/pusher/auth.post.ts
  • Purpose: Real-time updates via Pusher WebSocket integration

Overview ​

The Real-time Features system provides live updates and notifications through Pusher WebSocket integration. It includes secure WebSocket authentication, live notifications, and real-time data synchronization across the application.

Architecture ​

System Components ​

  1. Laravel Echo Client: WebSocket client configuration
  2. Pusher Auth Proxy: Secure server-side WebSocket authorization
  3. Notification System: Real-time notification delivery
  4. Event Broadcasting: Real-time event broadcasting
  5. Channel Subscriptions: Private and public channel subscriptions

Key Features ​

1. Secure WebSocket Authentication ​

  • Pusher private channel authorization via server proxy
  • HTTP-only cookie token reading (server-side only)
  • Token never exposed to client JavaScript
  • XSS protection for WebSocket auth
  • Automatic reconnection on connection loss

2. Real-time Notifications ​

  • System notifications
  • User-specific notifications
  • Notification badge counts
  • Auto-dismiss functionality
  • Notification queue management

3. Live Data Synchronization ​

  • Real-time data updates
  • Automatic UI refresh on changes
  • Event-driven updates
  • Optimistic UI updates

4. Channel Subscriptions ​

  • Private channel subscriptions
  • Public channel subscriptions
  • Presence channel support
  • Channel event listeners

File Structure ​

Core Files ​

Plugins ​

  • app/plugins/laravel-echo.client.ts - Laravel Echo client configuration
    • Pusher configuration
    • Channel subscription
    • Secure authentication via server proxy
    • Client-side only (.client.ts)

Server API Routes ​

  • server/api/pusher/auth.post.ts - Pusher auth proxy
    • Secure WebSocket authorization
    • Token validation
    • Channel authorization
    • User permission checks

Components ​

  • app/components/global/Notification.vue - Real-time notification component
    • Notification display
    • Notification types
    • Auto-dismiss
    • Notification queue

Composables ​

  • app/composables/core/components/useDamNotification.ts - Notification composable
    • Notification state management
    • Notification handling
    • Badge count management

Configuration ​

Pusher Configuration ​

typescript
{
  broadcaster: 'pusher',
  key: config.public.pusherKey,        // From PUSHER_KEY env var
  cluster: config.public.pusherCluster, // From PUSHER_CLUSTER env var
  forceTLS: true,                       // Always use secure connections
  authorizer: (channel, options) => {  // Custom secure auth via server proxy
    // Uses /api/pusher/auth endpoint
  }
}

Environment Variables ​

bash
PUSHER_KEY=your-pusher-key
PUSHER_CLUSTER=us2
PUSHER_AUTH_ENDPOINT=/broadcasting/auth

Security Features ​

  1. Secure Authentication: Pusher private channel authorization handled via server-side proxy
  2. HTTP-Only Cookie: Auth tokens read from HTTP-only cookies by server, never exposed to client
  3. XSS Protection: Prevents XSS attacks from stealing Pusher auth tokens
  4. Token Validation: Tokens validated on each channel subscription
  5. User Permissions: User permissions checked before channel access

Usage Examples ​

Subscribe to Channel ​

typescript
// Automatically handled by Laravel Echo
// No manual configuration needed

Listen to Events ​

typescript
Echo.private(`workspace.${workspaceId}`)
  .listen('.asset.uploaded', (e) => {
    // Handle asset uploaded event
  })