1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

// Configuration optimized for enterprise network constraints
 
const enterpriseLongPollConfig = {
    // Shorter timeout to stay under aggressive proxy limits
    serverTimeout: 25000, // 25 seconds (many proxies cut at 30)
    
    // Immediate reconnect to minimize gaps
    reconnectDelay: 0,
    
    // Aggressive retry for transient proxy issues
    maxRetries: 10,
    baseBackoff: 1000,
    maxBackoff: 10000,
    
    // Headers for proxy compatibility
    headers: {
        // Prevent caching through enterprise caches
        'Cache-Control': 'no-cache, no-store, must-revalidate, private',
        'Pragma': 'no-cache',
        'Expires': '0',
        
        // Hint to proxies this is a long-lived request
        'X-Accel-Buffering': 'no', // nginx-specific
        
        // Some proxies treat XHR differently
        'X-Requested-With': 'XMLHttpRequest',
    },
    
    // Probe endpoint to detect corporate proxy behavior
    probeConfig: {
        enabled: true,
        endpoint: '/api/network-probe',
        interval: 300000, // Re-probe every 5 minutes
    },
};
 
// Network probe to detect and adapt to corporate restrictions
class NetworkProbe {
    async probe(): Promise<NetworkEnvironment> {
        const results: NetworkEnvironment = {
            maxHoldTime: await this.probeMaxHoldTime(),
            supportsKeepAlive: await this.probeKeepAlive(),
            proxyDetected: await this.detectProxy(),
        };
        
        return results;
    }
    
    private async probeMaxHoldTime(): Promise<number> {
        // Try increasingly long requests to find the proxy cutoff
        const testDurations = [10, 20, 30, 45, 60]; // seconds
        let maxSuccessful = 5;
        
        for (const duration of testDurations) {
            try {
                const response = await fetch(`/api/probe?hold=${duration}`, {
                    signal: AbortSignal.timeout((duration + 5) * 1000),
                });
                
                if (response.ok) {
                    maxSuccessful = duration;
                } else {
                    break; // Timeout hit
                }
            } catch {
                break; // Connection cut
            }
        }
        
        // Use 80% of max to be safe
        return maxSuccessful * 0.8 * 1000;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

// Complete notification system using long polling
 
class NotificationService {
    private longPoll: LongPollClient;
    private unreadCount = 0;
    private lastNotificationId: string | null = null;
    
    constructor() {
        this.longPoll = new LongPollClient({
            endpoint: '/api/notifications/poll',
            getCursor: () => this.lastNotificationId,
            
            onEvents: (notifications) => {
                this.handleNotifications(notifications);
            },
            
            onError: (error) => {
                // Silent failure for notifications - not critical
                console.warn('Notification polling error:', error);
            },
        });
    }
    
    start() {
        // Initial load of unread notifications
        this.loadUnread();
        
        // Start long polling for new notifications
        this.longPoll.start();
        
        // Handle visibility changes - pause when tab hidden
        document.addEventListener('visibilitychange', () => {
            if (document.hidden) {
                this.longPoll.pause();
            } else {
                this.longPoll.resume();
            }
        });
    }
    
    private async loadUnread() {
        const response = await fetch('/api/notifications/unread');
        const { notifications, count } = await response.json();
        
        this.unreadCount = count;
        this.updateBadge();
        
        if (notifications.length > 0) {
            this.lastNotificationId = notifications[0].id;
        }
    }
    
    private handleNotifications(notifications: Notification[]) {
        for (const notification of notifications) {
            // Update cursor
            this.lastNotificationId = notification.id;
            
            // Update badge
            this.unreadCount++;
            this.updateBadge();
            
            // Show toast notification
            this.showToast(notification);
            
            // Browser notification if permitted
            if (notification.priority === 'high') {
                this.showBrowserNotification(notification);
            }
            
            // Update notification list if visible
            this.appendToList(notification);
        }
    }
    
    private updateBadge() {
        const badge = document.querySelector('.notification-badge');
        if (badge) {
            badge.textContent = this.unreadCount > 99 ? '99+' : String(this.unreadCount);
            badge.classList.toggle('hidden', this.unreadCount === 0);
        }
        
        // Update favicon badge (if supported)
        this.updateFaviconBadge(this.unreadCount);
    }
    
    private showToast(notification: Notification) {
        // UI toast notification
        const toast = document.createElement('div');
        toast.className = 'notification-toast';
        toast.innerHTML = `
            <div class="toast-icon">${this.getIcon(notification.type)}</div>
            <div class="toast-content">
                <div class="toast-title">${notification.title}</div>
                <div class="toast-body">${notification.body}</div>
            </div>
        `;
        
        document.body.appendChild(toast);
        
        // Auto-dismiss after 5 seconds
        setTimeout(() => toast.remove(), 5000);
    }
    
    private async showBrowserNotification(notification: Notification) {
        if (Notification.permission === 'granted') {
            new Notification(notification.title, {
                body: notification.body,
                icon: '/notification-icon.png',
                tag: notification.id, // Prevents duplicates
            });
        }
    }
}
 
// Server-side handler
app.get('/api/notifications/poll', async (req, res) => {
    const userId = req.user.id;
    const since = req.query.since as string | undefined;
    const timeout = 30000;
    
    // Check for notifications newer than cursor
    const notifications = await db.notifications.findMany({
        where: {
            userId,
            createdAt: since ? { gt: new Date(since) } : undefined,
        },
        orderBy: { createdAt: 'asc' },
        take: 20,
    });
    
    if (notifications.length > 0) {
        return res.json({ notifications });
    }
    
    // Wait for new notifications
    const listener = (notification: Notification) => {
        clearTimeout(timer);
        cleanup();
        res.json({ notifications: [notification] });
    };
    
    const timer = setTimeout(() => {
        cleanup();
        res.json({ notifications: [] });
    }, timeout);
    
    const cleanup = () => {
        notificationBus.off(`user:${userId}`, listener);
    };
    
    notificationBus.once(`user:${userId}`, listener);
    req.on('close', () => {
        clearTimeout(timer);
        cleanup();
    });
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

// Dashboard metrics streaming via long polling
 
interface DashboardMetrics {
    serverCount: number;
    activeUsers: number;
    requestsPerSecond: number;
    errorRate: number;
    p99Latency: number;
    alerts: Alert[];
    lastUpdated: number;
}
 
class DashboardLongPoll {
    private pollClient: LongPollClient;
    private currentMetrics: DashboardMetrics | null = null;
    private subscribers: Set<(metrics: DashboardMetrics) => void> = new Set();
    
    constructor(private dashboardId: string) {
        this.pollClient = new LongPollClient({
            endpoint: `/api/dashboards/${dashboardId}/poll`,
            getCursor: () => this.currentMetrics?.lastUpdated?.toString() || null,
            
            onEvents: (updates) => {
                this.processUpdates(updates);
            },
            
            // Dashboard should never stop trying
            maxRetries: Infinity,
            
            // Report connection status
            onStateChange: (state) => {
                this.updateConnectionIndicator(state);
            },
        });
    }
    
    subscribe(callback: (metrics: DashboardMetrics) => void) {
        this.subscribers.add(callback);
        
        // Send current metrics immediately if available
        if (this.currentMetrics) {
            callback(this.currentMetrics);
        }
        
        return () => this.subscribers.delete(callback);
    }
    
    private processUpdates(updates: Partial<DashboardMetrics>[]) {
        for (const update of updates) {
            // Merge update into current metrics
            this.currentMetrics = {
                ...this.currentMetrics,
                ...update,
            } as DashboardMetrics;
        }
        
        // Notify all subscribers
        for (const subscriber of this.subscribers) {
            subscriber(this.currentMetrics!);
        }
        
        // Update DOM (for standalone dashboard displays)
        this.updateDOM(this.currentMetrics!);
    }
    
    private updateDOM(metrics: DashboardMetrics) {
        // Update metric cards
        document.getElementById('server-count')!.textContent = 
            metrics.serverCount.toString();
        document.getElementById('active-users')!.textContent = 
            metrics.activeUsers.toLocaleString();
        document.getElementById('rps')!.textContent = 
            metrics.requestsPerSecond.toFixed(1);
        document.getElementById('error-rate')!.textContent = 
            (metrics.errorRate * 100).toFixed(2) + '%';
        document.getElementById('p99-latency')!.textContent = 
            metrics.p99Latency + 'ms';
            
        // Update alerts panel
        const alertsContainer = document.getElementById('alerts')!;
        alertsContainer.innerHTML = metrics.alerts.map(alert => `
            <div class="alert alert-${alert.severity}">
                <span class="alert-time">${this.formatTime(alert.timestamp)}</span>
                <span class="alert-message">${alert.message}</span>
            </div>
        `).join('');
        
        // Update last refreshed timestamp
        const lastUpdated = new Date(metrics.lastUpdated);
        document.getElementById('last-updated')!.textContent = 
            `Last updated: ${lastUpdated.toLocaleTimeString()}`;
    }
    
    private updateConnectionIndicator(state: string) {
        const indicator = document.getElementById('connection-status')!;
        indicator.className = `status-indicator status-${state}`;
        indicator.title = state === 'connected' 
            ? 'Connected - receiving updates' 
            : `${state} - reconnecting...`;
    }
}
 
// Server: Efficient incremental updates
class DashboardPoller {
    private lastMetrics: Map<string, DashboardMetrics> = new Map();
    
    async handlePoll(dashboardId: string, since: string | null): Promise<object> {
        const current = await this.computeMetrics(dashboardId);
        const last = since ? this.lastMetrics.get(dashboardId) : null;
        
        // Compute delta
        if (last && this.metricsEqual(current, last)) {
            // No change - return minimal response
            return { changed: false };
        }
        
        // Store for next comparison
        this.lastMetrics.set(dashboardId, current);
        
        // Return only changed fields
        if (last) {
            const delta = this.computeDelta(last, current);
            return { changed: true, delta };
        }
        
        // Full update (first poll)
        return { changed: true, full: current };
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

// Minimal long polling client - works in IE11, old mobile browsers, anywhere
 
(function(global) {
    'use strict';
    
    function SimpleLongPoll(options) {
        this.url = options.url;
        this.onMessage = options.onMessage || function() {};
        this.onError = options.onError || function() {};
        this.lastEventId = null;
        this.running = false;
        this.retryCount = 0;
        this.maxRetries = options.maxRetries || 10;
    }
    
    SimpleLongPoll.prototype.start = function() {
        this.running = true;
        this._poll();
    };
    
    SimpleLongPoll.prototype.stop = function() {
        this.running = false;
        if (this._xhr) {
            this._xhr.abort();
        }
    };
    
    SimpleLongPoll.prototype._poll = function() {
        if (!this.running) return;
        
        var self = this;
        var xhr = new XMLHttpRequest();
        this._xhr = xhr;
        
        var url = this.url;
        if (this.lastEventId) {
            url += (url.indexOf('?') > -1 ? '&' : '?') + 'since=' + 
                encodeURIComponent(this.lastEventId);
        }
        
        xhr.open('GET', url, true);
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.setRequestHeader('Cache-Control', 'no-cache');
        xhr.timeout = 60000; // 60 second timeout
        
        xhr.onload = function() {
            if (xhr.status === 200) {
                self.retryCount = 0; // Reset on success
                
                try {
                    var data = JSON.parse(xhr.responseText);
                    
                    if (data.events && data.events.length > 0) {
                        // Update cursor
                        var lastEvent = data.events[data.events.length - 1];
                        self.lastEventId = lastEvent.id || lastEvent.timestamp;
                        
                        // Deliver events
                        for (var i = 0; i < data.events.length; i++) {
                            self.onMessage(data.events[i]);
                        }
                    }
                } catch (e) {
                    self.onError(e);
                }
                
                // Immediate reconnect
                self._poll();
                
            } else if (xhr.status === 204) {
                // Timeout, no data - reconnect
                self._poll();
                
            } else {
                // Error
                self._handleError(new Error('HTTP ' + xhr.status));
            }
        };
        
        xhr.onerror = function() {
            self._handleError(new Error('Network error'));
        };
        
        xhr.ontimeout = function() {
            self._handleError(new Error('Request timeout'));
        };
        
        xhr.send();
    };
    
    SimpleLongPoll.prototype._handleError = function(error) {
        this.onError(error);
        
        if (!this.running) return;
        
        this.retryCount++;
        if (this.retryCount > this.maxRetries) {
            this.onError(new Error('Max retries exceeded'));
            return;
        }
        
        // Exponential backoff
        var delay = Math.min(30000, Math.pow(2, this.retryCount) * 1000);
        var self = this;
        setTimeout(function() { self._poll(); }, delay);
    };
    
    // Export for different module systems
    if (typeof module !== 'undefined' && module.exports) {
        module.exports = SimpleLongPoll;
    } else {
        global.SimpleLongPoll = SimpleLongPoll;
    }
    
})(typeof window !== 'undefined' ? window : this);
 
// Usage - works in any environment
var poller = new SimpleLongPoll({
    url: '/api/events/poll',
    onMessage: function(event) {
        console.log('Received:', event);
    },
    onError: function(error) {
        console.error('Poll error:', error);
    }
});
poller.start();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

// Long polling optimized for mobile constraints
 
class MobileLongPoll {
    private readonly config = {
        // Shorter timeout to avoid carrier NAT issues
        pollTimeout: 25000,
        
        // Longer timeout on mobile networks
        requestTimeout: 35000,
        
        // Minimal aggressive backoff
        minBackoff: 1000,
        maxBackoff: 30000,
    };
    
    private isPolling = false;
    private appState: 'foreground' | 'background' = 'foreground';
    
    constructor() {
        this.setupAppStateListeners();
        this.setupNetworkListeners();
    }
    
    private setupAppStateListeners() {
        document.addEventListener('visibilitychange', () => {
            if (document.hidden) {
                this.handleBackground();
            } else {
                this.handleForeground();
            }
        });
        
        // React Native / Capacitor app state
        if (typeof AppState !== 'undefined') {
            AppState.addEventListener('change', (state) => {
                if (state === 'active') {
                    this.handleForeground();
                } else {
                    this.handleBackground();
                }
            });
        }
    }
    
    private setupNetworkListeners() {
        // Detect network changes
        if ('connection' in navigator) {
            (navigator as any).connection.addEventListener('change', () => {
                this.handleNetworkChange();
            });
        }
        
        // Online/offline events
        window.addEventListener('online', () => this.handleOnline());
        window.addEventListener('offline', () => this.handleOffline());
    }
    
    private handleBackground() {
        this.appState = 'background';
        
        // Stop polling to save battery
        this.stopPolling();
        
        // Optionally: one final poll with short timeout to get latest state
        this.doSinglePoll(5000);
    }
    
    private handleForeground() {
        this.appState = 'foreground';
        
        // Resume polling
        this.startPolling();
    }
    
    private handleNetworkChange() {
        // Network changed - current poll may fail
        // Let it fail naturally, next poll will use new network
        console.log('Network changed, continuing with next poll');
        
        // Optionally: abort current poll and start fresh
        // this.abortAndRestart();
    }
    
    private handleOnline() {
        if (this.appState === 'foreground') {
            // Immediately poll to catch up on missed events
            this.poll();
        }
    }
    
    private handleOffline() {
        // Don't try to poll when offline
        // Will resume automatically via handleOnline
    }
    
    private async poll() {
        if (!this.isPolling || this.appState === 'background') {
            return;
        }
        
        try {
            const response = await fetch('/api/poll', {
                signal: AbortSignal.timeout(this.config.requestTimeout),
                headers: {
                    'X-Long-Poll-Timeout': String(this.config.pollTimeout / 1000),
                },
            });
            
            // Process response...
            
            // Immediate next poll
            requestAnimationFrame(() => this.poll());
            
        } catch (error) {
            // Handle error with backoff
            await this.handlePollError(error);
        }
    }
    
    private async doSinglePoll(timeout: number) {
        // Single poll without loop - for background updates
        try {
            const response = await fetch('/api/poll?timeout=' + timeout, {
                signal: AbortSignal.timeout(timeout + 5000),
            });
            // Process final update before sleeping
        } catch {
            // Ignore - we're going to background anyway  
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// Slack's transport negotiation (simplified)
 
class SlackConnection {
    async connect(): Promise<Transport> {
        // Try WebSocket first (fastest)
        try {
            const ws = await this.tryWebSocket();
            console.log('Connected via WebSocket');
            return ws;
        } catch (e) {
            console.log('WebSocket unavailable:', e.message);
        }
        
        // Fall back to long polling (always works)
        console.log('Falling back to long polling');
        return new LongPollTransport(this.config);
    }
}
 
// Slack's statistics (approximate, from public sources):
// - 70-80% of connections use WebSocket
// - 20-30% use long polling (corporate networks, restrictive environments)
// - Long polling users report identical user experience
 
// Key insight: Slack could have required WebSocket and 
// forced enterprises to change networks. Instead, they 
// chose compatibility over forcing infrastructure changes.