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

Stronę tą wyświetlono już: 182 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:

Listing 1
  1. /**
  2. * import ipcRenderer-a umożliwiającego wysyłanie informacji
  3. */
  4. const ipcRenderer = require("electron").ipcRenderer;
  5. window.addEventListener("load", () => {
  6. const okButton = document.querySelector("#ok");
  7. const msgInput = document.querySelector("input[type='text']");
  8. okButton.addEventListener("click", () => {
  9. const message = msgInput.value;
  10. /**
  11. * Wysyłanie informacji
  12. */
  13. ipcRenderer.send("electron-log-message", `Message: ${message}`);
  14. });
  15. msgInput.addEventListener("keydown", (event) => {
  16. if (event.code === "Enter") {
  17. const message = msgInput.value;
  18. /**
  19. * Wysyłanie informacji
  20. */
  21. ipcRenderer.send("electron-log-message", `Message: ${message}`);
  22. msgInput.value = "";
  23. }
  24. });
  25. });

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

Listing 2
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Hello World!</title>
  6. <meta
  7. http-equiv="Content-Security-Policy"
  8. content="script-src 'self' 'unsafe-inline';"
  9. />
  10. <script src="./viewscripts/index-view.js"></script>
  11. <style>
  12. .command-container {
  13. display: flex;
  14. }
  15. .command-container input {
  16. width: calc(100vw - 30px);
  17. }
  18. </style>
  19. </head>
  20. <body style="background: white">
  21. <h1>Hello World!</h1>
  22. <p>
  23. We are using node
  24. <script>
  25. document.write(process.versions.node);
  26. </script>
  27. , Chrome
  28. <script>
  29. document.write(process.versions.chrome);
  30. </script>
  31. , and Electron
  32. <script>
  33. document.write(process.versions.electron);
  34. </script>
  35. .
  36. </p>
  37. <div class="command-container">
  38. <input type="text" /><button id="ok">Ok</button>
  39. </div>
  40. </body>
  41. </html>

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

Listing 3
  1. const { ipcMain } = require("electron");
  2. class Messages {
  3. static initMessages(mainWindow) {
  4. /**
  5. * na zdarzenie 'electron-log-message' wyświetlić w konsoli przesyłane dane i
  6. * zwrócić wartość potwierdzającą jej odebranie
  7. */
  8. ipcMain.on("electron-log-message", (e, message) => {
  9. console.log(message);
  10. e.returnValue = "sended";
  11. });
  12. }
  13. }
  14. 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:

Listing 4
  1. function createWindow() {
  2. win = new BrowserWindow({
  3. width: 800,
  4. height: 600,
  5. webPreferences: {
  6. nodeIntegration: true,
  7. },
  8. });
  9. /**
  10. * Tutaj wskazywany jest plik widoku okna
  11. */
  12. win.loadFile("index.html");
  13. Messages.initMessages(win);
  14. /**
  15. * Tworzenie menu
  16. */
  17. const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
  18. /**
  19. * Dodanie menu do okna
  20. */
  21. Menu.setApplicationMenu(mainMenu);
  22. }

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

Komentarze