مسیر شما به سمت برنامه های کاربردی وب حرفه ای که سریع و پاسخگو هستند واضح است: از وب کارگران استفاده کنید.
آیا تا به حال نیاز به اجرای کدی در مرورگر داشته اید که اجرای آن مدت زمان زیادی طول کشید تا برنامه شما برای مدتی پاسخگو نباشد؟ با کارگران وب HTML5، دیگر نیازی به تجربه آن ندارید.
وب‌کارگرها به شما این امکان را می‌دهند که کدهای طولانی‌مدت را جدا کرده و مستقل از سایر کدهای موجود در صفحه اجرا کنید. این رابط کاربری شما را حتی در حین عملیات پیچیده پاسخگو نگه می دارد.
کارگران وب چیست؟
به طور سنتی، جاوا اسکریپت یک زبان تک رشته ای است. این بدان معناست که هیچ چیز دیگری نمی تواند اجرا شود در حالی که یک قطعه کد در حال اجرا است. برای مثال، اگر کدی دارید که سعی می‌کند یک عنصر DOM را متحرک کند، کدی که سعی در تغییر یک متغیر دارد، باید منتظر بماند تا انیمیشن قبل از اجرا شدن به پایان برسد.
وب‌کارگرها فایل‌های جاوا اسکریپت هستند که در یک رشته مجزا و بدون دسترسی مستقیم به DOM اجرا می‌شوند.
یکی از راه‌های فکر کردن به وب‌کارگرها این است که آنها قطعات کدی هستند که زمان زیادی برای اجرا می‌برند، بنابراین آنها را به مرورگر می‌دهید تا در پس‌زمینه اجرا شوند. از آنجایی که آن کد اکنون در پس‌زمینه اجرا می‌شود، بر جاوا اسکریپت مسئول صفحه وب شما تأثیری نمی‌گذارد.
به عنوان یک عارضه جانبی، دیگر نمی تواند مستقیماً با بقیه کد شما تعامل داشته باشد، بنابراین وب کارمندان به DOM دسترسی ندارند. با این حال، بسیاری از APIهای مرورگر دیگر، از جمله WebSocket و Fetch API، هنوز در دسترس هستند.
با این حال، کارگران وب کاملاً از موضوع اصلی جدا نیستند. هنگامی که یک کارگر نیاز به ارتباط با موضوع اصلی دارد، می تواند یک پیام ارسال کند و رشته اصلی می تواند پیام خود را در پاسخ ارسال کند.
چرا Web Workers؟
قبل از وب کارمندان، تنها راه اجرای جاوا اسکریپت که به زمان زیادی در مرورگر نیاز داشت این بود:
- بپذیرید که صفحه برای مدتی پاسخگو نخواهد بود.
- آن کد را به قطعات ناهمزمان بشکنید.
از آنجایی که یک صفحه بدون پاسخ معمولا یک تجربه کاربری بد است، ممکن است گزینه ناهمزمان را انتخاب کنید. نوشتن کد به این روش به معنای تقسیم آن به قطعات کوچکتر است که مرورگر می تواند اجرا کند در حالی که رابط کاربری را مدیریت نمی کند. قطعات باید به اندازه کافی کوچک باشند که اگر UI نیاز به به روز رسانی داشته باشد، مرورگر بتواند اجرای قطعه فعلی را به پایان برساند و به رابط کاربری توجه کند.
کارگران وب به HTML5 اضافه شدند تا راه حل بهتری برای این مشکل ارائه دهند. به جای اینکه شما را مجبور به خلاقیت با کدهای ناهمزمان کنند، به شما اجازه می دهند تا یک تابع را به طور تمیز جدا کنید تا در رشته ایزوله خودش اجرا شود.
این کار نوشتن چنین کدی را برای توسعه دهندگان آسان تر کرد و تجربه کاربر را نیز بهبود بخشید.
موارد استفاده برای وب کارگران
هر برنامه‌ای که نیاز به محاسبات زیادی در سمت کلاینت دارد، می‌تواند از وب‌کارگرها بهره‌مند شود.
مثلاً، برنامه شما می‌خواهد یک گزارش استفاده تولید کند، و همه داده‌ها را به دلیل حفظ حریم خصوصی روی مشتری ذخیره می‌کند.
برای تولید آن گزارش، برنامه وب شما باید داده ها را بازیابی کند، محاسبات را روی آن اجرا کند، نتایج را سازماندهی کند و به کاربر ارائه کند.
اگر بخواهید این کار را در رشته اصلی انجام دهید، کاربر به طور کامل نمی تواند از برنامه استفاده کند در حالی که برنامه داده ها را پردازش می کند. در عوض، می‌توانید تمام یا بخشی از آن کد را به یک وب‌کار منتقل کنید. این به کاربر اجازه می دهد تا در حین انجام محاسبات به استفاده از برنامه ادامه دهد.
نحوه استفاده از Web Workers در جاوا اسکریپت
Web Worker API نحوه استفاده از وب کارگران را تعریف می کند. استفاده از این API شامل ایجاد یک شی Worker با سازنده Worker مانند زیر است:
let newWorker = Worker('worker.js');
سازنده Worker نام یک فایل جاوا اسکریپت را به عنوان پارامتر خود می پذیرد و فایل را در یک رشته جدید اجرا می کند. یک شی Worker را برمی گرداند تا به رشته اصلی اجازه دهد تا با نخ کارگر تعامل داشته باشد.
کارگران با ارسال پیغام به سمت جلو و عقب با موضوع اصلی تعامل دارند. شما از تابع postMessage برای ارسال رویدادها بین کارگر و رشته اصلی استفاده می کنید. از شنونده رویداد onmessage برای گوش دادن به پیام های طرف مقابل استفاده کنید.
در اینجا یک نمونه کد است. اول، یک موضوع اصلی ممکن است به شکل زیر باشد:
let worker = new Worker('worker.js')
worker.postMessage('Hey!')
worker.onmessage = function(e) {
console.log('Worker thread says', e.data)
}
این رشته اصلی یک شی کارگر از worker.js ایجاد می کند، سپس یک پیام با worker.postMessage به آن ارسال می کند. سپس یک شنونده رویداد را تعریف می کند که از نظر مفهوم شبیه به شنونده رویداد DOM است. هر بار که کارگر پیامی را به رشته اصلی ارسال می‌کند، یک رویداد فعال می‌شود و کنترل‌کننده پیام کارگر را به کنسول ثبت می‌کند.
کد داخل worker (worker.js) یک کار دارد:
onmessage = function(e) {
let message = e.data;
console.log('Main thread said', message);
postMessage('Hi!')
}
به هر پیامی که از رشته اصلی ارسال می‌شود گوش می‌دهد، پیام را در کنسول ثبت می‌کند و یک پیام بازگشتی را به رشته اصلی ارسال می‌کند.
پیام‌های این مثال همگی رشته‌ای بوده‌اند، اما این یک الزام نیست: شما می‌توانید تقریباً هر نوع داده‌ای را به عنوان پیام ارسال کنید.
به آن دسته از کارگرانی که تاکنون دیده اید، کارگران متعهد گفته می شود. شما فقط می توانید از فایلی که آنها را در آن ایجاد کرده اید (آنها به آن اختصاص داده شده اند) به آنها دسترسی داشته باشید. کارگران اشتراکی برعکس هستند: آنها می توانند پیام ها را از چندین فایل دریافت کرده و به آنها پیام ارسال کنند. کارگران اشتراکی از نظر مفهومی مشابه کارگران اختصاصی هستند، اما شما باید از آنها کمی متفاوت استفاده کنید.
بیایید به یک مثال نگاه کنیم. به جای استفاده از سازنده Worker، هر فایلی که می‌خواهد از یک worker اشتراکی استفاده کند، باید یک شی worker با استفاده از SharedWorker():
let sharedWorker = new SharedWorker('worker.js')
هر چند تفاوت ها به همین جا ختم نمی شود. برای اینکه فایلی بتواند پیامی از یک کارگر مشترک ارسال یا دریافت کند، به جای اینکه مستقیماً این کار را انجام دهد، باید این کار را با دسترسی به یک شی پورت انجام دهد. در اینجا به نظر می رسد:
sharedWorker.port.postMessage('Hi there!')
sharedWorker.port.onMessage = function(e) {
console.log('The shared worker sent', e.data);
}
شما باید از شی پورت در داخل کارگر نیز استفاده کنید:
onconnect = function(e) {
const port = e.ports[0];
port.onmessage = function(e) {
console.log('Message recieved', e.data)
port.postMessage('Hello!');
}
}
شنونده onconnect هر بار که اتصال به یک پورت اتفاق می افتد فعال می شود (زمانی که شنونده رویداد onmessage در رشته اصلی تنظیم شده است).
هنگامی که این اتفاق می افتد، کد پورتی را که به تازگی به آن متصل شده است از رویداد Connect دریافت می کند و آن را در یک متغیر ذخیره می کند. سپس، کد شنونده onmessage را در شی پورت ثبت می کند. سپس کد پیام را در کنسول ثبت می کند و از پورت برای ارسال پیام به رشته اصلی استفاده می کند.
وب کارگران تجربه کاربری را بهبود می بخشند
وب‌کارگرها رشته‌های جاوا اسکریپت هستند که به شما امکان می‌دهند کدهای پیچیده و طولانی‌مدت را در پس‌زمینه اجرا کنید. سپس این کد از مسدود کردن رابط کاربری جلوگیری می کند. استفاده از وب‌کارگرها نوشتن این نوع کدها را بسیار آسان‌تر می‌کند و تجربه را برای کاربر برنامه بهبود می‌بخشد. با استفاده از web worker API می‌توانید وب‌کارگر را ایجاد کنید و با آنها تعامل کنید.