CODEWITHSUNDEEP
javascripthtmlelectron
MigueldeHaroce
MigueldeHaroce

Reputation: 59

IpcMain communication issue

I'm trying to change the src="" of a webview. My program are two html pages, in the page1 I have an Input that when you press enter or a button, go to next page (page2). So in Page2 I put a webview to make appear the result of the search of the text put in the input. To do that I used ipcRender and ipcMain, but the communication its not working. I have the 2 html files and 4 js files:

In the htmls I have the input and a button, and in the other html the webview To send the text of the input I have the input.js:

const searchBtn = document.getElementById('searchBtn');
const textInput = document.getElementById('text-input');

textInput.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
    search();
}
});

searchBtn.addEventListener('click', () => {
    search();
});

function search() {
    const query = textInput.value;
    ipcRenderer.send('search', query); // Send to index.js the query, I checked it with a console.log and its working, so I think here its not the problem
};

Oh, I had a trouble with = require('electron'); so I coded preload.js

contextBridge.exposeInMainWorld("app", API);


contextBridge.exposeInMainWorld('ipcRenderer', {
    send: (channel, data) => ipcRenderer.send(channel, data),
    on: (channel, func) => ipcRenderer.on(channel, (event, ...args) => func(...args)),
});

Then index.js it's who recive the signal of input.js

ipcMain.on('search', (event, query) => {
  const url = `https://www.google.com/search?q=${encodeURIComponent(query)}`; // With console.log I checked that the query it's being send
  
  BrowserWindow.getFocusedWindow().loadURL('file://' + __dirname + '/searchPage.html');
  
  event.sender.send('search-results', url); // Problem!!
});

The event.sender.send('search-results', url); I noticed that it's not sending the URL to search.js, that it's the code that should put the src:

const searchResults = document.querySelector('#searchResults'); // I checked with console.log and the webview it's being detected (<webview id="searchResults" style="position: absolute; width: 100%; height: 100%;"></webview>)

ipcRenderer.on('search-results', (event, results) => { // Here it's the problem
  if (searchResults && results) {
    searchResults.src = results;
  } else {
    console.error('Error: searchResults or results is undefined.');
  R
});

The promblem it's that the ipcMain it's not sending the signal to the ipcRenderer of search.js. I checked in search.js with a console.log the results variable but says undefined. I the dev console of electron didn't appear any error so I'm very confused. Also I tried with webcontent but isn't working.

Edit:

I'm using the lastest version of electron in windows 11.

I attach the 2 htmls I’m using:

searchMenu.html

searchPage.html:

For searchMenu I use listeners like:

input.js

const searchBtn = document.getElementById('searchBtn');
const textInput = document.getElementById('text-input');

textInput.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
    search();
}
});

searchBtn.addEventListener('click', () => {
    search();
});

function search() {
    const query = textInput.value;
    ipcRenderer.send('search', query);
};

Also I put here the my webpreferences:

    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      webviewTag: true,
      preload: path.join(__dirname, 'preload.js'),
      contentSecurityPolicy: "default-src 'self'",
    },

I did an analysis of my code and here it is: search.js main.js preload.js general comunication

In the last image, red refers to problems and the numbers are the order of actions. I figured that the event.sender.send doesn't work.

Upvotes: 2

Views: 114

Answers (1)

savageGoat
savageGoat

Reputation: 1546

EDIT: The problem lays in the amount of arguments sent to the callback

event.sender.send('search-results', resultsStack[ searchID ]);
//                 signalName       arg1

ipcRenderer.on('search-results', (event, results) => {})
//              signalName        arg1   arg2

There's 2 arguments expected when only 1 is sent, so it should be

ipcRenderer.on('search-results', (results) => {})
//             signalName         arg1


I'll leave the results stack anyways since it could be useful

This is most probably due to the signal being sent to the page before the page loads, in other words, DOM is not ready when the signal is sent. I'd suggest to do an ID search based system where search.js pulls either the resusts of the ID of the request (passed via URL), or, if the application is a single paged system, pull the last results. Something like this:

// main.js
const resultsStack = { /* ID: results */ };

ipcMain.on('search', (event, query) => {
  const url = `https://www.google.com/search?q=${encodeURIComponent(query)}`;

  const searchID = "ID-" + new Date().getTime();
  resultsStack[searchID] = url;
  BrowserWindow.getFocusedWindow().loadURL('file://' + __dirname + '/searchPage.html?searchID='+ searchID);
});

ipcMain.on('pull-search', (event, searchID) => {
  if (resultsStack[ searchID ]) {
    event.sender.send('search-results', resultsStack[ searchID ]);
    delete resultsStack[ searchID ];
  } else {
    event.sender.send('search-results', { error: "Unknown ID" });
  }
});

Please notice that loadURL sends the ID on the URL here

And in your searchPage.html:

window.addEventListener("DOMContentLoaded", () => {
  // Get searchID from URL
  const searchID = new URLSearchParams(window.location.search).get("searchID");
  if (!searchID) return;

  const searchResults = document.querySelector('#searchResults');

  // Pull your search
  ipcRenderer.send('pull-search', searchID);
  // Wait for a response
  ipcRenderer.on('search-results', (results) => { // no event here, only results
    if (searchResults && results) {
      searchResults.src = results;
    } else {
      console.error('Error: searchResults or results is undefined.');
    }
  });
});

Upvotes: 1

Related Questions