Electron.js ipcrenderer veri gönderimi

risterr1

Merhabalar Electron.js ile bir kayıt sistemi yapıyorum. Bu kayıt sisteminde diğerki pencerede kayıtlı kişiler buluncak ancak inputtaki verileri diğerki pencereye gönderemiyorum.

ana.html script alanı

<script>

    const electron = require("electron");
    const { app ,ipcRenderer ,remote, BrowserWindow} = require('electron');

    let openNew = document.querySelector("#studentButton")
    let register = document.querySelector("#registerButton")
    const input1 = document.getElementById('tcData');

    openNew.addEventListener("click", () =>{
        ipcRenderer.send("key:yeniğWindow")
    })

    register.addEventListener("click", () =>{
        ipcRenderer.send("key:registerButton")
        tcDataDiv()
    })

    function tcDataDiv() {

    const input = document.getElementById('tcData').value;

    ipcRenderer.send('tcDataDiv', input);
    //console.log();
    }
    </script>

newWindow.html sayfası

<script>
    const { app, BrowserWindow ,ipcMain,ipcRenderer,remote,dialog} = require("electron");

    

    ipcRenderer.on('tcDataDiv', (event, message) => {
        yazıDiv.innerText = message;
        const veriDiv = document.getElementById('yazıDiv');
        //console.log(veriDiv)
    }
    );

   </script>

Bazı kaynaklarda main.js'e gönderip main.js'dende diğerki html sayfasına göndermeye çalışıyor ancak ben direkt olarak iki html arasında bağlantı kurmaya çalıştım . Kodlarda bir hata varmı?

Halil Han BADEM

risterr1 Merhaba,

IPC dışında parametre kullanarak da gerçekleştirebilirsiniz. urlParams.get('paramname') şeklinde parametreleri alabilirsiniz. ipcRenderer, ipcMain'e veri göndereceği için main kısmı ile iletişime geçecektir.

Peki parametre dışında nasıl yapabilir?
Bunun için ilk olarak nodeIntegrationözelliğini trueyapman gerekir.

<script>
  window.nodeIntegration = true;
</script>

gibi, daha sonra;

Birinci HTML;

const { ipcRenderer } = require('electron');

function sndmsg_ikincihtml() {
  const msg = 'test data';
  ipcRenderer.send('msgx', msg);
}

İkinci HTML;

const { ipcRenderer } = require('electron');

ipcRenderer.on('msgx', (event, message) => {
  console.log(msgx);
});

risterr1

Halil Han BADEM
Merhabalar bu yaptığınız kod iki html arasındaki haberleşmesimi yoksa yoksa arada main.js de varmı?

OffLaZzzZ

Kodlarınızı inceledim ve birkaç potansiyel hata fark ettim. Electron'da ana süreç (main process) ve render süreç (renderer process) arasında IPC (Inter-Process Communication) kullanmanız gerekiyor. Ana süreç ve render süreçler arasındaki iletişim için IPC anahtarları kullanılır. Burada, ipcRenderer anahtarını kullanarak ana süreçten render sürecine veri aktarımı yapmaya çalışıyorsunuz.

İlk olarak, ana.html'de ipcRenderer modülünü doğru şekilde alma işlemini yapmışsınız, ancak ipcMain modülünü almanız gereken newWindow.html sayfasında ipcRenderer kullanmışsınız. Bu nedenle, newWindow.html sayfasında ipcMain modülünü doğru şekilde almanız gerekmektedir. Aşağıda düzeltme önerilerimi bulabilirsiniz:

ana.html:

<script>
    const { ipcRenderer } = require('electron');

    let openNew = document.querySelector("#studentButton");
    let register = document.querySelector("#registerButton");
    const input1 = document.getElementById('tcData');

    openNew.addEventListener("click", () =>{
        ipcRenderer.send("key:yeniğWindow");
    });

    register.addEventListener("click", () =>{
        ipcRenderer.send("key:registerButton");
        tcDataDiv();
    });

    function tcDataDiv() {
        const input = document.getElementById('tcData').value;
        ipcRenderer.send('tcDataDiv', input);
    }
</script>

newWindow.html:

<script>
    const { ipcRenderer } = require('electron');

    ipcRenderer.on('tcDataDiv', (event, message) => {
        yazıDiv.innerText = message;
        const veriDiv = document.getElementById('yazıDiv');
    });
</script>

Bu düzeltmeler yapıldığında, ana süreçten render sürecine veri aktarımı işlemi gerçekleşmelidir. Ayrıca, ana süreçte (main.js dosyanızda) ipcMain modülünü kullanarak tcDataDiv olayını dinlemeniz ve newWindow.html sayfasına verileri ilettiğinizden emin olmanız gerekmektedir.

risterr1

OffLaZzzZ peki zahmet olmassa main.js kodunada bakabilirmiyim?

Halil Han BADEM

OffLaZzzZ Merhaba,

Cevabınız ChatGPT üzerinden mi üretildi?

OffLaZzzZ

risterr1

main.js dosyasında, ipcMain modülünü kullanarak tcDataDiv olayını dinlemeniz ve newWindow.html sayfasına verileri iletebilmeniz gerekiyor. Aşağıda, main.js dosyasının örneğini bulabilirsiniz:

const { app, BrowserWindow, ipcMain } = require('electron');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile('ana.html');

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

ipcMain.on('tcDataDiv', (event, message) => {
  mainWindow.webContents.send('tcDataDiv', message);
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

risterr1

Halil Han BADEM Evet ancak kod çalışmadı bende fikir almak istedim