Web Workers (part 2): Sử dụng Dedicated Worker

web api web worker dedicated worker

Trong phần 1, mình đã giới thiệu một cách tổng quan về các loại Web Workers và ứng dụng của nó. Trong phần tiếp theo này, mình sẽ giới thiệu kĩ hơn về Dedicated Worker (DW) thông qua ví dụ cụ thể.

Trong phần 1, mình đã giới thiệu một cách tổng quan về các loại Web Workers và ứng dụng của nó.

Trong phần tiếp theo này, mình sẽ giới thiệu kĩ hơn về Dedicated Worker (DW) thông qua ví dụ cụ thể.

Như đã nói trong phần 1, một trong những tác vụ thường được ứng dụng Dedicated Worker (DW) đó là code highlighting. Với DW, mình sẽ viết một đoạn script sử dụng luồng DW giúp thực hiện highlight code snippet (việc highlight code sử dụng thư viện highlight.js). Trước tiên chúng ta sẽ cần chuẩn bị các file sau:

- |
  | - index.html
  | - main.js
  | - worker.js
  | - highlight
     | - styles
         | - atom-one-dark.css
     | - highlight.pack.js

Đầu tiên chúng ta có file index.html với một đoạn code js.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Web Worker</title>
    <link rel="stylesheet" href="highlight/styles/atom-one-dark.css">
</head>
<body>

<pre><code class="language-javascript">
    /**
    * Phaser snake
    * @param  {Phaser.Game} game      game object
    * @param  {String} spriteKey Phaser sprite key
    * @param  {Number} x         coordinate
    * @param  {Number} y         coordinate
    */
   Snake = function(game, spriteKey, x, y) {
       this.game = game;
       //create an array of snakes in the game object and add this snake
       if (!this.game.snakes) {
           this.game.snakes = [];
       }
       this.game.snakes.push(this);
       this.debug = false;
       this.snakeLength = 0;
       this.spriteKey = spriteKey;

       //various quantities that can be changed
       this.scale = 0.6;
       this.fastSpeed = 200;
       this.slowSpeed = 130;
       this.speed = this.slowSpeed;
       this.rotationSpeed = 40;

       //initialize groups and arrays
       this.collisionGroup = this.game.physics.p2.createCollisionGroup();
       this.sections = [];
       //the head path is an array of points that the head of the snake has
       //traveled through
       this.headPath = [];
       this.food = [];

       this.preferredDistance = 17 * this.scale;
       this.queuedSections = 0;

       //initialize the shadow
       this.shadow = new Shadow(this.game, this.sections, this.scale);
       this.sectionGroup = this.game.add.group();
       //add the head of the snake
       this.head = this.addSectionAtPosition(x,y);
       this.head.name = "head";
       this.head.snake = this;

       this.lastHeadPosition = new Phaser.Point(this.head.body.x, this.head.body.y);
       //add 30 sections behind the head
       this.initSections(30);

       //initialize the eyes
       this.eyes = new EyePair(this.game, this.head, this.scale);

       //the edge is the front body that can collide with other snakes
       //it is locked to the head of this snake
       this.edgeOffset = 4;
       this.edge = this.game.add.sprite(x, y - this.edgeOffset, this.spriteKey);
       this.edge.name = "edge";
       this.edge.alpha = 0;
       this.game.physics.p2.enable(this.edge, this.debug);
       this.edge.body.setCircle(this.edgeOffset);

       //constrain edge to the front of the head
       this.edgeLock = this.game.physics.p2.createLockConstraint(
           this.edge.body, this.head.body, [0, -this.head.width*0.5-this.edgeOffset]
       );

       this.edge.body.onBeginContact.add(this.edgeContact, this);

       this.onDestroyedCallbacks = [];
       this.onDestroyedContexts = [];
   }

   Snake.prototype = {
       /**
        * Give the snake starting segments
        * @param  {Number} num number of snake sections to create
        */
       initSections: function(num) {
           //create a certain number of sections behind the head
           //only use this once
           for (var i = 1 ; i <= num ; i++) {
               var x = this.head.body.x;
               var y = this.head.body.y + i * this.preferredDistance;
               this.addSectionAtPosition(x, y);
               //add a point to the head path so that the section stays there
               this.headPath.push(new Phaser.Point(x,y));
           }

       },
       /**
        * Add a section to the snake at a given position
        * @param  {Number} x coordinate
        * @param  {Number} y coordinate
        * @return {Phaser.Sprite}   new section
        */
       addSectionAtPosition: function(x, y) {
           //initialize a new section
           var sec = this.game.add.sprite(x, y, this.spriteKey);
           this.game.physics.p2.enable(sec, this.debug);
           sec.body.setCollisionGroup(this.collisionGroup);
           sec.body.collides([]);
           sec.body.kinematic = true;

           this.snakeLength++;
           this.sectionGroup.add(sec);
           sec.sendToBack();
           sec.scale.setTo(this.scale);

           this.sections.push(sec);

           this.shadow.add(x,y);
           //add a circle body to this section
           sec.body.clearShapes();
           sec.body.addCircle(sec.width*0.5);

           return sec;
       },
       /**
        * Add to the queue of new sections
        * @param  {Integer} amount Number of sections to add to queue
        */
       addSectionsAfterLast: function(amount) {
           this.queuedSections += amount;
       },
       /**
        * Call from the main update loop
        */
       update: function() {
           var speed = this.speed;
           this.head.body.moveForward(speed);

           //remove the last element of an array that contains points which
           //the head traveled through
           //then move this point to the front of the array and change its value
           //to be where the head is located
           var point = this.headPath.pop();
           point.setTo(this.head.body.x, this.head.body.y);
           this.headPath.unshift(point);

           //place each section of the snake on the path of the snake head,
           //a certain distance from the section before it
           var index = 0;
           var lastIndex = null;
           for (var i = 0 ; i < this.snakeLength ; i++) {

               this.sections[i].body.x = this.headPath[index].x;
               this.sections[i].body.y = this.headPath[index].y;

               //hide sections if they are at the same position
               if (lastIndex && index == lastIndex) {
                   this.sections[i].alpha = 0;
               }
               else {
                   this.sections[i].alpha = 1;
               }

               lastIndex = index;
               //this finds the index in the head path array that the next point
               //should be at
               index = this.findNextPointIndex(index);
           }

           //continuously adjust the size of the head path array so that we
           //keep only an array of points that we need
           if (index >= this.headPath.length - 1) {
               var lastPos = this.headPath[this.headPath.length - 1];
               this.headPath.push(new Phaser.Point(lastPos.x, lastPos.y));
           }
           else {
               this.headPath.pop();
           }

           //this calls onCycleComplete every time a cycle is completed
           //a cycle is the time it takes the second section of a snake to reach
           //where the head of the snake was at the end of the last cycle
           var i = 0;
           var found = false;
           while (this.headPath[i].x != this.sections[1].body.x &&
           this.headPath[i].y != this.sections[1].body.y) {
               if (this.headPath[i].x == this.lastHeadPosition.x &&
               this.headPath[i].y == this.lastHeadPosition.y) {
                   found = true;
                   break;
               }
               i++;
           }
           if (!found) {
               this.lastHeadPosition = new Phaser.Point(this.head.body.x, this.head.body.y);
               this.onCycleComplete();
           }

           //update the eyes and the shadow below the snake
           this.eyes.update();
           this.shadow.update();
       },
       /**
        * Find in the headPath array which point the next section of the snake
        * should be placed at, based on the distance between points
        * @param  {Integer} currentIndex Index of the previous snake section
        * @return {Integer}              new index
        */
       findNextPointIndex: function(currentIndex) {
           var pt = this.headPath[currentIndex];
           //we are trying to find a point at approximately this distance away
           //from the point before it, where the distance is the total length of
           //all the lines connecting the two points
           var prefDist = this.preferredDistance;
           var len = 0;
           var dif = len - prefDist;
           var i = currentIndex;
           var prevDif = null;
           //this loop sums the distances between points on the path of the head
           //starting from the given index of the function and continues until
           //this sum nears the preferred distance between two snake sections
           while (i+1 < this.headPath.length && (dif === null || dif < 0)) {
               //get distance between next two points
               var dist = Util.distanceFormula(
                   this.headPath[i].x, this.headPath[i].y,
                   this.headPath[i+1].x, this.headPath[i+1].y
               );
               len += dist;
               prevDif = dif;
               //we are trying to get the difference between the current sum and
               //the preferred distance close to zero
               dif = len - prefDist;
               i++;
           }

           //choose the index that makes the difference closer to zero
           //once the loop is complete
           if (prevDif === null || Math.abs(prevDif) > Math.abs(dif)) {
               return i;
           }
           else {
               return i-1;
           }
       },
       /**
        * Called each time the snake's second section reaches where the
        * first section was at the last call (completed a single cycle)
        */
       onCycleComplete: function() {
           if (this.queuedSections > 0) {
               var lastSec = this.sections[this.sections.length - 1];
               this.addSectionAtPosition(lastSec.body.x, lastSec.body.y);
               this.queuedSections--;
           }
       },
       /**
        * Set snake scale
        * @param  {Number} scale Scale
        */
       setScale: function(scale) {
           this.scale = scale;
           this.preferredDistance = 17 * this.scale;

           //update edge lock location with p2 physics
           this.edgeLock.localOffsetB = [
               0, this.game.physics.p2.pxmi(this.head.width*0.5+this.edgeOffset)
           ];

           //scale sections and their bodies
           for (var i = 0 ; i < this.sections.length ; i++) {
               var sec = this.sections[i];
               sec.scale.setTo(this.scale);
               sec.body.data.shapes[0].radius = this.game.physics.p2.pxm(sec.width*0.5);
           }

           //scale eyes and shadows
           this.eyes.setScale(scale);
           this.shadow.setScale(scale);
       },
       /**
        * Increment length and scale
        */
       incrementSize: function() {
           this.addSectionsAfterLast(1);
           this.setScale(this.scale * 1.01);
       },
       /**
        * Destroy the snake
        */
       destroy: function() {
           this.game.snakes.splice(this.game.snakes.indexOf(this), 1);
           //remove constraints
           this.game.physics.p2.removeConstraint(this.edgeLock);
           this.edge.destroy();
           //destroy food that is constrained to the snake head
           for (var i = this.food.length - 1 ; i >= 0 ; i--) {
               this.food[i].destroy();
           }
           //destroy everything else
           this.sections.forEach(function(sec, index) {
               sec.destroy();
           });
           this.eyes.destroy();
           this.shadow.destroy();

           //call this snake's destruction callbacks
           for (var i = 0 ; i < this.onDestroyedCallbacks.length ; i++) {
               if (typeof this.onDestroyedCallbacks[i] == "function") {
                   this.onDestroyedCallbacks[i].apply(
                       this.onDestroyedContexts[i], [this]);
               }
           }
       },
       /**
        * Called when the front of the snake (the edge) hits something
        * @param  {Phaser.Physics.P2.Body} phaserBody body it hit
        */
       edgeContact: function(phaserBody) {
           //if the edge hits another snake's section, destroy this snake
           if (phaserBody && this.sections.indexOf(phaserBody.sprite) == -1) {
               this.destroy();
           }
           //if the edge hits this snake's own section, a simple solution to avoid
           //glitches is to move the edge to the center of the head, where it
           //will then move back to the front because of the lock constraint
           else if (phaserBody) {
               this.edge.body.x = this.head.body.x;
               this.edge.body.y = this.head.body.y;
           }
       },
       /**
        * Add callback for when snake is destroyed
        * @param  {Function} callback Callback function
        * @param  {Object}   context  context of callback
        */
       addDestroyedCallback: function(callback, context) {
           this.onDestroyedCallbacks.push(callback);
           this.onDestroyedContexts.push(context);
       }
   };
</code></pre>

<script src="main.js"></script>

</body>
</html>

Trong file html, chúng ta link sẵn file style của thư viện highlight, và cuối cùng link file main.js.

DW được sử dụng thông qua constructor Worker(), ngầm hiểu là sử dụng thông qua scope window. Vì vẫn có một phần nhỏ trình duyệt chưa hỗ trợ DW, vì vậy trước khi sử dụng, chúng ta cần check xem trình duyệt có hỗ trợ:

// main.js
if (window.Worker) {
    //
}

Tiếp theo, chúng ta sẽ thực hiện việc highlight code, luồng của chúng ta sẽ là:

  • Truy cập đến DOM chứa đoạn code cần highlight
  • Gửi đoạn DOM đấy sang luồng DW
  • Luồng DW sẽ gọi thư viện highlight.js và thực hiện việc highlight code, sau đó gửi ngược kết quả lại luồng window
  • Ở phía luồng window, chúng ta sẽ viết một eventHandler đón kết quả trả về, sau đó thay thế nội dung đoạn code cũ.
if (window.Worker) {
  addEventListener('load', function () {
    var codes = document.querySelectorAll('pre code');
    var worker = new Worker('/worker.js');

    // bind worker onmessage event để xử lý data DW trả về
    worker.onmessage = function (event) {
      event.data.forEach(function(formatedCode, index) {
        codes[index].innerHTML = formatedCode.value;
      });
    };

    // collect data to format
    var codeContentToFormat = [];
    codes.forEach(function (code) {
      codeContentToFormat.push(code.textContent);
    })

    // sent data to worker
    worker.postMessage(codeContentToFormat);
  });
}

Do plugin highlight.js chỉ có thể xử lý chuỗi, trong khi đó khi truy cập DOM chúng ta nhận được kết quả là NodeList array, vì thế chúng ta cần trích xuất text content từ NodeList, tập hợp lại thành 1 mảng text, và gửi sang luồng worker để xử lý.

Trong file worker.js:

// worker.js
onmessage = function (event) {
    importScripts('/highlight/highlight.pack.js');
    postMessage(event.data.map(function (code) {
        return self.hljs.highlightAuto(code);
    }));
};

Trong file worker.js (luồng worker), chúng ta cũng viết 1 eventHandler bind cho event onmessage để nhận và xử lý dữ liệu từ luồng window. Dữ liệu được gửi đến sẽ nằm trong event.data. event.data lúc này là 1 mảng các chuỗi đc trích xuất từ NodeList array trước đó bên luồng window. Chúng ta chạy hljs cho từng dòng text. Cuối cùng sử dụng method postMessage để gửi ngược data về luồng window.

Giờ các bạn có thể chạy thử. Chúng ta sẽ cần đến server tĩnh để chạy thử. Các bạn có thể sử dụng http-server npm, php console, hoặc Web Server for Chrome (1 extention trên chrome). Sau đó chạy thử file index.html. Với đoạn code cần highlight dài như ví dụ trên, các bạn có thể dễ dàng nhận ra phải mất một khoảng thời gian sau khi web page tải xong, code mới được highlight.

source code https://bitbucket.org/giathinh910/example-web-worker-dedicated-worker

Previous Post Next Post