Inicializar listados entre el proceso principal y el proceso de renderizado en Electron JS 16
Antes vimos como comunicar el proceso de rencerizado con el proceso principal
Para pasar los datos definidos en el proceso principal, vamos a utilizar la siguiente estructura; los datos, van a estar disponibles desde el proceso principal, para simular una estructura externa como una base de datos, vamos a crear un archivo aparte al index.js que es el que se encargará de suministrar los datos, crearemos un par de módulos con los datos para que sean fácilmente consumibles:
data.js
const contacts = [
{
'name': 'Alex Alexis',
'image': 'https://randomuser.me/api/portraits/women/56.jpg',
'last_chat': [
{
'date': '9:15 AM',
'message': 'Lorem ipsum dolor sit amet',
}
]
},
{
'name': 'Eli Barrett',
'image': 'https://randomuser.me/api/portraits/women/96.jpg',
'last_chat': [
{
'date': '8:30 PM',
'message': 'Lorem ipsum dolor sit amet',
}
]
},
{
'name': 'Kylie Young',
'image': 'https://randomuser.me/api/portraits/women/45.jpg',
'last_chat': [
{
'date': '8:30 PM',
'message': 'Lorem ipsum dolor sit amet',
}
]
},
{
'name': 'Kylie Young',
'image': 'https://randomuser.me/api/portraits/women/45.jpg',
'last_chat': [
{
'date': '8:30 PM',
'message': 'Lorem ipsum dolor sit amet',
}
]
}
]
const chats = [
{
'user': {
'name': 'Alex Alexis',
'image': 'https://randomuser.me/api/portraits/women/56.jpg',
},
'chat':
{
'date': '9:15 AM',
'message': 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus reprehenderit voluptatibus cumque, deserunt deleniti consequatur adipisci nisi consequuntur sunt itaque? Sunt aspernatur, ratione labore ipsam enim unde itaque dolorum magni?',
}
},
{
'user': {
'name': 'Eli Barrett',
'image': 'https://randomuser.me/api/portraits/women/58.jpg',
},
'chat':
{
'date': '9:50 AM',
'message': 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus reprehenderit voluptatibus cumque, deserunt deleniti consequatur adipisci nisi consequuntur sunt itaque? Sunt aspernatur, ratione labore ipsam enim unde itaque dolorum magni?',
}
},
]
module.exports.contacts = contacts;
module.exports.chats = chats;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) mediante el evento de did-finish-load, 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('pr-chats',chats)
win.webContents.send('pr-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('pr-chats',(event, chats)=>{
createChats(chats)
})
ipcRenderer.on('pr-contacts',(event, contacts)=>{
createContacts(contacts)
})
</script>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