screen1.gif

    1. {
    2.   "name": "rabid-oil-clean-6o8jz",
    3.   "productName": "rabid-oil-clean-6o8jz",
    4.   "description": "My Electron application description",
    5.   "keywords": [],
    6.   "main": "./main.js",
    7.   "version": "1.0.0",
    8.   "author": "liubo",
    9.   "scripts": {
    10.     "start": "electron ."
    11.   },
    12.   "dependencies": {},
    13.   "devDependencies": {
    14.     "electron": "20.0.1"
    15.   }
    16. }
    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    7.   <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
    8.   <title>Hello World!</title>
    9. </head>
    11. <body>
    12.   <h1>Hello World!</h1>
    13.   We are using Node.js <span id="node-version"></span>,
    14.   Chromium <span id="chrome-version"></span>,
    15.   and Electron <span id="electron-version"></span>.
    16.   <br />
    17.   <button id="newWIn">新建窗口</button>
    18.   <br />
    19.   <button id="upload1">下载1</button>
    20.   <button id="upload2">下载2</button>
    21.   <br />
    22.   <button id="cancel1">取消1</button>
    23.   <button id="cancel2">取消2</button>
    25.   <br />
    27.   <div>
    28.     <div>下载任务</div>
    29.     <div id="downloads">
    30.     </div>
    31.   </div>
    34.   <h1 id="h1"></h1>
    36.   <!-- You can also require other files to run in this process -->
    37.   <script src="./child.js"></script>
    38.   <style>
    39.     * {
    40.       padding: 0;
    41.       margin: 0;
    42.       word-break: break-all;
    43.     }
    44.   </style>
    45. </body>
    47. </html>
    1. // This file is required by the index.html file and will
    2. // be executed in the renderer process for that window.
    3. // No Node.js APIs are available in this process because
    4. // `nodeIntegration` is turned off. Use `preload.js` to
    5. // selectively enable features needed in the rendering
    6. // process.
    8. // All of the Node.js APIs are available in the preload process.
    9. // It has the same sandbox as a Chrome extension.
    10. const { ipcRenderer, contextBridge } = require("electron");
    12. window.addEventListener("DOMContentLoaded", () => {
    13.   const replaceText = (selector, text) => {
    14.     const element = document.getElementById(selector);
    15.     if (element) element.innerText = text;
    16.   };
    18.   for (const type of ["chrome", "node", "electron"]) {
    19.     replaceText(`${type}-version`, process.versions[type]);
    20.   }
    21. });
    23. window.app = {
    24.   ipcReceive: (channel, callback) => {
    25.     ipcRenderer.on(channel, (eventt, ...rest) => {
    26.       callback(...rest);
    27.     });
    28.   },
    29.   ipcSend: (channel, ...msg) => {
    30.     ipcRenderer.send(channel, ...msg);
    31.   },
    32.   ipcInvoke: (channel, ...msg) => {
    33.     return ipcRenderer.invoke(channel, ...msg);
    34.   },
    35. }
    37. let newWIn = document.querySelector("#newWIn");
    38. let cancel1 = document.querySelector("#cancel1");
    39. let cancel2 = document.querySelector("#cancel2");
    41. let upload1 = document.querySelector("#upload1");
    42. let upload2 = document.querySelector("#upload2");
    44. let h1 = document.querySelector("#h1");
    45. let downloads = document.querySelector("#downloads");
    47. (async function () {
    48.   let res = await window.app.ipcInvoke("getCount");
    49.   console.log(res, "-------------");
    50.   h1.innerHTML = res;
    51. })();
    53. newWIn.addEventListener("click", () => {
    54.   window.app.ipcInvoke("createWindow");
    55. });
    57. cancel1.addEventListener("click", () => {
    58.   window.app.ipcInvoke("cancel", { id: 1 });
    59. });
    61. cancel2.addEventListener("click", () => {
    62.   window.app.ipcInvoke("cancel", { id: 2 });
    63. });
    65. upload1.addEventListener("click", () => {
    66.   window.app.ipcInvoke("upload", {
    67.     id: 1,
    68.     url: "https://download.jetbrains.com.cn/python/pycharm-professional-2022.2.1.exe",
    69.   });
    70. });
    72. upload2.addEventListener("click", () => {
    73.   window.app.ipcInvoke("upload", {
    74.     id: 2,
    75.     url: "https://download.jetbrains.com.cn/python/pycharm-professional-2022.2.1.exe",
    76.   });
    77. });
    79. window.app.ipcReceive("data-update", (data) => {
    80.   console.log(data, "-------------");
    81.   h1.innerHTML = data;
    82. });
    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <meta charset="UTF-8">
    5.     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    6.     <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
    7.     <title>Hello World!</title>
    8.   </head>
    9.   <body>
    10.     <h1>Hello World!</h1>
    11.     We are using Node.js <span id="node-version"></span>,
    12.     Chromium <span id="chrome-version"></span>,
    13.     and Electron <span id="electron-version"></span>.
    14.     <button id="newWIn">新建窗口</button>
    15.     <br />
    16.     <button id="upload1">下载1</button>
    17.     <button id="upload2">下载2</button>
    18.     <br />
    19.     <button id="cancel1">取消1</button>
    20.     <button id="cancel2">取消2</button>
    22.     <br />
    24.     <div>
    25.       <div>下载任务</div>
    26.       <div id="downloads">
    27.       </div>
    28.     </div>
    31.     <h1 id="h1"></h1>
    33.     <!-- You can also require other files to run in this process -->
    34.     <script src="./renderer.js"></script>
    35.     <style>
    36.       * {
    37.         padding: 0;
    38.         margin: 0;
    39.         word-break: break-all;
    40.       }
    41.     </style>
    42.   </body>
    43. </html>
    1. // Modules to control application life and create native browser window
    2. const { app, BrowserWindow, ipcMain } = require('electron')
    3. const path = require('path')
    4. const http = require('http')
    5. const https = require('https')
    7. ipcMain.handle('createWindow', () => {
    8.   createWindow()
    9. })
    11. let manage = []
    12. let count = 0
    13. ipcMain.handle('upload', (event, { id, url }) => {
    14.   console.log(id, url)
    15.   download(id, url)
    16. })
    19. function filter(manage) {
    20.   let res = []
    21.   for (let cur of manage) {
    22.     let could = {}
    23.     for (let n of Object.keys(cur)) {
    24.       if (n === 'client') {
    25.         could[n] = null
    26.       } else {
    27.         could[n] = cur[n]
    28.       }
    29.     }
    30.     res.push(could)
    31.   }
    32.   return res
    33. }
    36. function download(id, url) {
    37.   let run = manage.find(n => n.id === id)
    38.   if (run && run.status === 'runing') return
    39.   let cur = run ? run : {
    40.     id,
    41.     url,
    42.     persent: 0,
    43.     // controller,
    44.     client: null,
    45.     status: 'runing'
    46.   }
    47.   if (!run) {
    48.     manage.push(cur)
    49.   } else {
    50.     run.persent = 0
    51.     run.status = 'runing'
    52.   }
    53.   debugger;
    54.   const options = {
    55.     method: "GET",
    56.     responseType: "blob",
    57.     // signal,
    58.     headers: {
    59.       // "Content-Type": "application/json"
    60.     },
    61.   };
    62.   console.log(url, options);
    63.   if (url.startsWith("https://")) {
    64.     const clientRequest = https.request(url, options, (incomingMessage) => {
    65.       debugger;
    66.       console.log(`状态码: ${incomingMessage.statusCode}`);
    67.       let contentLength = incomingMessage.headers["content-length"];
    69.       let load = 0;
    70.       incomingMessage.on("data", (d) => {
    71.         // console.log(incomingMessage)
    72.         debugger;
    73.         load += d.length;
    74.         // process.stdout.write(d);
    75.         let persent = Math.floor((load / contentLength) * 10000) / 100;
    76.         console.log(d.length, load, contentLength, `${persent}%`);
    77.         cur.persent = persent
    78.         let res = filter(manage)
    79.         notify(JSON.stringify(res))
    80.       });
    81.       incomingMessage.on("end", () => {
    82.         console.log("end");
    83.       });
    84.     });
    86.     cur.client = clientRequest
    88.     clientRequest.end();
    90.     clientRequest.on("error", (error) => {
    91.       console.error(error);
    92.     });
    93.     clientRequest.on("close", (val) => {
    94.       console.log("close");
    95.     });
    96.   } else {
    97.     const clientRequest = http.request(url, options, (incomingMessage) => {
    98.       debugger;
    99.       console.log(`状态码: ${incomingMessage.statusCode}`);
    100.       let contentLength = incomingMessage.headers["content-length"];
    102.       let load = 0;
    103.       incomingMessage.on("data", (d) => {
    104.         // console.log(incomingMessage)
    105.         debugger;
    106.         load += d.length;
    107.         // process.stdout.write(d);
    108.         let persent = Math.floor((load / contentLength) * 10000) / 100;
    109.         console.log(d.length, load, contentLength, `${persent}%`);
    110.         cur.persent = persent
    111.         let res = filter(manage)
    112.         notify(JSON.stringify(res))
    113.       });
    114.       incomingMessage.on("end", () => {
    115.         console.log("end");
    116.       });
    117.     });
    119.     cur.client = clientRequest
    121.     clientRequest.end();
    123.     clientRequest.on("error", (error) => {
    124.       console.error(error);
    125.     });
    126.     clientRequest.on("close", (val) => {
    127.       console.log("close");
    128.     });
    129.   }
    130. }
    133. /* 通知给窗口 */
    134. function notify(message) {
    135.   let wins = BrowserWindow.getAllWindows()
    137.   for (let win of wins) {
    138.     // console.log(win)
    139.     win.webContents.send('data-update', message)
    140.   }
    141. }
    143. ipcMain.handle('cancel', (event, { id }) => {
    144.   console.log(id)
    145.   let cur = manage.find(n => n.id === id)
    146.   // cur.controller.abort();
    147.   cur.status = 'cancel'
    148.   cur.client.destroy()
    149.   let res = filter(manage)
    150.   notify(JSON.stringify(res))
    151. })
    153. ipcMain.handle('getCount', () => {
    154.   return count
    155. })
    157. function createWindow() {
    158.   // Create the browser window.
    159.   const mainWindow = new BrowserWindow({
    160.     width: 800,
    161.     height: 600,
    162.     webPreferences: {
    163.       preload: path.join(__dirname, 'preload.js')
    164.     }
    165.   })
    167.   // and load the index.html of the app.
    168.   mainWindow.loadFile('index.html')
    170.   // Open the DevTools.
    171.   // mainWindow.webContents.openDevTools()
    172. }
    174. // This method will be called when Electron has finished
    175. // initialization and is ready to create browser windows.
    176. // Some APIs can only be used after this event occurs.
    177. app.whenReady().then(() => {
    178.   createWindow()
    180.   app.on('activate', function () {
    181.     // On macOS it's common to re-create a window in the app when the
    182.     // dock icon is clicked and there are no other windows open.
    183.     if (BrowserWindow.getAllWindows().length === 0) createWindow()
    184.   })
    185. })
    187. // Quit when all windows are closed, except on macOS. There, it's common
    188. // for applications and their menu bar to stay active until the user quits
    189. // explicitly with Cmd + Q.
    190. app.on('window-all-closed', function () {
    191.   if (process.platform !== 'darwin') app.quit()
    192. })
    194. // In this file you can include the rest of your app's specific main process
    195. // code. You can also put them in separate files and require them here.
    1. // All of the Node.js APIs are available in the preload process.
    2. // It has the same sandbox as a Chrome extension.
    3. const { ipcRenderer, contextBridge } = require("electron");
    5. window.addEventListener('DOMContentLoaded', () => {
    6.   const replaceText = (selector, text) => {
    7.     const element = document.getElementById(selector)
    8.     if (element) element.innerText = text
    9.   }
    11.   for (const type of ['chrome', 'node', 'electron']) {
    12.     replaceText(`${type}-version`, process.versions[type])
    13.   }
    14. })
    17. contextBridge.exposeInMainWorld('app', {
    18.   ipcReceive: (channel, callback) => {
    19.     ipcRenderer.on(channel, (eventt, ...rest) => {
    20.       callback(...rest)
    21.     })
    22.   },
    23.   ipcSend: (channel, ...msg) => {
    24.     ipcRenderer.send(channel, ...msg)
    25.   },
    26.   ipcInvoke: (channel, ...msg) => {
    27.     return ipcRenderer.invoke(channel, ...msg)
    28.   },
    29. })
    1. // This file is required by the index.html file and will
    2. // be executed in the renderer process for that window.
    3. // No Node.js APIs are available in this process because
    4. // `nodeIntegration` is turned off. Use `preload.js` to
    5. // selectively enable features needed in the rendering
    6. // process.
    8. let newWIn = document.querySelector('#newWIn')
    9. let cancel1 = document.querySelector('#cancel1')
    10. let cancel2 = document.querySelector('#cancel2')
    12. let upload1 = document.querySelector('#upload1')
    13. let upload2 = document.querySelector('#upload2')
    15. let h1 = document.querySelector('#h1')
    16. let downloads = document.querySelector("#downloads")
    18.     ; (async function () {
    19.         let res = await window.app.ipcInvoke('getCount')
    20.         console.log(res, '-------------')
    21.         h1.innerHTML = res
    22.     })()
    24. newWIn.addEventListener('click', () => {
    25.     window.app.ipcInvoke('createWindow')
    26. })
    28. cancel1.addEventListener('click', () => {
    29.     window.app.ipcInvoke('cancel', { id: 1 })
    30. })
    32. cancel2.addEventListener('click', () => {
    33.     window.app.ipcInvoke('cancel', { id: 2 })
    34. })
    36. upload1.addEventListener('click', () => {
    37.     window.app.ipcInvoke('upload', { id: 1, url: 'https://download.jetbrains.com.cn/python/pycharm-professional-2022.2.1.exe' })
    38. })
    40. upload2.addEventListener('click', () => {
    41.     window.app.ipcInvoke('upload', { id: 2, url: 'https://download.jetbrains.com.cn/python/pycharm-professional-2022.2.1.exe' })
    42. })
    44. window.app.ipcReceive('data-update', (data) => {
    45.     console.log(data, '-------------')
    46.     h1.innerHTML = data
    47. })