📜  ElectronJS 中的网络日志

📅  最后修改于: 2022-05-13 01:56:45.542000             🧑  作者: Mango

ElectronJS 中的网络日志

ElectronJS是一个开源框架,用于使用能够在 Windows、macOS 和 Linux 操作系统上运行的 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台原生桌面应用程序。它将 Chromium 引擎和 NodeJS 组合成一个单一的运行时。

所有本机桌面应用程序都可以建立 Internet 连接以实现动态功能。这些连接对于获取/重定向应用程序的相关信息非常重要,例如通过 RESTful API 获取动态内容、重定向用户请求等。通过日志记录监视这些活动的网络连接并在出现任何故障时查明根本原因非常重要.为此,Electron 为我们提供了内置的netLog模块。此模块用于记录会话的活动网络连接和事件。

我们假设您熟悉上述链接中涵盖的先决条件。为了使 Electron 正常工作,需要在系统中预先安装nodenpm

netLog 模块: netLog 模块是Main Process的一部分。要在Renderer Process中导入和使用 netLog 模块,我们将使用 Electron 提供的远程模块。有关远程模块的更多详细信息,请参阅此链接。 netLog 模块的所有方法只能在 app 模块的ready事件发出后才能使用。请参阅main.js文件中突出显示的代码。

  • 项目结构:
    项目结构

示例:我们将首先按照给定的步骤构建基本的电子应用程序。

  • 第 1 步:导航到空目录以设置项目,然后运行以下命令,
    npm init

    生成package.json文件。如果没有安装Electron ,请使用 npm 安装。

    npm install electron --save-dev

    此命令还将创建package-lock.json文件并安装所需的node_modules依赖项。成功安装 Electron 后,打开package.json文件并在“scripts”键下执行必要的更改。使用 npm 安装NODE-PING

    npm install ping --save

    这个包将用于生成网络活动。有关更多详细信息,请参阅此链接。在assets文件夹中创建logs.txt文件。

    包.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"
      }
    }
    
  • 第二步:根据项目结构创建一个main.js文件。该文件是主进程并充当应用程序的入口点。复制以下链接中给出的main.js文件的样板代码。我们将修改代码以满足我们的项目需求。

    主.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.
    
  • 第 3 步:src目录中创建index.html文件。我们还将从上述链接复制index.html文件的样板代码。我们将修改代码以满足我们的项目需求。

    索引.html:

    
    
      
    
        
        Hello World!
        
        
        
    
      
    
        

    Hello World!

    We are using node     , Chrome     , and Electron     .                
  • 输出:此时,我们的基本电子应用程序已设置完毕。要启动 Electron 应用程序,请运行以下命令:
    npm start

netLog模块支持以下实例方法和实例属性。它不支持任何实例事件。所有 Instance 方法和 Instance Properties 都已在代码中进行了演示。
– 生成的日志文件采用JSON格式。对于本教程,对于每个网络活动,日志文件都将被覆盖。

  1. netLog.startLogging(path, options):解析给定路径并开始记录活动网络事件和连接到给定路径的日志文件。它返回一个Promise并在 netLog 开始记录到日志文件时得到解决。有关更多详细信息,请参阅此链接。
    • path: String指向自定义日志文件以记录网络事件日志。
    • 选项:对象(可选)选项对象由以下参数组成,
      • captureMode: String (可选)它表示需要从网络事件中捕获的数据的种类。默认情况下,它只捕获网络请求的元数据。此设置由默认值表示。将该值设置为includeSensitive将包括捕获的网络请求的 cookie 和身份验证数据(如果有)。将此值设置为所有内容也将包括在套接字上传输的所有字节。在本教程中,使用值集作为代码中的所有内容来演示日志记录。
  2. netLog.stopLogging():停止所有网络事件记录活动。如果不调用此方法,则应用退出时自动停止录制。它不接受任何参数。它返回一个带有字符串数据类型的Promise 。它解析为日志文件的文件路径。
  3. netLog.currentlyLogging:此实例属性返回一个布尔值,指示是否正在记录网络事件日志。它是只读属性。

index.html:在该文件中添加以下代码段。



     

  

index.js:在该文件中添加以下代码段。

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
   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 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);
        });
    });
});

输出:

注意: logs.txt 文件包含网络的大量信息。