Add WebSocket support for real-time dashboard updates

[bdraco]

Add WebSocket support for real-time updates

This PR adds WebSocket support to the ESPHome dashboard frontend, working in conjunction with esphome/esphome#10893 to provide real-time updates instead of polling.

Changes

WebSocket Infrastructure

• Added DashboardWebSocket class (src/api/websocket.ts) with:
  • Automatic reconnection with exponential backoff
  • Client-side ping mechanism (25-second intervals)
  • Event-based message handling
  • Connection state management

Real-time Collections

• Created createWebSocketCollection utility (src/util/websocket-collection.ts) for managing real-time data
• Converted device list to use WebSocket updates (src/api/devices.ts)
• Converted online status to use WebSocket updates (src/api/online-status.ts)

Connection Status UI

• Added toast notifications for connection status (src/util/connection-status.ts)
• Shows "Connection lost. Reconnecting..." during disconnections
• Shows "Connection restored" when reconnected
• Displays reconnection attempt counter

Event Types Supported

• initial_state - Initial device and ping status on connection
• entry_added, entry_removed, entry_updated - Device lifecycle events
• entry_state_changed - Device online/offline status changes
• importable_device_added, importable_device_removed - mDNS discovered devices
• ping, pong - WebSocket keepalive

Benefits

• Eliminates polling of /devices and /ping endpoints
• Real-time updates for device changes
• Reduced network traffic (~95% reduction on idle dashboard)
• Improved perceived responsiveness
• Better user experience with connection status feedback

Testing

• Tested with multiple simultaneous dashboard connections
• Verified automatic reconnection on network interruptions
• Confirmed backward compatibility with REST API fallbacks
• Tested with various device state transitions

Related

• Backend implementation: [dashboard] Replace polling with WebSocket for real-time updates esphome#10893
• No configuration changes required for users

[Copilot]

Pull Request Overview

This PR introduces WebSocket support to enable real-time dashboard updates, replacing polling-based approaches for device status and online state monitoring. The implementation provides automatic reconnection with exponential backoff, connection status notifications, and event-driven data synchronization.

Key Changes

• Added WebSocket infrastructure with automatic reconnection and ping mechanisms
• Converted device list and online status from polling to real-time WebSocket updates
• Implemented connection status UI with toast notifications

Reviewed Changes

Copilot reviewed 10 out of 11 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/util/websocket-url.ts	Utility function to build WebSocket URLs with protocol conversion
src/util/websocket-collection.ts	Generic WebSocket collection manager for real-time data updates
src/util/connection-status.ts	Connection status UI with toast notifications
src/esphome-main.ts	Initialize connection status on app startup
src/devices/devices-list.ts	Updated to use new refresh mechanism
src/api/websocket.ts	Core WebSocket client with reconnection and ping support
src/api/online-status.ts	Converted from polling to WebSocket-based updates
src/api/index.ts	Refactored to use shared WebSocket URL builder
src/api/devices.ts	Converted device management to WebSocket events
src/api/dashboard-events.ts	Event type definitions for WebSocket communication

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}