Javascript Web Workers
Herkese merhabalar bu yazımızda sizlerle beraber javascript web workerlarına değiniyor olacağız. Öncelikle bu işçiler (worker) arka planda sizin kodunuzu bloke atmadan kendi thread üzerinde çalıştığı için hiç bir bloke işlemine mağruz kalmadan ana kodumuz çalışmasına devam ediyor olacaktır. Örneğin bir butona tıklayınca bir milyon kere dönecek bir loop oluşturdunuz başka bir buton da yalnız ekrana alert ile merhaba yazıyor, ben önce döngüyü başlatıp daha sonra ekrana alert veren butona bastığımda ilgili döngünün bitmesini bekleyecektir ve ekranda kasma meydana gelecektir işte bu gibi durumlar için bizim karınca işçilerimizi (worker) devreye sokabiliriz. Dilerseniz hemen başlayalım.
Yapılandırma;
index.html dosyasını oluşturup aşağıdaki gibi kodluyorum.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<button onclick="onAlert()">Alert Ver</button>
</div>
<div>
<button onclick="onLoop()">
Döngü Kur
</button>
</div>
<script src="./front.js"></script>
</body>
</html>daha sonra front.js dosyamı oluşturup ilgili methodlarımı yazıyorum ,
function onAlert() {
alert('Merhaba')
}function onLoop() {
const sayiArray=[]
for (let index = 0; index < 100000000; index++) {
sayiArray.push(index)
}}
öncelikle ilk olarak döngü kur butonuna basıp daha sonra alert ver butonuna bastığımda ekranda bir kasma olacaktır yada ram yetmeyecek patlayacaktır uygulamam bloklanacaktır , ve loop bitince alert ver butonuna kaç kere bastıysam o kadar ekrana alert verecektir işte workerlar tam da bu durumda bizim işimizi kolaylaştırıyorlar, şimdi aynı problemi worker ile yapmaya çalışalım.
Yapılandırma;
Öncelikle işi artık worker devralacağı için worker.js adında bir dosya oluşturuyorum
self.onmessage = (//e parametre geçilirse e içerisinden erişmek için) => {
const sayiArray=[]
for (let index = 0; index < 100000000; index++) {
sayiArray.push(index)
postMessage(JSON.stringify(sayiArray))
}worker dosyama onLoop methodu içerisindeki aynı kodu yazıyorum ve işini bitirdikten sonra postMessage methodu ile iş bitince ilgili array bana göndermesini söylüyorum.
Şimdi de gelelim fron.js dosyamıza
const worker1 = new Worker('./worker.js') // a işinden sorumlu işçi
window.addEventListener('load', () => {
worker1.onerror = (evt) => {
console.log('hata', evt)
}
worker1.onmessage = (evt) => {
console.log('succes', evt.data)
worker1.terminate();
worker1 = undefined;
}})function onAlert() {alert('Merhaba')}function onLoop() {worker1.postMessage(//parametre geçmek istenirse)}}
window onload olduktan sonra global olarak tanımladığı işçiye worker1 worker.js dosyamın yolunu belirtiyor ve ilgili işçiye listenerlar ekliyorum daha sonra aynı işlemi gerçekleştirdiğimde worker.js ayrı front.js ayrı olarak çalısıyor bu yüzden de birbirlerini bloklamıyorla eklediğim listenerlara iş bitince onmessage methoduma düşüyor ve ben artık ne yapmak istiyorsam onu yapabilirim son olarak da iş bittikten sonra worker1'i artık yok ediyorum işte bütün işlem bu kadar.
Daha detaylı bilgi için buraya tıklayıp mdn resmi dökümanına göz atabilirsiniz.
Kanalımdaki videoya göz atabilirsiniz.
Kaynak kodları ise burada.
Herkese İyi Çalışmalar Dilerim.
