Electron - przesyłanie danych pomiędzy oknami

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

Wiele się naczytałem jakoby nie można było przesyłać bezpośrednio informacji z jednego okna do drugiego bez pośredników. Cóż za pokrętna logika za tym stoi, a co jeżeli chciałbym utworzyć okno z poziomu danego widoku? Da się, czy się nie da w końcu przesyłać po ludzku informacje pomiędzy takimi oknami? Odpowiedź zdaje się oczywista więc przejdźmy do konkretów.

W pliku new-view.html należy poczynić nieco następujących zmian:

Listing 1
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>New Window World</title>
  6. <meta
  7. http-equiv="Content-Security-Policy"
  8. content="script-src 'self' 'unsafe-inline';"
  9. />
  10. <style>
  11. #messages p {
  12. border-radius: 5px;
  13. border: solid 1px black;
  14. padding: 5px;
  15. }
  16. </style>
  17. <script src="viewscripts/new-view.js"></script>
  18. </head>
  19. <body style="background: white">
  20. <h2>A brand, brand new window!</h2>
  21. <div id="messages"></div>
  22. </body>
  23. </html>

I dodać nowy plik new-view.js skryptu powiązanego z tymże widokiem okna:

Listing 2
  1. const electron = require("electron");
  2. const ipcRenderer = require("electron").ipcRenderer;
  3. ipcRenderer.on("sending-maesage", (event, arg) => {
  4. let p = document.createElement('p');
  5. p.innerText = arg;
  6. document.querySelector('#messages').appendChild(
  7. p
  8. );
  9. });

Pozostało już tylko zaktualizowanie skryptu z pliku index-view.js, gdzie dodałem przesyłanie komunikatów z okna głównego do okna dziecka:

Listing 3
  1. /**
  2. * import ipcRenderer-a umożliwiającego wysyłanie informacji
  3. */
  4. const ipcRenderer = require("electron").ipcRenderer;
  5. const electron = require("electron");
  6. let newViewWindow = undefined;
  7. window.addEventListener("load", () => {
  8. const okButton = document.querySelector("#ok");
  9. const msgInput = document.querySelector("input[type='text']");
  10. const obliczeniowoButton = document.querySelector("#show-brand-new-widnow");
  11. const newWindow = document.querySelector("#new-window");
  12. okButton.addEventListener("click", () => {
  13. const message = msgInput.value;
  14. /**
  15. * Wysyłanie informacji
  16. */
  17. ipcRenderer.send("electron-log-message", `Message: ${message}`);
  18. });
  19. msgInput.addEventListener("keydown", (event) => {
  20. if (event.code === "Enter") {
  21. const message = msgInput.value;
  22. /**
  23. * Wysyłanie informacji
  24. */
  25. ipcRenderer.send("electron-log-message", `Message: ${message}`);
  26. msgInput.value = "";
  27. /**
  28. * Gdy okno istnieje to wyślij do niego message
  29. */
  30. if (newViewWindow !== undefined) {
  31. newViewWindow.webContents.send("sending-maesage", message);
  32. }
  33. }
  34. });
  35. obliczeniowoButton.addEventListener("click", () => {
  36. /**
  37. * Otwieranie okna i załadowanie strony obliczeniowo.com.pl
  38. */
  39. window.open("https://obliczeniowo.com.pl", "_blank", "nodeIntegration=no");
  40. });
  41. newWindow.addEventListener("click", () => {
  42. const BrowserWindow = electron.remote.BrowserWindow;
  43. if (newViewWindow) {
  44. return;
  45. }
  46. /**
  47. * Tworzenie nowego okna z widoku
  48. */
  49. newViewWindow = new BrowserWindow({
  50. parent: electron.remote.getCurrentWindow(),
  51. width: 800,
  52. height: 700,
  53. modal: false,
  54. webPreferences: {
  55. nodeIntegration: true,
  56. enableRemoteModule: true,
  57. },
  58. });
  59. newViewWindow.loadFile("./new-view.html");
  60. newViewWindow.on("closed", () => {
  61. newViewWindow = undefined;
  62. });
  63. });
  64. });
Strony powiązane
strony powiązane
  1. github.com/Obliczeniowo/Electron-basic-project - gałąź repozytorium zawierająca kod umożliwiający przesyłanie informacji z okna rodzica do dziecka

Komentarze