Introducción En esta guía traducida y adaptada aprenderás a implementar notificaciones en tiempo real y persistentes en una aplicación MERN. El objetivo es que la campana de notificaciones se ilumine al instante cuando ocurran pagos, reservas o anuncios administrativos y que el historial sobreviva a recargas y desconexiones.
Qué vamos a construir Dos vías hacen que las notificaciones se sientan correctas: la vía en tiempo real con Socket.IO para enviar eventos inmediatamente a usuarios o roles concretos, y la vía de persistencia con MongoDB para almacenar el historial y los estados no leídos. El cliente obtiene las ultimas 50 notificaciones al montar, escucha eventos por socket y antepone nuevos items, y marca como leídas las notificaciones al hacer clic.
Requisitos previos Node 18 o superior, npm o pnpm, y una conexión a MongoDB local o Atlas. Para ejemplos locales usaremos mongodb://localhost:27017/mern_notify.
Estructura del proyecto Crear dos carpetas principales: mern-realtime-notify/server y mern-realtime-notify/client. El servidor usará Express, Socket.IO y Mongoose. El cliente será React con Vite y socket.io-client.
Servidor: pasos clave 1 Inicializar y añadir dependencias express cors dotenv mongoose socket.io jsonwebtoken bcrypt y nodemon en dev. 2 Configurar servidor basic con autenticación de socket usando jwt. Los sockets realizan handshake con auth token y el servidor une cada socket a una sala por usuario y por rol para permitir emisiones directas. 3 Definir modelos User y Notification en Mongoose. El modelo Notification guarda userId type title message meta readAt y timestamps. 4 Rutas de autenticación con register y login que devuelven JWT. 5 Rutas de notificaciones que permiten obtener las ultimas 50, marcar como leida y un endpoint test que guarda la notificación en Mongo y emite el evento notification al usuario concreto.
Ejemplo de variables de entorno PORT=5000 MONGO_URI=mongodb://localhost:27017/mern_notify JWT_SECRET=dev_super_secret_change_me CORS_ORIGINS=https://localhost:5173
Buenas prácticas de seguridad y diseño En la autenticación de socket verificar el token y cargar el usuario desde la base de datos, nunca confiar en datos enviados por el cliente. Al marcar como leída siempre filtrar por id y userId para evitar que un usuario modifique notificaciones de otro. Habilitar CORS tanto en Express como en Socket.IO y asegurarse de permitir WebSocket upgrades en proxies reversos como Nginx.
Cliente: pasos clave 1 Crear app con Vite y React, instalar socket.io-client axios y utilidades. 2 Añadir helper de API para configurar cabecera Authorization con Bearer token. 3 Crear contexto de autenticación que guarde token y usuario y permita login, register y logout. 4 Crear contexto de socket que haga handshake pasando auth token y gestione la conexión y desconexión. 5 Implementar hook useNotifications que al montar obtiene las ultimas 50 notificaciones desde /api/notifications, escucha eventos de socket y antepone nuevas notificaciones a la lista, calcula el conteo de no leídas y expone markRead que actualiza localmente y llama al endpoint de read.
UI mínima Un componente de Login simple para registrar y autenticar usuarios y un componente Bell que muestra el contador de no leídas y un desplegable con la lista. Al clicar una notificación se marca como leída en cliente y servidor y permanece en el historial tras recargar.
Probar Con el cliente autenticado se puede llamar al endpoint POST /api/notifications/test enviando Authorization Bearer seguido del JWT para que el servidor cree la notificación y emita el evento. La notificación debe aparecer al instante en la UI y mantenerse tras recargar la página.
Errores comunes CORS no configurado en ambos lados, handshake sin token, no limpiar listeners de socket en desmontaje, proxies que bloquean upgrades websocket, y no filtrar owner al actualizar notificaciones.
Extensiones y mejoras Emisiones por rol para enviar a role_admin role_doctor role_patient, trabajos programados con Redis y BullMQ para recordatorios, integración con Web Push o FCM para notificaciones de sistema cuando la pestaña está cerrada, soluciones gestionadas como Pusher Ably o PubNub si no se quiere mantener infraestructura de Socket.IO, y canales alternativos como email y SMS para respaldos críticos.
Sobre Q2BSTUDIO Q2BSTUDIO es una empresa de desarrollo de software y aplicaciones a medida especializada en soluciones modernas. Ofrecemos software a medida, desarrollo de aplicaciones a medida, proyectos de inteligencia artificial para empresas, consultoría en ciberseguridad, servicios cloud aws y azure, y servicios inteligencia de negocio. Diseñamos agentes IA e implementamos soluciones de ia para empresas que integran análisis avanzado con herramientas como power bi para visualización y reporting. Nuestro enfoque combina seguridad, escalabilidad y experiencia de usuario para entregar productos empresariales robustos.
Palabras clave para SEO y posicionamiento aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi.
Recapitulación MongoDB almacena las notificaciones, Socket.IO las entrega en tiempo real, y el hook de React mantiene la UI sincronizada y gestiona marcar como leídas. Este patrón es compacto, eficiente y fácil de integrar en cualquier app MERN para conseguir una campana de notificaciones funcional y duradera.