-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathworker-threads-tutorial.html
More file actions
228 lines (194 loc) · 12.1 KB
/
Copy pathworker-threads-tutorial.html
File metadata and controls
228 lines (194 loc) · 12.1 KB
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Node.js Worker Threads ⚙️</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<!-- Highlight.js for Code Formatting -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<style>
:root {
--bg-color: #11100c; /* Deep yellow/black tone */
--surface-color: #1a1811;
--primary-color: #eab308; /* Yellow for JS/Node */
--primary-glow: rgba(234, 179, 8, 0.4);
--text-main: #f8fafc;
--text-muted: #9ca3af;
--border-color: rgba(255, 255, 255, 0.08);
--card-border: rgba(255, 255, 255, 0.1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: var(--bg-color); color: var(--text-main); line-height: 1.6;
background-image:
radial-gradient(at 0% 0%, rgba(234, 179, 8, 0.15) 0px, transparent 50%),
radial-gradient(at 100% 100%, rgba(202, 138, 4, 0.05) 0px, transparent 50%);
background-attachment: fixed; min-height: 100vh;
}
.layout { display: flex; gap: 2.5rem; max-width: 1400px; margin: 0 auto; padding: 3rem 2rem; }
/* Sidebar Styles (Reused) */
.sidebar {
width: 280px; flex-shrink: 0; position: sticky; top: 3rem; max-height: calc(100vh - 6rem); overflow-y: auto;
background: rgba(26, 24, 17, 0.8); border: 1px solid var(--card-border); border-radius: 16px; padding: 1.5rem;
backdrop-filter: blur(12px);
}
.sidebar h3 {
margin-bottom: 1rem; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1.5px;
color: var(--primary-color); border-bottom: 1px solid var(--card-border); padding-bottom: 1rem;
}
.sidebar ul { list-style: none; }
.sidebar li { margin-bottom: 0.3rem; }
.nav-section {
font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted);
margin: 1.5rem 0 0.5rem 0; padding-left: 0.5rem; font-weight: 700;
}
.sidebar a {
text-decoration: none; color: var(--text-muted); display: block; padding: 0.5rem 1rem;
border-radius: 8px; transition: all 0.3s ease; font-size: 0.95rem; font-weight: 500;
}
.sidebar a.active {
background: rgba(234, 179, 8, 0.2); color: #fff; border-left: 3px solid var(--primary-color); border-radius: 4px 8px 8px 4px;
}
.sidebar a:hover:not(.active) { background: rgba(234, 179, 8, 0.15); color: var(--primary-color); transform: translateX(5px); }
.main-content { flex: 1; min-width: 0; }
header { text-align: center; margin-bottom: 3rem; }
h1 {
font-size: 3rem; font-weight: 800; margin-bottom: 1rem;
background: linear-gradient(135deg, var(--primary-color) 0%, #fef08a 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 40px var(--primary-glow);
}
.subtitle { font-size: 1.2rem; color: var(--text-muted); }
/* Content Blocks */
.content-card {
background: rgba(26, 24, 17, 0.6); border: 1px solid var(--card-border);
border-radius: 16px; padding: 2.5rem; margin-bottom: 2rem; backdrop-filter: blur(10px);
box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}
h2 { font-size: 1.8rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; color: #fff; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; }
h3 { font-size: 1.3rem; margin: 1.5rem 0 1rem; color: #e2e8f0; }
p { margin-bottom: 1rem; font-size: 1.1rem; color: #d1d5db; }
ul { margin-left: 1.5rem; margin-bottom: 1rem; color: #d1d5db; }
li { margin-bottom: 0.5rem; }
.explanation { background: rgba(234, 179, 8, 0.1); border-left: 4px solid var(--primary-color); padding: 1rem 1.5rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0; }
.explanation p { margin-bottom: 0; color: #e2e8f0; }
pre { background: #010409 !important; border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem !important; margin: 1.5rem 0; overflow-x: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
code { font-family: 'JetBrains Mono', monospace !important; font-size: 0.95rem; line-height: 1.5; }
.diagram { font-family: 'JetBrains Mono', monospace; background: #050505; color: #fde047; padding: 1.5rem; border-radius: 12px; border: 1px solid var(--primary-color); box-shadow: 0 0 20px rgba(234, 179, 8, 0.1); overflow-x: auto; white-space: pre; line-height: 1.4; margin: 1.5rem 0; font-size: 0.9rem; }
.cta-banner { background: linear-gradient(135deg, var(--primary-color) 0%, #854d0e 100%); padding: 3rem 2rem; border-radius: 16px; text-align: center; margin-top: 3rem; }
.cta-banner h2 { border: none; justify-content: center; }
@media (max-width: 900px) {
.layout { flex-direction: column; }
.sidebar { width: 100%; position: relative; top: 0; max-height: none; margin-bottom: 2rem; }
}
</style>
</head>
<body>
<div class="layout">
<!-- Sidebar Navigation -->
<aside class="sidebar">
<h3>🗂️ Tutorials Link</h3>
<nav>
<ul>
<li><a href="index.html">🏠 Home Hub</a></li>
<li class="nav-section">Databases / Lang</li>
<li><a href="mongodb-conditions-tutorial.html">🍃 MongoDB Class</a></li>
<li><a href="redis-masterclass-tutorial.html">🔥 Redis</a></li>
<li><a href="typescript-oops-tutorial.html">📘 TS OOPs</a></li>
<li class="nav-section">Architecture</li>
<li><a href="message-queues-tutorial.html">📨 Message Queues</a></li>
<li><a href="notification-system-tutorial.html">🔔 Notifications</a></li>
<li><a href="worker-threads-tutorial.html" class="active">⚙️ Node Workers</a></li>
<li><a href="system-design-tutorial.html">🏗️ Sys Design (Part 1)</a></li>
<li><a href="system-design-part2.html">🚀 Sys Design (Part 2)</a></li>
<li class="nav-section">Security & DevOps</li>
<li><a href="github-masterclass-tutorial.html">🐙 Git & GitHub</a></li>
<li><a href="rbac-masterclass-tutorial.html">🔐 RBAC & Auth</a></li>
<li><a href="abac-masterclass-tutorial.html">🛡️ ABAC Policies</a></li>
</ul>
</nav>
</aside>
<!-- Main Content -->
<main class="main-content">
<header>
<h1>Node.js Worker Threads ⚙️</h1>
<p class="subtitle">Multi-threading in Node.js, Event Loop blocking, and Heavy CPU offloading.</p>
</header>
<div class="content-card" id="intro">
<h2>1. The Problem: "Node.js is Single-Threaded"</h2>
<p>Node.js by default sirf ek hi thread (V8 main thread) par poora server run karta hai. <code>Async/Await</code> aur callbacks database/network requests ke liye best hain (I/O non-blocking), lekin agar CPU-heavy kaam aa gaya toh Node ruk jata hai.</p>
<div class="explanation">
<p>👉 <strong>Example:</strong> Maan le ek user ne 2GB ki Video Compress karne ki request bheji. Jab tak video compress nahi hogi, server ruka rhega, aur baaki hazaron users ka <code>Login</code> request bhi pending pad jayega. This is called <strong>Event Loop Blocking</strong>.</p>
</div>
</div>
<div class="content-card" id="solution">
<h2>2. The Solution: Offloading to `worker_threads`</h2>
<p>Node.js ka inbuilt module <code>worker_threads</code> humein extra parallel threads (computers inside computer) banane ki shakti deta hai taake CPU-intensive kaam background mein hota rahe aur main thread users ki request entertain karta rahe.</p>
<div class="diagram">
[ User 1 (Login) ] ---------> (MAIN THREAD) ----> Instantly Replied!
|
[ User 2 (Process Video) ] ----> | -> (Pass Data to) -> [ WORKER THREAD 1 ] (Heavy CPU Task)
|
[ User 3 (Get Feed) ] ------> (MAIN THREAD) ----> Instantly Replied!
</div>
</div>
<div class="content-card" id="code">
<h2>3. Coding Example (Main vs Worker)</h2>
<p>Ek Multi-threaded Node.js app banane ke liye 2 files chahiye hoti hain: Ek <code>main.js</code> jaha traffic aata hai, aur ek <code>worker.js</code> jaha actual majdoori hoti hai.</p>
<h3>A. Main Thread (main.js)</h3>
<p>Ye traffic route karta hai aur API serve karta hai:</p>
<pre><code class="language-javascript">const { Worker } = require('worker_threads');
const express = require('express');
const app = express();
app.get('/heavy-task', (req, res) => {
// Naya Worker majdoor (Thread) Create karo
const majdoor = new Worker('./worker.js');
// Majdoor se message suno jab wo kaam khatam kar le
majdoor.on('message', (result) => {
res.json({ message: "Task Finished!", data: result });
});
// Agar koi error aagayi thread me
majdoor.on('error', (err) => res.status(500).send(err));
});
app.get('/normal-task', (req, res) => {
res.send("Dekha? Main block nahi hua! ⚡");
});
app.listen(3000, () => console.log('Server is alive!'));
</code></pre>
<h3>B. Worker Thread (worker.js)</h3>
<p>Ye akele me jaa kar CPU intensive operations loop karta hai:</p>
<pre><code class="language-javascript">const { parentPort } = require('worker_threads');
// 1. Ek bohat bada computation wala function (Video Compress, Maths, AI)
let heavyCount = 0;
for(let i = 0; i < 9999999999; i++){
heavyCount++;
}
// 2. Kaam poora hone ke baad 'main.js' ko waapis message bhejo!
parentPort.postMessage(`Heavy task done! Total is: ${heavyCount}`);
</code></pre>
</div>
<div class="content-card" id="bullmq">
<h2>4. Workers vs Message Queues (BullMQ / RabbitMQ)</h2>
<p>Log aksar Worker Threads ko Background Jobs (Kafka, RabbitMQ, BullMQ, Celery) ke sath confuse kr lete hain. Difference ye hai:</p>
<ul>
<li><strong>Worker Threads (Module):</strong> Same Node.js process / same server machine RAM me threads bante hain. Code locally run karta hai limit memory mein.</li>
<li><strong>Message Queue Jobs (RabbitMQ):</strong> Tum ek bilkul doosre server (Machine 2) par message bhejte ho, aur wahan running code CPU use karta hai. Production mein heavy processing k liye hamesha alag Distributed Servers (Message Queues) use kiye jate hain Worker Threads ki jagah!</li>
</ul>
</div>
<div class="cta-banner">
<h2 style="color: black">Multi-Threaded Expert! 🥇</h2>
<p style="color: rgba(0,0,0,0.8); margin-top: 10px; font-weight: bold;">Single thread limitation ab tere apps ko slow nahi kar sakti!<br><br>
<strong>Keep Offloading The Load! 🚀</strong>
</p>
</div>
</main>
</div>
</body>
</html>