392 lines
12 KiB
TypeScript
392 lines
12 KiB
TypeScript
import React, { createContext, useContext, useEffect, useRef, useState, ReactNode } from 'react';
|
|
import { useAuthStore } from '../stores/auth.store';
|
|
import { useUIStore } from '../stores/ui.store';
|
|
import { useCurrentTenant } from '../stores/tenant.store';
|
|
|
|
interface SSEEvent {
|
|
type: string;
|
|
data: any;
|
|
timestamp: string;
|
|
}
|
|
|
|
interface SSEContextType {
|
|
isConnected: boolean;
|
|
lastEvent: SSEEvent | null;
|
|
connect: () => void;
|
|
disconnect: () => void;
|
|
addEventListener: (eventType: string, callback: (data: any) => void) => () => void;
|
|
}
|
|
|
|
const SSEContext = createContext<SSEContextType | undefined>(undefined);
|
|
|
|
export const useSSE = () => {
|
|
const context = useContext(SSEContext);
|
|
if (context === undefined) {
|
|
throw new Error('useSSE must be used within an SSEProvider');
|
|
}
|
|
return context;
|
|
};
|
|
|
|
interface SSEProviderProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export const SSEProvider: React.FC<SSEProviderProps> = ({ children }) => {
|
|
const [isConnected, setIsConnected] = useState(false);
|
|
const [lastEvent, setLastEvent] = useState<SSEEvent | null>(null);
|
|
|
|
const eventSourceRef = useRef<EventSource | null>(null);
|
|
const eventListenersRef = useRef<Map<string, Set<(data: any) => void>>>(new Map());
|
|
const reconnectTimeoutRef = useRef<NodeJS.Timeout>();
|
|
const reconnectAttempts = useRef(0);
|
|
|
|
const { isAuthenticated, token } = useAuthStore();
|
|
const { showToast } = useUIStore();
|
|
const currentTenant = useCurrentTenant();
|
|
|
|
const connect = () => {
|
|
if (!isAuthenticated || !token || eventSourceRef.current) return;
|
|
|
|
// Skip SSE connection for demo/development mode when no backend is available
|
|
if (token === 'mock-jwt-token') {
|
|
console.log('SSE connection skipped for demo mode');
|
|
return;
|
|
}
|
|
|
|
if (!currentTenant?.id) {
|
|
console.log('No tenant ID available, skipping SSE connection');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Connect to gateway SSE endpoint with token and tenant_id
|
|
// Use same protocol and host as the current page to avoid CORS and mixed content issues
|
|
const protocol = window.location.protocol;
|
|
const host = window.location.host;
|
|
const sseUrl = `${protocol}//${host}/api/events?token=${encodeURIComponent(token)}&tenant_id=${currentTenant.id}`;
|
|
|
|
console.log('Connecting to SSE endpoint:', sseUrl);
|
|
|
|
const eventSource = new EventSource(sseUrl, {
|
|
withCredentials: true,
|
|
});
|
|
|
|
eventSource.onopen = () => {
|
|
console.log('SSE connection opened');
|
|
setIsConnected(true);
|
|
reconnectAttempts.current = 0;
|
|
|
|
if (reconnectTimeoutRef.current) {
|
|
clearTimeout(reconnectTimeoutRef.current);
|
|
reconnectTimeoutRef.current = undefined;
|
|
}
|
|
};
|
|
|
|
eventSource.onmessage = (event) => {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
|
|
// Handle different SSE message types from notification service
|
|
if (data.status === 'keepalive') {
|
|
console.log('SSE keepalive received');
|
|
return;
|
|
}
|
|
|
|
const sseEvent: SSEEvent = {
|
|
type: data.item_type || 'message',
|
|
data: data,
|
|
timestamp: data.timestamp || new Date().toISOString(),
|
|
};
|
|
|
|
setLastEvent(sseEvent);
|
|
|
|
// Show notification if it's an alert or recommendation
|
|
if (data.item_type && ['alert', 'recommendation'].includes(data.item_type)) {
|
|
let toastType: 'info' | 'success' | 'warning' | 'error' = 'info';
|
|
|
|
if (data.item_type === 'alert') {
|
|
if (data.severity === 'urgent') toastType = 'error';
|
|
else if (data.severity === 'high') toastType = 'error';
|
|
else if (data.severity === 'medium') toastType = 'warning';
|
|
else toastType = 'info';
|
|
} else if (data.item_type === 'recommendation') {
|
|
toastType = 'info';
|
|
}
|
|
|
|
showToast({
|
|
type: toastType,
|
|
title: data.title || 'Notificación',
|
|
message: data.message,
|
|
duration: data.severity === 'urgent' ? 0 : 5000,
|
|
});
|
|
}
|
|
|
|
// Trigger registered listeners
|
|
const listeners = eventListenersRef.current.get(sseEvent.type);
|
|
if (listeners) {
|
|
listeners.forEach(callback => callback(data));
|
|
}
|
|
|
|
// Also trigger 'message' listeners for backward compatibility
|
|
const messageListeners = eventListenersRef.current.get('message');
|
|
if (messageListeners) {
|
|
messageListeners.forEach(callback => callback(data));
|
|
}
|
|
} catch (error) {
|
|
console.error('Error parsing SSE message:', error);
|
|
}
|
|
};
|
|
|
|
// Handle connection confirmation from gateway
|
|
eventSource.addEventListener('connection', (event) => {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
console.log('SSE connection confirmed:', data);
|
|
} catch (error) {
|
|
console.error('Error parsing connection event:', error);
|
|
}
|
|
});
|
|
|
|
// Handle heartbeat events (keepalive)
|
|
eventSource.addEventListener('heartbeat', (event) => {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
console.log('SSE heartbeat received:', data.timestamp);
|
|
} catch (error) {
|
|
console.error('Error parsing heartbeat event:', error);
|
|
}
|
|
});
|
|
|
|
// Handle alert events
|
|
eventSource.addEventListener('alert', (event) => {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
const sseEvent: SSEEvent = {
|
|
type: 'alert',
|
|
data,
|
|
timestamp: data.timestamp || new Date().toISOString(),
|
|
};
|
|
|
|
setLastEvent(sseEvent);
|
|
|
|
// Show alert toast
|
|
let toastType: 'info' | 'success' | 'warning' | 'error' = 'info';
|
|
if (data.severity === 'urgent') toastType = 'error';
|
|
else if (data.severity === 'high') toastType = 'error';
|
|
else if (data.severity === 'medium') toastType = 'warning';
|
|
else toastType = 'info';
|
|
|
|
showToast({
|
|
type: toastType,
|
|
title: data.title || 'Alerta',
|
|
message: data.message,
|
|
duration: data.severity === 'urgent' ? 0 : 5000,
|
|
});
|
|
|
|
// Trigger listeners
|
|
const listeners = eventListenersRef.current.get('alert');
|
|
if (listeners) {
|
|
listeners.forEach(callback => callback(data));
|
|
}
|
|
} catch (error) {
|
|
console.error('Error parsing alert event:', error);
|
|
}
|
|
});
|
|
|
|
// Handle recommendation events
|
|
eventSource.addEventListener('recommendation', (event) => {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
const sseEvent: SSEEvent = {
|
|
type: 'recommendation',
|
|
data,
|
|
timestamp: data.timestamp || new Date().toISOString(),
|
|
};
|
|
|
|
setLastEvent(sseEvent);
|
|
|
|
// Show recommendation toast
|
|
showToast({
|
|
type: 'info',
|
|
title: data.title || 'Recomendación',
|
|
message: data.message,
|
|
duration: 5000,
|
|
});
|
|
|
|
// Trigger listeners
|
|
const listeners = eventListenersRef.current.get('recommendation');
|
|
if (listeners) {
|
|
listeners.forEach(callback => callback(data));
|
|
}
|
|
} catch (error) {
|
|
console.error('Error parsing recommendation event:', error);
|
|
}
|
|
});
|
|
|
|
// Handle inventory_alert events (high/urgent severity alerts from gateway)
|
|
eventSource.addEventListener('inventory_alert', (event) => {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
const sseEvent: SSEEvent = {
|
|
type: 'alert',
|
|
data,
|
|
timestamp: data.timestamp || new Date().toISOString(),
|
|
};
|
|
|
|
setLastEvent(sseEvent);
|
|
|
|
// Show urgent alert toast
|
|
const toastType = data.severity === 'urgent' ? 'error' : 'error';
|
|
|
|
showToast({
|
|
type: toastType,
|
|
title: data.title || 'Alerta de Inventario',
|
|
message: data.message,
|
|
duration: data.severity === 'urgent' ? 0 : 5000,
|
|
});
|
|
|
|
// Trigger alert listeners
|
|
const listeners = eventListenersRef.current.get('alert');
|
|
if (listeners) {
|
|
listeners.forEach(callback => callback(data));
|
|
}
|
|
} catch (error) {
|
|
console.error('Error parsing inventory_alert event:', error);
|
|
}
|
|
});
|
|
|
|
// Handle generic notification events from gateway
|
|
eventSource.addEventListener('notification', (event) => {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
const sseEvent: SSEEvent = {
|
|
type: data.item_type || 'notification',
|
|
data,
|
|
timestamp: data.timestamp || new Date().toISOString(),
|
|
};
|
|
|
|
setLastEvent(sseEvent);
|
|
|
|
// Show notification toast
|
|
let toastType: 'info' | 'success' | 'warning' | 'error' = 'info';
|
|
if (data.severity === 'urgent') toastType = 'error';
|
|
else if (data.severity === 'high') toastType = 'warning';
|
|
else if (data.severity === 'medium') toastType = 'info';
|
|
|
|
showToast({
|
|
type: toastType,
|
|
title: data.title || 'Notificación',
|
|
message: data.message,
|
|
duration: data.severity === 'urgent' ? 0 : 5000,
|
|
});
|
|
|
|
// Trigger listeners for both notification and specific type
|
|
const notificationListeners = eventListenersRef.current.get('notification');
|
|
if (notificationListeners) {
|
|
notificationListeners.forEach(callback => callback(data));
|
|
}
|
|
|
|
if (data.item_type) {
|
|
const typeListeners = eventListenersRef.current.get(data.item_type);
|
|
if (typeListeners) {
|
|
typeListeners.forEach(callback => callback(data));
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error parsing notification event:', error);
|
|
}
|
|
});
|
|
|
|
eventSource.onerror = (error) => {
|
|
console.error('SSE connection error:', error);
|
|
setIsConnected(false);
|
|
|
|
if (eventSource.readyState === EventSource.CLOSED) {
|
|
// Attempt reconnection with exponential backoff
|
|
const delay = Math.min(1000 * Math.pow(2, reconnectAttempts.current), 30000);
|
|
reconnectAttempts.current++;
|
|
|
|
reconnectTimeoutRef.current = setTimeout(() => {
|
|
if (isAuthenticated && token) {
|
|
connect();
|
|
}
|
|
}, delay);
|
|
}
|
|
};
|
|
|
|
|
|
eventSourceRef.current = eventSource;
|
|
} catch (error) {
|
|
console.error('Failed to establish SSE connection:', error);
|
|
setIsConnected(false);
|
|
}
|
|
};
|
|
|
|
const disconnect = () => {
|
|
if (eventSourceRef.current) {
|
|
eventSourceRef.current.close();
|
|
eventSourceRef.current = null;
|
|
}
|
|
|
|
if (reconnectTimeoutRef.current) {
|
|
clearTimeout(reconnectTimeoutRef.current);
|
|
reconnectTimeoutRef.current = undefined;
|
|
}
|
|
|
|
setIsConnected(false);
|
|
reconnectAttempts.current = 0;
|
|
};
|
|
|
|
const addEventListener = (eventType: string, callback: (data: any) => void) => {
|
|
if (!eventListenersRef.current.has(eventType)) {
|
|
eventListenersRef.current.set(eventType, new Set());
|
|
}
|
|
|
|
eventListenersRef.current.get(eventType)!.add(callback);
|
|
|
|
// Return cleanup function
|
|
return () => {
|
|
const listeners = eventListenersRef.current.get(eventType);
|
|
if (listeners) {
|
|
listeners.delete(callback);
|
|
if (listeners.size === 0) {
|
|
eventListenersRef.current.delete(eventType);
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
// Connect when authenticated, disconnect when not or when tenant changes
|
|
useEffect(() => {
|
|
if (isAuthenticated && token && currentTenant) {
|
|
connect();
|
|
} else {
|
|
disconnect();
|
|
}
|
|
|
|
return () => {
|
|
disconnect();
|
|
};
|
|
}, [isAuthenticated, token, currentTenant?.id]);
|
|
|
|
// Cleanup on unmount
|
|
useEffect(() => {
|
|
return () => {
|
|
disconnect();
|
|
};
|
|
}, []);
|
|
|
|
const contextValue: SSEContextType = {
|
|
isConnected,
|
|
lastEvent,
|
|
connect,
|
|
disconnect,
|
|
addEventListener,
|
|
};
|
|
|
|
return (
|
|
<SSEContext.Provider value={contextValue}>
|
|
{children}
|
|
</SSEContext.Provider>
|
|
);
|
|
}; |