Cómo monitorear archivos y cambios de carpeta en Electron Framework

Cómo monitorear archivos y cambios de carpeta en Electron Framework

Un monitor de archivos y carpeta, verifica y vigila continuamente (valga la redundancia) las carpetas y archivos elegidos, generando eventos diferentes con diferentes acciones de las carpetas y archivos, pro ejemplo cuando un nuevo archivo es creado en una carpeta, una función personalizada debería ser ejecutada.

Librería

Para esta tarea, usaremos el módulo chokidar disponible en npm que es mejor y más rápido que la función disponible en el módulo file system de Node.js, pero porque ?

Node.js fs.watch:

  • No reporta los nombres de archivos en OS X.
  • No reporta los eventos cuando se usan editores como Sublime en OS X.
  • Los eventos pueden ser desencadenados multiples veces.
  • Emite la mayoria de los eventos como el evento rename.
  • Tiene un montón de otros problemas.
  • No provee una manera fácil de vigilar recursivamente un arbol de archivos.

Node.js fs.watchFile:

  • Es tan malo como usa manipulación.
  • No provee tampoco una manera de vigilar recursivamente.
  • Resulta en un alto consumo de CPU.

El módulo chokidar resuelve todos los problemas anteriormente mencionados, por lo tanto vamos a usarlo para monitorear nuestras carpetas y archivos. Para incluir este módulo en tu proyecto ejecuta el siguiente comando en tu terminal:

npm install chokidar --save

Luego podrás requerir el módulo desde JavaScript en tu proyecto de electron usando:

var fileWatcher = require("chokidar");

Vigilar carpetas y archivos

Para iniciar el monitoreo, usa el método watch de chokidar y agrega los callbacks a ejecutar en cada uno de los eventos que se pueden generar (para más información lee la documentación de la librería aquí).

La siguiente función creará un monitor de eventos de archivos y carpetas de acuerdo al directorio dado como argumento:

function StartWatcher(path){
      var chokidar = require("chokidar");

      var watcher = chokidar.watch(path, {
          ignored: /[\/\\]\./,
          persistent: true
      });

      function onWatcherReady(){
          console.info('Desde aquí puedes vigilar cambios reales, el escaneo inicial ha sido finalizado.');
      }
            
      // Declare the listeners of the watcher
      watcher
      .on('add', function(path) {
            console.log('Archivo', path, 'ha sido agregado');
      })
      .on('addDir', function(path) {
            console.log('Directorio', path, 'ha sido agregado');
      })
      .on('change', function(path) {
           console.log('Archivo', path, 'ha sido cambiado');
      })
      .on('unlink', function(path) {
           console.log('Archivo', path, 'ha sido removido');
      })
      .on('unlinkDir', function(path) {
           console.log('Directorio', path, 'ha sido removido');
      })
      .on('error', function(error) {
           console.log('Ops, esto es un error', error);
      })
      .on('ready', onWatcherReady)
      .on('raw', function(event, path, details) {
           // Este evento debería ser ejecutado cada vez que algun evento es ejecutado           
           console.log('Info evento general:', event, path, details);
      });
}

Ahora necesitaremos proveer un directorio para vigilar. Para ello, crea un simple boton que iniciará el selector de carpetas del sistema y proveera un directorio (e.g c:/carpeta/ejemplo) usando el siguiente código:

var app = require('electron').remote; 
var dialog = app.dialog;

dialog.showOpenDialog({
    properties: ['openDirectory']
},function(path){
    if(path){
        // Iniciar a vigilar el directorio seleccionado
        StartWatcher(path[0]);
    }else {
        console.log("No se selecciono ninguna carpeta");
    }
});

El selector de carpetas del sistema debería iniciar y si una carpeta es seleccionado, el monitor de archivos iniciara el escaneo del directorio y de archivos dentro del directorio proporcionado. Luego iniciará a vigilar los archivos y carpetas. Las funciones básicas deberían ser ahora mostradas en la consola:

Electron file watcher

Para ver el código fuente de el ejemplo anterior, por favor explora el repositorio de ejemplos de Electron por Our Code World en Github aquí. Que te diviertas !

Esto podría ser de tu interes

Conviertete en un programador más sociable