隨著第一章中構(gòu)建的應(yīng)用程序，我們將開始將其與Electron框架中的模塊集成，并以此為基礎(chǔ)，以更實(shí)用的方式了解它們。

過(guò)程之間的通信

根據(jù)第二章中的解釋，我們將發(fā)送每個(gè)進(jìn)程之間的消息；具體來(lái)說(shuō)聯(lián)系人和聊天；這些數(shù)據(jù)將在主過(guò)程中定義，因?yàn)檫@是負(fù)責(zé)處理這些數(shù)據(jù)的過(guò)程我們之前已經(jīng)將其與中使用的客戶端-服務(wù)器體系結(jié)構(gòu)進(jìn)行了比較web編程，主要過(guò)程已經(jīng)是服務(wù)器和網(wǎng)頁(yè)一直是客戶端，它是從我們可以管理所有這些數(shù)據(jù)，正如我們將在整本書中看到的那樣第一次聯(lián)系，我們將了解如何從主進(jìn)程處理到網(wǎng)頁(yè)。

上傳聯(lián)系人和聊天

為了傳遞主流程中定義的數(shù)據(jù)，我們將使用以下結(jié)構(gòu)；數(shù)據(jù)將從主進(jìn)程中獲得，為了模擬數(shù)據(jù)庫(kù)等外部結(jié)構(gòu)，我們將創(chuàng)建一個(gè)單獨(dú)的文件到index.js，該文件將負(fù)責(zé)提供數(shù)據(jù)，我們將使用數(shù)據(jù)創(chuàng)建幾個(gè)模塊，使其易于使用：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;

從“index.js”，我們激活與Node的集成并消費(fèi)它們；我們定義了一個(gè)事件，在該事件中，當(dāng)通過(guò)“did-finish-load”事件加載窗口（網(wǎng)頁(yè)）時(shí)，我們通過(guò)消息傳輸數(shù)據(jù)：

const { app, BrowserWindow, Menu, shell } = require("electron");
const { chats, contacts } = require("./data");function createWindow() {let win = new BrowserWindow({width: 800,height: 600,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);});
}
app.whenReady().then(createWindow);

從網(wǎng)頁(yè)上，由于我們激活了與Node的集成，我們可以導(dǎo)入ipcRenderer模塊，以便能夠與主進(jìn)程通信，特別是，我們有興趣創(chuàng)建一個(gè)偵聽器來(lái)接收主進(jìn)程發(fā)送的數(shù)據(jù)：
index.html

<script>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;}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;}const { ipcRenderer } = require('electron')ipcRenderer.on('pr-chats', (event, chats) => {createChats(chats)})ipcRenderer.on('pr-contacts', (event, contacts) => {createContacts(contacts)})
</script>

根據(jù)具體情況，我們稍微更改函數(shù)的簽名，在該簽名中，我們接收?qǐng)D表或聯(lián)系人作為參數(shù)。我們調(diào)用這些函數(shù)來(lái)從先前定義的偵聽器構(gòu)建列表；最后，我們將得到相同的結(jié)果，但現(xiàn)在數(shù)據(jù)從主進(jìn)程進(jìn)入渲染進(jìn)程。

按選擇加載聯(lián)系人

在本節(jié)中，我們將實(shí)現(xiàn)以下功能：通過(guò)單擊其中一個(gè)聯(lián)系人，加載與所述聯(lián)系人對(duì)應(yīng)的聊天或消息；為了模擬這種行為，我們將使用聯(lián)系人數(shù)組索引，就好像它是我們有興趣獲得聊天記錄的聯(lián)系人的ID一樣；為此，我們實(shí)現(xiàn)了一個(gè)點(diǎn)擊事件：

以及函數(shù)，我們調(diào)用主進(jìn)程來(lái)提供基于ID的聊天：

 function changeContact(index) {ipcRenderer.send('pp-get-chat', index)}

在數(shù)據(jù)拉取中，我們將稍微改變結(jié)構(gòu)，我們將有一個(gè)數(shù)組，其中數(shù)組的每個(gè)位置都將由上一條消息中提供的聯(lián)系人索引訪問(wèn)：

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 consectetur adipisicing elit",},],},{name: "Ramon Reed",image: "https://randomuser.me/api/portraits/women/59.jpg",last_chat: [{date: "9:15 AM",message: "Lorem Hello!",},],},{name: "Eli Barrett",image: "https://randomuser.me/api/portraits/women/58.jpg",last_chat: [{date: "8:55 PM",message: "Lorem ipsum dolor sit ...",},],},
];
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: "Luis Perez",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?",},},],[],[{user: {name: "Anselmo Perez",image: "https://randomuser.me/api/portraits/women/1.jpg",},chat: {date: "10:45 PM",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;

我們實(shí)現(xiàn)了從ipcRenderer發(fā)送的事件，其中，將接收到的索引作為參數(shù)，返回相應(yīng)的聊天：
index.js

const { ipcMain } = require("electron");
win.webContents.on("did-finish-load", () => {//win.webContents.send("pr-chats", chats);win.webContents.send("pr-contacts", contacts);
});
ipcMain.on('pp-get-chat', (event, index) => {win.webContents.send('pr-chats', chats[index])
})

當(dāng)所選聯(lián)系人沒(méi)有聊天時(shí)，我們還會(huì)顯示一個(gè)默認(rèn)窗口：

function createChats(chats) {var lis = ''if (chats.length == 0) {lis += ` <div class="d-flex chat"><div class="w-75 "><div class="card bg-dark"><div class="card-body text-light"><h3 class='text-center'>No message</h3></div></div></div></div>`}else {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;}

這樣，在選擇聯(lián)系人時(shí)，我們會(huì)改變顯示的消息或聊天，并完成骨架應(yīng)用程序；您可以在以下位置找到源代碼：
https://github.com/libredesarrollo/electron-chat-app/releases/tag/v0.1