Weblabor

A cikksorozat előző részében megismerkedtünk a Node.js rendszer telepítésével és alapvető működésével. Most újabb részletekbe ásunk bele, és megnézzük, hogyan tudunk hatékonyabb alkalmazásokat írni.

Többszálúság

Egy Node alkalmazás egyetlen szálon fut, ami a többmagos processzorok korában talán furcsának tűnhet. Ugyanakkor nem is olyan bonyolult egy már létező alkalmazást többszálúra átalakítani. Az egész lényege, hogy az alkalmazásunkat úgy írjuk meg, hogy a parancssori paraméterekben fogadni tudja, hogy melyik porton is fogadja a kéréseket, valamint írunk egy pár soros proxy alkalmazást, ami ezekhez a most már párhuzamosan futtatható alkalmazásokhoz továbbítja a kéréseket.

Álljon itt egy minimális alkalmazás, ami csak annyit ad vissza válaszként a HTTP kérésekre, hogy Hello World @ [port]. Legyen ez az app.js:

var http = require('http'),
    // Vesszük az alkalmazásunknak átadott paraméterket,
    // és abból levesszük az első kettőt (`node` és `app.js`).
    args = process.argv.slice(2),
    // Ezen a porton fog az alkalmazásunk várakozni
    port = args.length && parseInt(args[0], 10) || 8080;

http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello World @ '+ port +'\n');
}).listen(port);

console.log('Server running at http://127.0.0.1:%d/', port);

Írjuk meg hozzá a proxy.js alkalmazásunkat, ami ezeket a futó alkalmazásokat fogja hívogatni. Ehhez a http-proxy modult kell telepíteni. Sajnos ennek a modulnak rengeteg követelménye van, de npm-mel egyszerű telepíteni:

$ npm install http-proxy@0.3.0

Mit látható a 0.3.0 verziójú változatot telepítettem, mivel ez kompatibilis a Node 0.2-es változatával, a legfrissebb változathoz már 0.3-as Node kell.

var http = require('http'),
    httpProxy = require('http-proxy'),
    args = process.argv.slice(2),
    // Ezen a porton fog az alkalmazásunk várakozni
    port = args.length && parseInt(args[0], 10) || 8080,
    // Az terhelés elosztásának algoritmusa.
    spread = args.length && args[1] || 'random',
    servers;

/**
 * Egy index generálása 0 és `max` között..
 *
 * @param {HTTPRequest} request
 *   Az aktuális HTTP lekérdezés.
 * @param {Number} max
 *   Az számunk ennél kisebb legyen.
 *
 * @returns {Number}
 *   Egy szám 0 és `max` között, `max`-ot nem beleszámolva.
 */
function hashIp(request, max) {
  var ip = request.socket.remoteAddress.split('.');

  return (ip[0] * 0x10000 + ip[1] * 0x100 + ip[2]) % max;
}

/**
 * Kérések kezelése proxyn keresztül.
 *
 * Visszaad egy függvényt, aminek hozzáférése van a `servers` tömbhöz és a
 * szórás típusához. Ez a függvény a beérkező HTTP kéréseket
 * a szórásnak megfelelően továbbítja a szerverek egyikéhez.
 *
 * @param {Object[]} servers
 *   Szerverek listája a következő formában:
 *    {name: ip_or_domain, port: 123}
 * @param {String} [spread="random"]
 *   Az eloszlás típusa. (random, single, ip)
 *
 * @returns {Function}
 *   A függvény ami kezeli a HTTP kéréseket, úgy hogy továbbítja
 *   azokat a megadott szervereknek.
 */
function handleRequest(servers, spread) {
  var getId;
  // Egyszerű Logika az aktuális szerver kiválasztására.
  switch (spread) {
    case 'single':
      getId = function (request, servers) {
        return 0;
      };
      break;
    case 'ip':
      getId = function (request, servers) {
        return hashIp(request, servers.length);
      };
      break;
    case 'random':
    default:
      getId = function (request, servers) {
        // Gyors véletlen szám lefele kerekítéssel
        return (Math.random() * servers.length) | 0;
      };
  }

  return function (req, res) {
        // Lekérdezzük a szerver számát, amit használni fogunk.
    var id = getId(req, servers),
        // Készítünk egy új proxy-t, ami kezeli a kéréseket.
        proxy = new httpProxy.HttpProxy(req, res),
        // Ehhez a szerverhez kapcsolódunk.
        server = servers[id];

    // Proxyzzuk a lekérdezést.
    proxy.proxyRequest(server.port, server.name, req, res);
  };
}

servers = [
  { name: '127.0.0.1', port: 8081 },
  { name: '127.0.0.1', port: 8082 }
];

// Várakozunk a kérésekre, és azokat továbbítjuk a szervereknek.
http.createServer(handleRequest(servers, spread)).listen(port);
console.log('Proxy running at http://127.0.0.1:%d/', port);

Ezután az alkalmazásunkat a következőképpen futtathatjuk:

$ node app.js 8081 & node app.js 8082 & node proxy.js

Ekkor elindul az app.js a 8081-es és 8082-es porton, amikhez a proxy.js fog majd csatlakozni. A proxy.js-nek is megadhatjuk hogy mely porton várakozzon, illetve hogy milyen szórási metódust használjon az elérhető 3 közül.

Ha úgy érezzük, hogy a HTTP kérések proxyn keresztüli továbbítása hátrányosan érinti az alkalmazásunk sebességét – ebben eléggé kételkedek, ugyanis majdnem egyenesen arányos a növekedés új szerverek hozzáadásakor (természetesen csak bizonyos határokig) –, akkor alkalmazhatunk például Unix socketeket. Ekkor azonban az alkalmazásunkat át kell írni, és nehezebb a hibakeresés is, ugyanis nem lehet önállóan futtatni.

Tisztító alkalmazás

Valamelyik nap egy érdekes feladatot tűztem ki magam elé. Van egy viszonylag rendezetlen könyvtár struktúrában egy halom HTML és egyéb fájl. Nekem a HTML fájlok kellenek, viszont a tartalmukból nem kell minden. Például a <script> elemekre, vagy például a különböző menükre sincsen szükségem, szinte csak a fő tartalomra.

Rekurzív könyvtárbejárás

Előbb írjuk meg az alkalmazás azon részét, amivel be tudjuk járni a könyvtárstruktúrát, és a talált fájlokból ki tudjuk szűrni a .html kiterjesztésűeket. A Node szinte minden fájlrendszer művelet esetén kínál egy aszinkron és egy szinkron megvalósítást. Hogy ez mit jelent? Aszinkron megoldás esetén a parancs visszatértekor egy callback függvényt hív meg, de addig párhozamosan futtathatunk több dolgot. Szinkron kérés esetén a programunk futása megszakad, addig amíg parancs fut. Ez a szinkron működés eléggé tipikus a programozási nyelvek között. Ismerkedés okán előbb valósítsuk meg a szinkron működést. Erről tudni kell, hogy valamivel lassabb, mint az aszinkron, mivel minden egyes műveletet meg kell várni, hogy elkezdhessük a következőt.

var fs = require('fs');

/**
 * Rekurzív szinkron könyvtár bejárás
 *
 * @param {String} path
 *   Az induló könyvtár elérési útja.
 * @param {RegEx} fileMatch
 *   Reguláris kifejezés, ami meghatározza,
 *   hogy a fájlra meg kell-e hívni a callback függvényt.
 * @param {Function} callback
 *   Callback függvény, amit minden találatra meghív paraméterként
 *   a fájl elérési újtát és statisztikáit átadva.
 */
function parseDirSync(path, fileMatch, callback) {

  /**
   * Az fs.readdirSync függvény által adott eredményt dolgozza fel.
   *
   * @param {Array} files
   *   Fájlok és könyvtárak nevének listája, melyek az aktuális
   *   könyvtárban vannak.
   * @param {String} dpath
   *   Az aktuálisan elemezendő könyvtár elérési útja.
   */
  function parse(files, dpath) {
    if (files) {
      // Nem történt hiba, végig megyünk a `files` tömbön.
      files.forEach(function (name, index) {
        // A fájl / könyvtár elérési útja.
        var fpath = dpath + '/' + name,
            stats;
        // Lekérdezzük a fájl / könyvtár statisztikáját
        stats = fs.statSync(fpath);
        if (stats) {
          // Nem történt hiba, lássuk az információt.
          if (stats.isDirectory()) {
            // Menjünk végig rekurzívan a könyvtáron.
            parse(fs.readdirSync(fpath), fpath);
          }
          else if (stats.isFile()) {
            // Megnézzük, hogy a fájl illeszkedik-e.
            if (fileMatch.test(fpath)) {
              // Meghívjuk a `callback` függvényt, átadva a fájl elérési
              // útját, és statisztikáit.
              callback(fpath, stats);
            }
          }
        }
      });
    }
  }

  parse(fs.readdirSync(path), path);
}

Ezt a következőképpen használhatjuk, például hogy kiírjuk az összes directory könyvtár alatt levő .html fájlnak az elérési újtát:

parseDirSync(directory, /\.html$/i, function (path, stats) {
  console.log(path);
});

Most nézzük meg ugyanezt aszinkron módon:

var fs = require('fs');

/**
 * Rekurzív aszinkron könyvtár bejárás
 *
 * @param {String} path
 *   Az induló könyvtár elérési útja.
 * @param {RegEx} fileMatch
 *   Reguláris kifejezés, ami meghatározza,
 *   hogy a fájlra meg kell-e hívni a `callback` függvényt.
 * @param {Function} callback
 *   Callback függvény, amit minden találatra meghív paraméterként
 *   a fájl elérési útját és statisztikáit átadva.
 */
function parseDir(path, fileMatch, callback) {
  /**
   * Rekurzívan beolvassa a megadott könyvtárat.
   *
   * @param {String} dpath.
   *   A feldolgozandó könyvtár elérési útja.
   */
  function read(dpath) {
    /**
     * Az fs.readdir függvény által adott eredményt dolgozza fel.
     *
     * @param {Array} files
     *   Fájlok és könyvtárak nevének listája, melyek az aktuális
     *   könyvtrában vannak.
     * @param {String} dpath
     *   Az aktuálisan elemezendő könyvtár elérési útja.
     */
    function parse(err, files) {
      if (!err) {
        // Nem történt hiba, végig megyünk a `files` tömbön.
        files.forEach(function (name, index) {
          // A fájl / könyvtár elérési útja.
          var fpath = dpath + '/' + name;
          // Lekérdezzük a fájl / könyvtár statisztikáját
          fs.stat(fpath, function (err, stats) {
            if (!err) {
              // Nem történt hiba, lássuk az információt.
              if (stats.isDirectory()) {
                // Menjünk végig rekurzívan a könyvtáron.
                read(fpath);
              }
              else if (stats.isFile()) {
                // Megnézzük, hogy a fájl illeszkedik-e.
                if (fileMatch.test(fpath)) {
                  // Meghívjuk a `callback` függvényt, átadva a fájl elérési
                  // útját, és statisztikáit.
                  callback(fpath, stats);
                }
              }
            }
          });
        });
      }
    }

    fs.readdir(dpath, parse);
  }

  read(path);
}

Amint látszik, hatalmas különbségek nincsenek, ugyanakkor a különbségek igenis lényegesek. Ez utóbbi függvény a könyvtárakat szinte párhuzamosan dolgozza fel. Ezért fordulhat elő, hogy ha az előző kódhoz hasonlóan csak kiíratjuk a fájlok elérési útját, akkor azok nem folytonosan, hanem közel össze-vissza jelennek majd meg a kimeneten.

Ez a párhuzamos feldolgozás gyorsabb tud lenni, ugyanakkor lehetnek hátrányai, ha nem bánunk vele óvatosan. Például, ha a feldolgozó függvény sok memóriát fogyaszt, akkor a sok párhuzamosan futtatott feldolgozás eredményezheti azt, hogy elfogy a memória. Ilyen feladatokra érdemes lehet egy úgynevezett poolt készíteni, vagy használni, amibe belepakoljuk a kívánt feladatainkat, és egyszerre csak bizonyos mennyiségűt futtatunk párhuzamosan.

Párhuzamos futtatás

Párhuzamos futásra alkalmas egyik általánosan használható modul a generic-pool. Lényegében nem más, mint az Object pool pattern egy megvalósítása.

A Pool egy gyárat vár paraméterként. A gyár egy objektum, aminek van egy create() és egy destroy() függvénye, valamint egy max értéke. A create() függvény egy új objektumot állít elő, a destroy() a megszűntetést készíti elő – például adatbázis kapcsolat esetén bezárja a kapcsolatot –, a max pedig az egyszerre futó objektumok számát határozza meg. Az Object Pool a következőképp működik:

1. Kérünk tőle egy elemet.
2. Kapunk egy ígéretet (promise), hogy amint lesz ilyen szabad elem, akkor meg fogjuk kapni.
   1. Amennyiben még nem értük el a maximális készíthető elemszámot, legyártunk egy elemet (create()), és kielégítjük a következő ígéretet.
   2. Amennyiben van szabad elem, akkor azzal elégítjük ki a következő ígéretet.
   3. Várunk, hogy valamelyik elem felszabaduljon, és amikor felszabadult, kielégítjük vele az ígéretet.
3. A megkapott objektummal dolgozunk, majd ha már nincs rá szükség, visszahelyezzük a Pool-ba.
4. Ha már nincs kielégítendő ígéret, akkor idővel megszüntetjük az elemet, ezzel memóriát, és egyéb erőforrást szabadítunk fel (destroy()).

Nézzük is meg, hogyan használhatjuk:

var Pool = require('generic-pool').Pool,
    pool;

//...

pool = new Pool({
  name: 'HTML Parser',
  // Esemény a létrehozás kezelésére
  create: function (callback) {
    // Meg kell hívni a `callback`-et, hogy megtörténjen a létrehozás
    callback('Parser Client');
  },
  destroy : function (client) {
  },
  // Legfeljebb 10 kliens futhat egyszerre
  max: 10,
  // 1 másodpercet várunk, utána megszüntetjük a nem használt klienst.
  idleTimeoutMillis : 1000
});

Vessük is be:

// Megkeressük a .html fájlokat a könyvtárban, majd azokat feldolgozzuk
parseDir(directory, /\.html$/i, function (path) {
  // Kérünk egy feldolgozót, és amint megvan dolgozunk is a fájlon.
  pool.borrow(function (client) {
    // Kaptunk egy új klienst, jelen esetben csak egy stringet,
    // jelezvén szabad a pálya.
    parseFile(path, client);
  });
});

Már csak a fájl tényleges feldolgozása van hátra, azaz a parseFile() függvény.

DOM kezelés

Amennyiben Node.js alatt akarunk DOM-ot manipulálni, úgy lehetőségünk van erre a Common.js alapokon elérhető JSDom modullal. Ehhez szükségünk van a htmlparser modulra is, ami a HTML feldolgozását végzi majd, amennyiben nem nulláról akarunk dokumentumot építeni.

$ npm install htmlparser jsdom

A JSDom a W3C DOM specifikációjának a 3. szintjét is teljesíti, de nekünk csak alapvető függvények fognak kelleni. Kicsit fura lehet, hogy böngésző nélkül is tudunk DOM manipuláló függvényeket futtatni, és azok szinte teljesen ugyan úgy működnek mint a böngészőben. Ráadásul nem tartalmazzák a böngészők DOM specifikus hibáit.

var jsdom = require('jsdom');

/**
 * Eltávolít egy elemet a DOM-ból.
 *
 * @param {Node} el
 *   DOM elem.
 */
 function removeElement(el) {
   if (el && el.parentNode) {
     el.parentNode.removeChild(el);
   }
 }

/**
 * Egy fájl feldolgozása.
 *
 * Eltávolítjuk a felesleges HTML elemeket,
 * majd egy másik könyvtárba elmentjük őket.
 *
 * @param {String} path
 *   A fájl elérési útja.
 * @param {Object} client
 *   A Pool kliens objektuma
 */
function parseFile(path, client) {
  // Beolvassuk a fájlt.
  fs.readFile(path, function (err, data) {
    var document,
        i, els, el, nav = /(?:\s|^)book_nav(?:\s|$)/,
        newPath = path.replace(directory, './output');

    if (!err) {
      // Nem volt hiba a fájl beolvasása során,
      // ezért hozzunk létre a tartalmából egy W3C DOM dokumentumot.
      document = jsdom.jsdom(data.toString());
      // Távolítsuk el, a meghatározott ID-jű elemeket.
      ['screen_banner', 'print_banner', 'site_nav', 'blue', 'right_column', 'footer', 'copyright', 'sidebar'].forEach(function (id) {
        removeElement(document.getElementById(id));
      });

      // Távolítsuk el a SCRIPT elemeket.
      els = document.getElementsByTagName('script');
      for (i = els.length - 1; i >= 0; i -= 1) {
        removeElement(els[i]);
      }
      // Ellenőrízzük, hogy egyes UL-ek tartalmaznak-e egy osztályt,
      // amennyiben igen, ezeket is távolítsuk el.
      els = document.getElementsByTagName('ul');
      for (i = els.length - 1; i >= 0; i -= 1) {
        el = els[i];
        if (el && nav.test(el.className)) {
          removeElement(el);
        }
      }

      // Mentsük el a módosított dokumentumot egy új fájlba.
      fs.writeFile(
        newPath,
        document.innerHTML,
        'utf8',
        function (err) {
          // A mentés befejeződött.
          if (!err) {
            console.log('%s sikeresen elmentve', newPath);
          }
          // Amennyiben van kliens, azt rakjuk vissza a Pool-ba,
          // ezáltal a további várakozó elemeket is fel tudjuk dolgozni.
          if (client) {
            pool.returnToPool(client);
          }
        }
      );
    }
    else {
      // Amennyiben van kliens, azt rakjuk vissza a Pool-ba,
      // ezáltal a további várakozó elemeket is fel tudjuk dolgozni.
      if (client) {
        pool.returnToPool(client);
      }
    }
  });
}

Aki idegenkedik a DOM W3C specifikáció szerinti használatától, az használhat jQuery-t is – ez ismételten furcsa lehet ugyanis még mindig nincs böngésző, csak egy emulált DOM. Ekkor persze szükségünk lesz a BOM-ra is (Browser Object Model).

var document = jsdom.jsdom(data.toString()),
    window = document.createWindow('http://example.com/');

window.jQueryfy(window, 'path/to/jquery.js', function (window, jQuery) {
  // Itt már használhatunk jQuery-t.
});

A document.createWindow() egy böngészőbeli window objektumot emulál, és a paramétere a window.location objektum létrehozásához szükséges. Bármilyen, akár képzeletbeli URL-t meg lehet neki adni, de fontos, hogy szintaktikailag helyes legyen.

Zárszó

Remélem sikerült bemutatni, hogyan lehet a Node.js esemény alapú természetét hatékonyabban kihasználni, és hogyan működnek az aszinkron fájlműveletek. Elsőre talán nehéznek, túlbonyolítottnak tűnhet, de aki foglalkozott már például Ajax programokkal, annak remélem hamar kitisztul a kép. Az erőforrások hatékonyabb kihasználásával alkalmazásunk gyorsabb lesz, és ez nem feltétlen kell, hogy a programunk áttekinthetőségének rovására menjen.

Az előző cikkhez képest, itt azért bonyolultabb javascriptes koncepciók is jelen vannak, ezért JavaScriptben gyakorlatlanabbak valószínűleg idegenkedni fognak a kódtól. Ugyanakkor remélem, hogy a gyakorlottabb programozók meglátják benne a potenciált, és a felhasznált technikák is felkeltik érdeklődésüket.