HTML Web Workers

Web worker ਪਿੱਛੇ ਚਲਣ ਵਾਲਾ JavaScript ਹੈ ਜੋ ਪੰਜੀਕਰਣ ਦੀ ਸਮਰੱਥਾ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਕਰਦਾ。

ਵੈੱਬ ਵਰਕਰ ਕੀ ਹੈ?

ਜਦੋਂ HTML ਪੰਨੇ 'ਤੇ ਸਕ੍ਰਿਪਟ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਪੰਨਾ ਨਹੀਂ ਪ੍ਰਤੀਕਿਰਿਆਮੰਡ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਸਕ੍ਰਿਪਟ ਪੂਰਾ ਨਹੀਂ ਹੋਇਆ ਹੈ。

Web worker ਪਿੱਛੇ ਚਲਣ ਵਾਲਾ JavaScript ਹੈ ਜੋ ਹੋਰ ਸਕ੍ਰਿਪਟਾਂ ਤੋਂ ਮੁਕਤ ਹੈ ਅਤੇ ਪੰਜੀਕਰਣ ਦੀ ਸਮਰੱਥਾ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਕਰਦਾ। ਤੁਸੀਂ ਕਿਤੇ ਹੋਰ ਕੀ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ ਕਲਿੱਕ ਕਰਨਾ, ਸਮਾਚਾਰ ਚੁਣਨਾ ਆਦਿ, ਜਦੋਂ ਵੈੱਬ ਵਰਕਰ ਪਿੱਛੇ ਚਲ ਰਿਹਾ ਹੈ。

ਬਰਾਊਜਰ ਸਮਰਥਨ

ਸਾਰੇ ਬਰੀਤੇ ਨੰਬਰ ਪੂਰੀ ਤਰ੍ਹਾਂ Web Worker ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਪਹਿਲੇ ਬਰਾਊਜ਼ਰ ਵਰਜਨ ਨੂੰ ਸੂਚਿਤ ਕਰਦੇ ਹਨ。

API
Web Worker 4.0 10.0 3.5 4.0 11.5

HTML Web Workers ਉਦਾਹਰਣ

ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵੈੱਬ ਵਰਕਰ ਨੂੰ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਪਿੱਛੇ ਗਿਣਤੀ ਕਰਦਾ ਹੈ:

ਗਿਣਤੀ:

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਵੈੱਬ ਵਰਕਰ ਸਮਰਥਨ ਚੈੱਕ

ਵੈੱਬ ਵਰਕਰ ਬਣਾਉਣ ਤੋਂ ਪਹਿਲਾਂ, ਯੂਜ਼ਰ ਬਰਾਊਜ਼ਰ ਦੀ ਵੈੱਬ ਵਰਕਰ ਸਮਰਥਨ ਚੈੱਕ ਕਰੋ:

if (typeof(Worker) !== "undefined") {
    // ਹਾਂ! ਵੈੱਬ ਵਰਕਰ ਸਮਰਥਨ ਹੈ!
    // ਕੁਝ ਕੋਡ.....
}
    // ਮਾਫੀ! ਵੈੱਬ ਵਰਕਰ ਸਮਰਥਨ ਨਹੀਂ ਹੈ!
}

ਵੈੱਬ ਵਰਕਰ ਫਾਈਲ ਬਣਾਓ

ਹੁਣ, ਅਸੀਂ ਇੱਕ ਬਾਹਰੀ JavaScript ਫਾਈਲ ਵਿੱਚ ਆਪਣੇ web worker ਨੂੰ ਬਣਾਈਏ।

ਇੱਥੇ, ਅਸੀਂ ਗਿਣਤੀ ਸਕ੍ਰਿਪਟ ਬਣਾਈ ਹੈ। ਇਹ ਸਕ੍ਰਿਪਟ "demo_workers.js" ਫਾਈਲ ਵਿੱਚ ਸਟੋਰ ਹੈ:

var i = 0;
function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}
timedCount();

ਇਸ ਕੋਡ ਵਿੱਚ ਮਹੱਤਵਪੂਰਣ ਹਿੱਸਾ postMessage() ਮੈਥਡ ਹੈ - ਇਹ ਇੱਕ ਸੰਦੇਸ਼ ਨੂੰ HTML ਪੇਜ ਵਿੱਚ ਭੇਜਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

ਟਿੱਪਣੀ: web worker ਆਮ ਤੌਰ 'ਤੇ ਇੰਨੇ ਸਰਲ ਸਕ੍ਰਿਪਟਾਂ ਵਿੱਚ ਨਹੀਂ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਬਲਕਿ ਜਿਆਦਾ CPU ਸੰਸਾਧਨ ਵਾਲੇ ਕੰਮਾਂ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

Web Worker ਅਬਜੈਕਟ ਬਣਾਓ

ਹੁਣ ਅਸੀਂ web worker ਫਾਈਲ ਹਾਂ, ਇਸ ਨੂੰ HTML ਪੇਜ ਵਿੱਚ ਸ਼ਾਮਿਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ。

ਨਿਚੇ ਦਾ ਕੋਡ ਵਰਕਰ ਦੀ ਮੌਜੂਦਗੀ ਦੀ ਚੇਕ ਕਰਦਾ ਹੈ, ਜੇਕਰ ਉਹ ਨਹੀਂ ਹੈ, ਤਾਂ - ਉਹ ਇੱਕ ਨਵਾਂ web worker ਅਬਜੈਕਟ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ "demo_workers.js" ਵਿੱਚ ਦਾ ਕੋਡ ਚਲਾਉਂਦਾ ਹੈ:

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

ਤਦ ਅਸੀਂ web worker ਤੋਂ ਸੰਦੇਸ਼ ਭੇਜ ਸਕਦੇ ਹਾਂ ਅਤੇ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਾਂ。

ਵੈਬ ਵਰਕਰ ਵਿੱਚ ਇੱਕ "onmessage" ਈਵੈਂਟ ਲਿਸਨਰ ਜੋੜੋ:

w.onmessage = function(event){
    document.getElementById("result").innerHTML = event.data;
}

ਜਦੋਂ web worker ਸੰਦੇਸ਼ ਭੇਜਦਾ ਹੈ, ਤਾਂ ਉਹ ਈਵੈਂਟ ਲਿਸਨਰ ਵਿੱਚ ਕੋਡ ਚਲਾਉਂਦਾ ਹੈ। web worker ਦਾ ਡਾਟਾ event.data ਵਿੱਚ ਸਟੋਰ ਹੁੰਦਾ ਹੈ。

Web Worker ਨੂੰ ਖਤਮ ਕਰੋ

ਜਦੋਂ ਤੁਸੀਂ web worker ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਉਹ ਸੰਦੇਸ਼ਾਂ ਨੂੰ ਸੁਣਨ ਜਾਰੀ ਰੱਖਦਾ ਹੈ (ਹੋਰ ਸਕ੍ਰਿਪਟ ਮੁਕਤ ਹੋਣ ਤੋਂ ਬਾਅਦ ਵੀ) ਜਦੋਂ ਤੱਕ ਉਹ ਖਤਮ ਨਹੀਂ ਹੁੰਦਾ ਹੈ。

ਜੇਕਰ ਤੁਸੀਂ web worker ਨੂੰ ਖਤਮ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਅਤੇ ਬਰਾਉਜ਼ਰ/ਕੰਪਿਊਟਰ ਦੇ ਸੰਸਾਧਨਾਂ ਨੂੰ ਮੁਕਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ terminate() ਮੈਥਡ ਵਰਤੋਂ ਕਰੋ:

w.terminate();

Web Worker ਦੀ ਫਿਰ ਵਰਤੋਂ

ਅਗਰ ਤੁਸੀਂ ਵਰਕਰ ਵੱਡੇ ਨੂੰ undefined ਮੁੱਲ ਦੇਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਉਸ ਦੇ ਬਾਅਦ ਹਟਾਉਣ ਤੋਂ ਬਾਅਦ ਇਹ ਕੋਡ ਫਿਰ ਵਰਤ ਸਕਦੇ ਹੋ:

w = undefined;

ਪੂਰੀ Web Worker ਉਦਾਹਰਣ ਕੋਡ

ਅਸੀਂ .js ਫਾਈਲ ਵਿੱਚ ਵਰਕਰ ਕੋਡ ਨੂੰ ਦੇਖਿਆ ਹੈ। ਹੁਣ ਹੁਣੇ ਹੁਣੇ HTML ਪੇਜ ਦਾ ਕੋਡ ਹੈ:

ਉਦਾਹਰਣ

<!DOCTYPE html>
<html>
<body>
<p>ਗਿਣਤੀ ਕਰੋ: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        }
    }
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

Web Worker ਅਤੇ DOM

ਕਿਉਂਕਿ web worker ਬਾਹਰੀ ਫਾਈਲ ਵਿੱਚ ਹੈ ਤਾਂ ਉਹ ਹੇਠ ਲਿਖੇ JavaScript ਆਬਜੈਕਟਾਂ ਨੂੰ ਪਹੁੰਚ ਨਹੀਂ ਕਰ ਸਕਦੇ:

  • window ਆਬਜੈਕਟ
  • document ਆਬਜੈਕਟ
  • parent ਆਬਜੈਕਟ