Comunicar proceso principal con el proceso de renderizado 15

- Andrés Cruz

In english
Comunicar proceso principal con el proceso de renderizado 15

Desde el index, activamos la integración con Node y los consumimos; definimos un evento en el cual, al cargar la ventana (página web) transmitimos los datos vía un mensaje:

index.js

const { chats, contacts } = require('./data')
***
function createWindow(){
    let win = new BrowserWindow({
        width: 1300,
        height:900,
        webPreferences:{
            nodeIntegration: true,
            contextIsolation: false 
        }
    })
    win.loadFile("index.html")
    win.webContents.openDevTools()
    win.webContents.on('did-finish-load', () => {
        win.webContents.send('fs-chats',chats)
        win.webContents.send('fs-contacts',contacts)
    });
}

Desde la página web, gracias a que activamos la integración con Node, podemos importar el módulo de ipcRenderer, para poder comunicarnos con el proceso principal, específicamente, nos interesa crear un escuchador (listener) para recibir los datos enviados desde el proceso principal:

index.html

<script>
     const { ipcRenderer } = require('electron')
        function createContacts(contacts) {
            var lis = ''
            contacts.forEach((c) => {
                lis += `<li class="p-2 card mt-2">
                    <div class="card-body">
                        <div class="d-flex">
                            <div>
                                <img class="rounded-pill me-3" width="60"
                                    src="${c.image}">
                            </div>
                            <div>
                                <p class="fw-bold mb-0 text-light">${c.name}</p>
                                <p class="small text-muted">${c.last_chat[0]['message']}</p>
                            </div>
                            <div>
                                <p class="small text-muted">${c.last_chat[0]['date']}</p>
                                <span class="badge bg-danger rounded-pill float-end">1</span>
                            </div>
                        </div>
                    </div>
                </li>`
            })
            document.querySelector('.contact').innerHTML = lis;
        }
     function createChats(chats) {
            var lis = ''
            chats.forEach((c) => {
                lis += `  <div class="d-flex chat">
                <div class="w-75 ">
                    <div class="card bg-dark">
                        <div class="card-body text-light">
                            ${c.chat.message}
                        </div>
                    </div>
                    <p class="small text-muted float-end">${c.chat.date}</p>
                </div>
                <div class="w-25 d-flex align-items-end">
                    <img class="rounded-pill ms-3 avatar" src="${c.user.image}"/>
                </div>
            </div>`
            })
            document.querySelector('.chats').innerHTML = lis;
        }
        ipcRenderer.on('fs-chats',(event, chats)=>{
            createChats(chats)
        })
        ipcRenderer.on('fs-contacts',(event, contacts)=>{
            createContacts(contacts)
        })
</script>

Lo siguiente que vamos a realizar es inicializar listados entre el proceso principal y el proceso de renderizado en Electron

Recuerda que el material anterior forma parte sobre mi curso completo sobre Electron.js

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.