Communicating main process with rendering process 15

- Andrés Cruz

En español
Communicating main process with rendering process 15

From the index, we activate the integration with Node and consume them; we define an event in which, when loading the window (web page) we transmit the data via a message:

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)
    });
}

From the web page, thanks to the fact that we activated the integration with Node, we can import the ipcRenderer module, in order to communicate with the main process, specifically, we are interested in creating a listener (listener) to receive the data sent from the main process:

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>

The next thing we are going to do is initialize listings between the main process and the rendering process in Electron

Remember that the previous material is part 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.