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
In english
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter