Registro de red en ElectronJS

ElectronJS es un marco de código abierto que se utiliza para crear aplicaciones de escritorio nativas multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript que pueden ejecutarse en los sistemas operativos Windows, macOS y Linux. Combina el motor Chromium y NodeJS en un solo tiempo de ejecución.

Todas las aplicaciones de escritorio nativas pueden establecer conexiones a Internet para un funcionamiento dinámico. Estas conexiones son importantes para obtener/redireccionar información relevante para la aplicación, como obtener contenido dinámico a través de API RESTful, redireccionar requests de usuarios, etc. Es muy importante monitorear estas conexiones de red activas a través del registro y, en caso de falla, identificar la causa principal. . Electron nos proporciona el módulo netLog incorporado para este mismo propósito. Este módulo se utiliza para registrar conexiones de red activas y eventos para una sesión.

Suponemos que está familiarizado con los requisitos previos que se describen en el enlace mencionado anteriormente. Para que Electron funcione, node y npm deben estar preinstalados en el sistema.

Módulo netLog: El Módulo netLog es parte del Proceso Principal . Para importar y usar el módulo netLog en el proceso de procesamiento , usaremos el módulo remoto proporcionado por Electron. Para obtener más detalles sobre el módulo remoto, consulte este enlace . Todos los métodos del módulo netLog solo se pueden usar después de que se emita el evento listo del módulo de la aplicación. Consulte el código resaltado en el archivo main.js.

• Estructura del proyecto:
  

Ejemplo: Comenzaremos construyendo la aplicación electrónica básica siguiendo los pasos dados.

• Paso 1: navegue a un directorio vacío para configurar el proyecto y ejecute el siguiente comando,

  npm init

  Para generar el archivo package.json . Instale Electron usando npm si no está instalado.

  npm install electron --save-dev

  Este comando también creará el archivo package-lock.json e instalará las dependencias requeridas de node_modules . Una vez que Electron se haya instalado correctamente, abra el archivo package.json y realice los cambios necesarios con la tecla «scripts» . Instale NODE-PING usando npm.

  npm install ping --save

  Este paquete se utilizará para generar actividad en la red. Para obtener información más detallada, consulte este enlace . Cree el archivo logs.txt en la carpeta de activos .

  paquete.json:

  {
    "name": "electron-netlogging",
    "version": "1.0.0",
    "description": "Network Logging in Electron",
    "main": "main.js",
    "scripts": {
      "start": "electron"
    },
    "keywords": [
      "electron"
    ],
    "author": "Radhesh Khanna",
    "license": "ISC",
    "dependencies": {
      "electron": "^8.2.5"
    }
  }
  

• Paso 2: Cree un archivo main.js de acuerdo con la estructura del proyecto. Este archivo es el Proceso Principal y actúa como un punto de entrada a la aplicación. Copie el código Boilerplate para el archivo main.js como se indica en el siguiente enlace . Modificaremos el código para adaptarlo a las necesidades de nuestro proyecto.

  principal.js:

  const { app, BrowserWindow } = require('electron')    function createWindow() {   // Create the browser window.   const win = new BrowserWindow({     width: 800,     height: 600,     webPreferences: {       nodeIntegration: true     }   })      // Load the index.html of the app.   win.loadFile('src/index.html')      // Open the DevTools.   win.webContents.openDevTools() }    // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.whenReady().then(createWindow)    // Quit when all windows are closed. app.on('window-all-closed',() => {   // On macOS it is common for applications and their menu bar   // To stay active until the user quits explicitly with Cmd + Q   if (process.platform !== 'darwin') {     app.quit()   } })    app.on('activate',() => {   // On macOS it's common to re-create a window in the    // app when the dock icon is clicked and there are no    // other windows open.   if (BrowserWindow.getAllWindows().length === 0) {     createWindow()   } })    // In this file, you can include the rest of your  // app's specific main process code. You can also  // put them in separate files and require them here.

• Paso 3: Cree el archivo index.html dentro del directorio src . También copiaremos el código repetitivo para el archivo index.html del enlace mencionado anteriormente. Modificaremos el código para adaptarlo a las necesidades de nuestro proyecto.

  índice.html:

  <!DOCTYPE html> <html>    <head>     <meta charset="UTF-8">     <title>Hello World!</title>          <!-- https://electronjs.org/docs/tutorial                            /security#csp-meta-tag -->     <meta http-equiv="Content-Security-Policy"           content="script-src 'self' 'unsafe-inline';" /> </head>    <body>     <h1>Hello World!</h1> We are using node     <script>         document.write(process.versions.node)     </script>, Chrome     <script>         document.write(process.versions.chrome)     </script>, and Electron     <script>         document.write(process.versions.electron)     </script>.        <!-- Adding Individual Renderer Process JS File -->     <script src="index.js"></script> </body>    </html>

• Salida: en este punto, nuestra aplicación electrónica básica está configurada. Para iniciar la aplicación Electron, ejecute el comando:

  npm start

  

El módulo netLog admite los siguientes métodos de instancia y propiedades de instancia. No admite ningún evento de Instancia. Todos los métodos de instancia y las propiedades de instancia se han demostrado en el código.
Nota : el archivo de registro generado está en formato JSON . Para este tutorial, para cada actividad de red, se sobrescribirá el archivo de registro.

1. netLog.startLogging(ruta, opciones): para resolver la ruta dada y comenzar a registrar los eventos de red activos y las conexiones en el archivo de registro en la ruta dada. Devuelve una Promesa y se resuelve cuando netLog ha comenzado a grabar en el archivo de registro. Para obtener información más detallada, consulte este enlace .
   • ruta: String Apunta al archivo de registro personalizado para registrar los registros de eventos de red.
   • opciones: Objeto (Opcional) Las opciones Objeto consta de los siguientes parámetros,
     • captureMode: String (Opcional) Representa el Tipo de datos que se deben capturar de los eventos de la Red. Por defecto, solo captura los metadatos de las requests de red. Esta configuración está representada por el valor predeterminado . Establecer el valor como includeSensitive incluirá cookies y datos de autenticación, si los hay, para las requests de red capturadas. Establecer este valor como todo incluirá también todos los bytes transferidos en los sockets. En este tutorial, se demuestra el registro con el valor establecido como todo en el código.
2. netLog.stopLogging(): detiene toda la actividad de grabación de eventos de red. Si no se llama a este método, la grabación se detiene automáticamente cuando se cierra la aplicación. No toma ningún parámetro. Devuelve un Promisecon tipo de datos String . Se resuelve en la ruta del archivo del archivo de registros.
3. netLog.currentlyLogging: esta propiedad de instancia devuelve un valor booleano que indica si los registros de eventos de la red se están registrando o no. Es una propiedad de solo lectura .

index.html: agregue el siguiente fragmento en ese archivo.

<br><br>
  <button id="external">
   Open GeeksForGeeks.org
  </button>
  
<br><br>
  <button id="check">
   Ping Google.com
  </button>

index.js: agregue el siguiente fragmento en ese archivo.

const electron = require('electron');
const path = require('path');
  
// Importing NODE-PING package
const ping = require('ping');
  
// Importing netLog module from Main Process 
// into Renderer Process using remote module
const netLog = electron.remote.netLog;
const shell = electron.shell;
  
var external = document.getElementById('external');
var loggingPath = path.join(__dirname, '../assets/logs.txt');
  
// Options for the netLog.startLogging() method
var options = {
    captureMode: 'everything',
}
  
external.addEventListener('click', (event) => {
   // Instance Method - Returns a Promise<void>
   netLog.startLogging(loggingPath, options).then(() => {
        console.log('Starting Network Recording')
    });
      
    // Open External link in default desktop browser
    shell.openExternal('https://www.geeksforgeeks.org/');
  
    // Instance Property. Returns Boolean
    console.log('Currently Logging - ', netLog.currentlyLogging);
  
    // Returns Promise<String> to the log file path.
    netLog.stopLogging().then((path) => {   
        console.log('Network Logs written to Path - ', path);
    });
});
  
var check = document.getElementById('check');
  
check.addEventListener('click', (event) => {
    netLog.startLogging(loggingPath, options);
      
    // Refer: https://www.npmjs.com/package/ping#promise-wrapper
    ping.promise.probe('www.google.com')
    .then(function (res) {
        console.log(res);
  
        console.log('Currently Logging - ', netLog.currentlyLogging);
  
        netLog.stopLogging().then((path) => {
            console.log('Network Logs written to Path - ', path);
        });
    });
});

Producción:

Nota: El archivo logs.txt consta de una amplia gama de información para la red.