Electron - przesyłanie informacji z widoku do pliku uruchomieniowego aplikacji

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 551 razy

Jeżeli zastanawiasz się jak przesłać jakąś informację czy też obiekt z pliku widoku do pliku uruchomieniowego aplikacji, którym (w moim przypadku) jest plik index.js to czym prędzej zaprzestań swoich starań! Tak się bowiem składa, że bardzo właśnie na tej podstronie postaram się przybliżyć nieco tajemnicę takowego przesyłania danych.

Electron udostępnia odpowiedni mechanizm do realizacji przesyłania danych z widoku do pliku index.js. Do tego niecnego planu wykorzystam następujący kod umieszczony w pliku index-view.js i zaimportowany do pliku index.html:

/** * import ipcRenderer-a umożliwiającego wysyłanie informacji */ const ipcRenderer = require("electron").ipcRenderer; window.addEventListener("load", () => { const okButton = document.querySelector("#ok"); const msgInput = document.querySelector("input[type='text']"); okButton.addEventListener("click", () => { const message = msgInput.value; /** * Wysyłanie informacji */ ipcRenderer.send("electron-log-message", `Message: ${message}`); }); msgInput.addEventListener("keydown", (event) => { if (event.code === "Enter") { const message = msgInput.value; /** * Wysyłanie informacji */ ipcRenderer.send("electron-log-message", `Message: ${message}`); msgInput.value = ""; } }); });

W pliku index.html wygląda to następująco:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World!</title> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> <script src="./viewscripts/index-view.js"></script> <style> .command-container { display: flex; } .command-container input { width: calc(100vw - 30px); } </style> </head> <body style="background: white"> <h1>Hello World!</h1> <p> 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> . </p> <div class="command-container"> <input type="text" /><button id="ok">Ok</button> </div> </body> </html>

Pozostało już tylko utworzyć plik messages.js z skryptem odbierającym komunikaty i wyświetlającym je w konsoli systemowej:

const { ipcMain } = require("electron"); class Messages { static initMessages(mainWindow) { /** * na zdarzenie 'electron-log-message' wyświetlić w konsoli przesyłane dane i * zwrócić wartość potwierdzającą jej odebranie */ ipcMain.on("electron-log-message", (e, message) => { console.log(message); e.returnValue = "sended"; }); } } module.exports.Messages = Messages;

Teraz już tylko pozostało w pliku index.js uruchomić metodę statyczną initMessage inicjalizującą odbieranie informacji pochodzących od widoku okna, której wywołanie powinno się znaleźć w funkcji createWindow:

function createWindow() { win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, }, }); /** * Tutaj wskazywany jest plik widoku okna */ win.loadFile("index.html"); Messages.initMessages(win); /** * Tworzenie menu */ const mainMenu = Menu.buildFromTemplate(mainMenuTemplate); /** * Dodanie menu do okna */ Menu.setApplicationMenu(mainMenu); }

Po uruchomieniu tej jakże zaawansowanej aplikacji oczom twym powinien taki oto widok:

Electron wysyłanie komunikatów z widoku do pliku uruchomieniowego aplikacji
Rys. 1
Electron wysyłanie komunikatów z widoku do pliku uruchomieniowego aplikacji

Wpisanie jakiegoś komunikatu i zatwierdzenie go powinno skutkować wyświetleniem w konsoli Visual Studio Code np takiego komunikatu:

Message: message test
Strony powiązane
strony powiązane
  1. github.com/Obliczeniowo/Electron-basic-project - gałąź repozytorium zawierająca kod umożliwiający przesyłanie danych z widoku do pliku uruchomieniowego programu
Propozycje książek