@cbm-common/web-socket-service

Biblioteca Angular para integrar WebSockets (basada en ngx-socket-io) y exponer un servicio de conveniencia CbmWebSocketService con eventos y helpers usados por la UI de CBM.

Resumen

• Módulo: CbmWebSocketModule (expone forRoot(config: SocketIoConfig) para configurar la conexión).
• Servicio: CbmWebSocketService (inyectable, expone métodos para escuchar y unirse a rooms: refreshStock, joinStockRoom, refreshReport, joinReport, refreshImportExcel, joinImportExcel, logoutAuth, joinLogoutAuth y socketOn).
• Tipos: CbmWebSocketModel con interfaces como RefreshStock y LogoutAuth.

Dependencias principales

• ngx-socket-io — proveedor de la funcionalidad de sockets.
• @cbm-common/auth-service — usado para obtener datos de la sesión y construir rooms.

Instalación

Este paquete se consume como una librería del monorepo. Asegúrate de tener instaladas las peerDependencies en tu proyecto consumidor.

ng build (desde la raíz del workspace)

ng build web-socket-service

API y uso

1. Registrar providers de ngx-socket-io y del módulo del paquete

Opción recomendada (en app.config.ts): registrar SocketIoModule.forRoot globalmente y luego registrar CbmWebSocketModule.forRoot para el token local.

import { importProvidersFrom } from '@angular/core';
import { SocketIoModule } from 'ngx-socket-io';
import { CbmWebSocketModule } from 'web-socket-service';
import { environment } from './environments/environment';

export const appConfig = {
   providers: [
      importProvidersFrom(
         SocketIoModule.forRoot({ url: environment.webSocket })
      ),
      CbmWebSocketModule.forRoot({ url: environment.webSocket })
   ]
}

Nota: lo importante es que SocketIoModule.forRoot(...) se ejecute una vez en el árbol de providers para que ngx-socket-io registre sus proveedores internos (por ejemplo _WrappedSocket) — ver la sección de troubleshooting si aparece NG0201.

2. Inyectar y usar el servicio

import { Component } from '@angular/core';
import { CbmWebSocketService } from 'web-socket-service';

@Component({/* ... */})
export class MiComponente {
   constructor(private ws: CbmWebSocketService) {
      const observer = new Subject<string>();
      this.ws.socketOn(observer);
      observer.subscribe(evt => console.log('socket event', evt));

      this.ws.refreshStock().subscribe(payload => {
         // payload: CbmWebSocketModel.RefreshStock
         console.log('REFRESH_STOCK', payload);
      });
   }
}

Descripción de métodos relevantes en CbmWebSocketService

• socketOn(observer: Subject<string>) — publica eventos connect / disconnect.
• refreshStock(): Observable<RefreshStock> — escucha evento REFRESH_STOCK.
• joinStockRoom() — envía JOIN_STOCK con room basado en authService.authData.company._id.
• refreshReport() / joinReport() — eventos y unión para reportes por usuario.
• refreshImportExcel() / joinImportExcel() — idem para importaciones.
• logoutAuth<T>() / joinLogoutAuth() — eventos para cerrar sesión global.

Tipos principales

• CbmWebSocketModel.RefreshStock — estructura con company_id, warehouse_id y items.
• CbmWebSocketModel.LogoutAuth — payload para cierre de sesión con user_id, user_session_ids y message.

Problemas comunes y solución (NG0201: No provider found for _WrappedSocket)

• Síntoma: al arrancar la app aparece el error:

  ERROR ɵNotFound: NG0201: No provider found for _WrappedSocket... Path: _CbmWebSocketService -> _WrappedSocket

• Causa: ngx-socket-io crea internamente providers (WrappedSocket / _WrappedSocket) cuando se llama a SocketIoModule.forRoot(config). Si ese forRoot no se ha invocado en el árbol de providers, Angular no puede resolver la dependencia Socket y falla.

• Solución rápida:

  • Asegúrate de llamar a SocketIoModule.forRoot({ url: '...' }) en la configuración de la app (por ejemplo en app.config.ts usando importProvidersFrom(SocketIoModule.forRoot(...))) o importándolo en un módulo que se cargue en la raíz.
  • Alternativamente, registra explícitamente los providers que ngx-socket-io exporta antes de inyectar CbmWebSocketService.

Ejemplo para app.config.ts (Angular standalone providers):

import { importProvidersFrom } from '@angular/core';
import { SocketIoModule } from 'ngx-socket-io';

providers: [
   importProvidersFrom(SocketIoModule.forRoot({ url: environment.webSocket }))
]

Notas y consideraciones

• CbmWebSocketService depende de CbmAuthService para obtener authData (company/user) y construir rooms. Asegúrate de que CbmAuthService esté registrado (normalmente providedIn: 'root').
• La librería delega a ngx-socket-io la gestión de reconexiones, eventos y wrappers. Lee su documentación para configuraciones avanzadas (auth, query params, transports).

Build y publicación

ng build web-socket-service
cd dist/web-socket-service
npm publish

Soporte

• Si necesitas que el CbmWebSocketModule.forRoot registre también internamente SocketIoModule.forRoot para evitar tener que tocar app.config.ts, puedo proponerte un cambio en el módulo para encapsular esa responsabilidad.

Si quieres, actualizo el README con ejemplos de tests unitarios para CbmWebSocketService (mock de Socket) o adapto CbmWebSocketModule.forRoot para registrar SocketIoModule internamente.