audio streaming app
plyr.fm
Merge pull request #42 from zzstoatzz/fix/remove-sandbox-from-vcs
fix: remove sandbox directory from version control
authored by
nate nowack
and committed by
GitHub
f1a2bd63
73d018e6
-96
-96
sandbox/HTTP_CONNECTION_LIMITATION.md
-96
sandbox/HTTP_CONNECTION_LIMITATION.md
···
1
-
# HTTP/1.1 Connection Pooling Limitation
2
-
3
-
## Problem Statement
4
-
5
-
When uploading a large file (8-9 seconds) and attempting to navigate to the homepage during the upload, the homepage hangs until the upload completes. The desired behavior is for uploads to continue in the background while allowing immediate navigation.
6
-
7
-
## What We Tried
8
-
9
-
1. **Toast notification system** - Successfully implemented global toast notifications using Svelte 5 runes
10
-
2. **Fire-and-forget uploads** - Changed from `await` to `.then()` pattern
11
-
3. **setTimeout wrapper** - Attempted to defer upload execution
12
-
4. **Component lifecycle management** - Added `onDestroy` and `isMounted` tracking
13
-
5. **AbortController** - Tried canceling uploads on navigation
14
-
6. **Global upload manager** - Created `uploader.svelte.ts` similar to `player.svelte.ts`
15
-
16
-
## Why They All Failed
17
-
18
-
The root cause is **browser HTTP/1.1 connection pooling limits at the TCP level**:
19
-
20
-
- Chrome limits **6 concurrent HTTP/1.1 connections per hostname**
21
-
- This is a browser-level TCP limitation, not a JavaScript execution issue
22
-
- When a long-running upload occupies 1 connection, only 5 remain available
23
-
- Homepage navigation triggers 2 fetch requests (`/auth/me` + `/tracks/`)
24
-
- These requests get **queued** waiting for an available connection
25
-
- No JavaScript pattern (async/await, promises, global state) can bypass TCP-level connection limits
26
-
27
-
## Proof
28
-
29
-
From our research:
30
-
> "Chrome has a limit of 6 connections per host name, and a max of 10 connections total across all domains."
31
-
>
32
-
> "When you initiate 100 HTTP/1.1 requests to a domain, only 6 requests will be processed concurrently at any given moment. The remaining requests will be queued."
33
-
34
-
Our network tab showed the `tracks/` request had status `(canceled)` after navigation, but the homepage still waited - confirming the requests were queued at the browser's connection pool level, not the JavaScript level.
35
-
36
-
## Actual Solutions
37
-
38
-
### 1. HTTP/2 (Recommended)
39
-
40
-
**Pros:**
41
-
- Completely solves the problem via connection multiplexing
42
-
- Allows unlimited concurrent requests over a single TCP connection
43
-
- Production (Fly.io) likely already uses HTTP/2 over HTTPS
44
-
- Industry standard solution
45
-
46
-
**Cons:**
47
-
- Requires HTTPS (complicated for local development)
48
-
- Need to configure uvicorn/Hypercorn for HTTP/2
49
-
50
-
**Implementation:**
51
-
```python
52
-
# Use Hypercorn instead of uvicorn
53
-
# hypercorn supports HTTP/2 natively with h2 library
54
-
```
55
-
56
-
### 2. Accept the Limitation
57
-
58
-
**Pros:**
59
-
- No additional work required
60
-
- Toast system still provides value for upload feedback
61
-
- Production may not exhibit this issue if using HTTP/2
62
-
63
-
**Cons:**
64
-
- Poor UX for large file uploads in local development
65
-
- Users cannot navigate during uploads
66
-
67
-
### 3. Web Workers
68
-
69
-
**Pros:**
70
-
- Uploads run in separate thread with separate connection pool
71
-
- Truly non-blocking at JavaScript level
72
-
73
-
**Cons:**
74
-
- Complex implementation
75
-
- Still subject to browser connection limits
76
-
- May not fully solve the problem
77
-
78
-
## Recommendation
79
-
80
-
1. **Keep the toast notification system** - it's valuable regardless
81
-
2. **Keep the global upload manager** - clean architecture, ready for HTTP/2
82
-
3. **Accept the local dev limitation** - it's likely not present in production
83
-
4. **Consider HTTP/2 if issue persists in production**
84
-
85
-
## Files Modified
86
-
87
-
- `frontend/src/lib/toast.svelte.ts` - Global toast state (keep)
88
-
- `frontend/src/lib/components/Toast.svelte` - Toast UI component (keep)
89
-
- `frontend/src/lib/uploader.svelte.ts` - Global upload manager (keep)
90
-
- `frontend/src/routes/+layout.svelte` - Toast integration (keep)
91
-
- `frontend/src/routes/+page.svelte` - Loading state improvements (keep)
92
-
- `frontend/src/routes/portal/+page.svelte` - Simplified to use global uploader (keep)
93
-
94
-
## Lesson Learned
95
-
96
-
Browser-level TCP connection pooling cannot be worked around with JavaScript patterns. The solution requires protocol-level changes (HTTP/2) or accepting the limitation.