WebSockets for Real-Time Video Processing Progress Updates

Video processing jobs take 30-90 seconds. Leaving users staring at a spinner for that duration without feedback is a quick way to drive churn. Real-time progress updates via WebSocket transform "is this thing working?" anxiety into engaged "I can see it happening" confidence. This post covers the complete WebSocket implementation for video job progress — server setup with ws, integration with BullMQ queue events, client-side hook in React, and graceful reconnection. This is the progress system running on ClipSpeedAI. Architecture Overview Client (React) ←WebSocket→ Node.js WS Server ←Bull Events→ Worker Process The worker updates job progress via BullMQ's progress API. The API server listens for Bull queue events and relays them to the appropriate WebSocket connection (matched by job ID). Server Setup // ws/server.js import { WebSocketServer } from 'ws'; import { QueueEvents } from 'bullmq'; import { verifyJobOwnership } from '../lib/auth.js'; const redisConnection = { host: process.en