electronjs入门-聊天应用程序，与Electron.js通信

news2025/2/24 23:38:04

随着第一章中构建的应用程序，我们将开始将其与Electron框架中的模块集成，并以此为基础，以更实用的方式了解它们。

过程之间的通信

根据第二章中的解释，我们将发送每个进程之间的消息；具体来说联系人和聊天；这些数据将在主过程中定义，因为这是负责处理这些数据的过程我们之前已经将其与中使用的客户端-服务器体系结构进行了比较web编程，主要过程已经是服务器和网页一直是客户端，它是从我们可以管理所有这些数据，正如我们将在整本书中看到的那样第一次联系，我们将了解如何从主进程处理到网页。

上传联系人和聊天

为了传递主流程中定义的数据，我们将使用以下结构；数据将从主进程中获得，为了模拟数据库等外部结构，我们将创建一个单独的文件到index.js，该文件将负责提供数据，我们将使用数据创建几个模块，使其易于使用：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的集成并消费它们；我们定义了一个事件，在该事件中，当通过“did-finish-load”事件加载窗口（网页）时，我们通过消息传输数据：

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

从网页上，由于我们激活了与Node的集成，我们可以导入ipcRenderer模块，以便能够与主进程通信，特别是，我们有兴趣创建一个侦听器来接收主进程发送的数据：
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>

在这里插入图片描述
根据具体情况，我们稍微更改函数的签名，在该签名中，我们接收图表或联系人作为参数。我们调用这些函数来从先前定义的侦听器构建列表；最后，我们将得到相同的结果，但现在数据从主进程进入渲染进程。

按选择加载联系人

在本节中，我们将实现以下功能：通过单击其中一个联系人，加载与所述联系人对应的聊天或消息；为了模拟这种行为，我们将使用联系人数组索引，就好像它是我们有兴趣获得聊天记录的联系人的ID一样；为此，我们实现了一个点击事件：
在这里插入图片描述
以及函数，我们调用主进程来提供基于ID的聊天：

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

在数据拉取中，我们将稍微改变结构，我们将有一个数组，其中数组的每个位置都将由上一条消息中提供的联系人索引访问：

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;

我们实现了从ipcRenderer发送的事件，其中，将接收到的索引作为参数，返回相应的聊天：
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])
})

当所选联系人没有聊天时，我们还会显示一个默认窗口：

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

这样，在选择联系人时，我们会改变显示的消息或聊天，并完成骨架应用程序；您可以在以下位置找到源代码：
https://github.com/libredesarrollo/electron-chat-app/releases/tag/v0.1

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1068070.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

对于无法直接获取URL的数据爬虫

对于无法直接获取URL的数据爬虫

在爬学校安全教育题库的时候发现题库分页实际上执行了一段js代码&#xff0c;如下图所示 点击下一页时是执行了函数doPostBack&#xff0c;查看页面源码如下 点击下一页后这段js提交了一个表单&#xff0c;随后后端返回对应数据&#xff0c;一开始尝试分析获取对应两个参数&a…
阅读更多...
MM-Camera架构-ProcessCaptureRequest 流程分析

MM-Camera架构-ProcessCaptureRequest 流程分析

文章目录 processCaptureRequest\_3\_41.1 mDevice1.2 mDevice->ops->process\_capture\_request1.3 hardware to vendor mct\_shimlayer\_process\_event2.1 mct\_shimlayer\_handle\_parm2.2 mct\_shimlayer\_reg\_buffer processCaptureRequest_3_4 sdm660的摄像头走…
阅读更多...
stm32的时钟、中断的配置（针对寄存器），一些基础知识

stm32的时钟、中断的配置（针对寄存器），一些基础知识

一、学习参考资料 &#xff08;1&#xff09;正点原子的寄存器源码。 &#xff08;2&#xff09;STM32F103最小系统板开发指南-寄存器版本_V1.1&#xff08;正点&#xff09; &#xff08;3&#xff09;STM32F103最小系统板开发指南-库函数版本_V1.1&#xff08;正点&#xff0…
阅读更多...
QChart使用说明

QChart使用说明

一.使用说明 Qt官网例程&#xff1a;https://doc.qt.io/qt-5/qtcharts-examples.html QChart&#xff1a;用于管理图表中的线、图例和轴的图形表示。可以简单理解为是一个画布。QChartView&#xff1a;视图组件&#xff0c;无法单独进行显示&#xff0c;需要依附其他组件进行…
阅读更多...
高德地图开发实战案例:实现信息弹出框的富文本展示效果

高德地图开发实战案例:实现信息弹出框的富文本展示效果

marker.content "<p classcardsBg></p>";.cardsBg {width: 246px;height: 426px;background: url(../images/cards.png) no-repeat center center; }其中cards.png为整个弹出模态框的背景图片&#xff0c;做到这一步。仍旧会自带高德地图的样式&#xf…
阅读更多...
C指针【嵌入式】

C指针【嵌入式】

一、到底什么是指针 1.指针变量和普通变量的区别 &#xff08;1&#xff09;首先非常关键的是&#xff0c;指针的实质就是一个变量&#xff0c;它根普通变量没有任何本质区别。指针完整的名字应该叫指针变量&#xff0c;简称为指针。 #include<stdio.h> void main(){//a…
阅读更多...
perl语言——length.pl脚本（统计fasta文件序列长度）

perl语言——length.pl脚本（统计fasta文件序列长度）

Perl脚本——stat.pl&#xff08;统计fasta文件序列长度&#xff09; 相比Perl语言&#xff0c;现在python用的多。但是perl依旧是生信学习的一门课程&#xff0c;还是有人在写&#xff0c;所以你至少要会读。 #!/use/bin/perl #perl解析器$inputFile $ARGV[0]; #输…
阅读更多...
ComplexHeatmap热图专栏 | 1.1 基础热图绘制

ComplexHeatmap热图专栏 | 1.1 基础热图绘制

1 写在前面 最近在作图&#xff0c;一直在寻找《小杜的生信笔记》前期发表的代码。众所周知&#xff0c;小杜的教程基本都是平时自己用到的绘图教程&#xff0c;也是自己一个分享和总结。 自己在后期作图的时候&#xff0c;也会去寻找自己前期的教程作为基础&#xff0c;进行…
阅读更多...
吃鸡达人必备！超实用干货激爽分享！

吃鸡达人必备！超实用干货激爽分享！

大家好&#xff01;作为一名专业吃鸡行家&#xff0c;今天我将为大家分享一些关于提高游戏战斗力和分享顶级游戏作战干货的秘诀&#xff0c;还有一些方便吃鸡作图、装备皮肤库存展示和查询的技巧&#xff01; 首先&#xff0c;让我们来介绍一些吃鸡作图工具推荐。无论是新手还是…
阅读更多...
卷积神经网络的发展历史-VGG

卷积神经网络的发展历史-VGG

VGG的产生 2014 年&#xff0c;Simonyan和Zisserman提出了VGG系列模型&#xff08;包括VGG-11/VGG-13/VGG-16/VGG-19&#xff09;&#xff0c;并在当年的ImageNet Challenge上作为分类任务第二名、定位&#xff08;Localization&#xff09;任务第一名的基础网络出现。 VGG的…
阅读更多...
[数据结构]迷宫问题求解

[数据结构]迷宫问题求解

目录 数据结构——迷宫问题求解&#xff1a;&#xff1a; 1.迷宫问题 2.迷宫最短路径问题 数据结构——迷宫问题求解&#xff1a;&#xff1a; 1.迷宫问题 #include <stdio.h> #include <string.h> #include <stdlib.h> #include <assert.h> #includ…
阅读更多...
mysql面试题26：MySQL中什么是MVCC，它的底层原理是什么

mysql面试题26：MySQL中什么是MVCC，它的底层原理是什么

该文章专注于面试，面试只要回答关键点即可，不需要对框架有非常深入的回答，如果你想应付面试，是足够了，抓住关键点 面试官：什么是MVCC，它的底层原理是什么？ MVCC（Multi-Version Concurrency Control）是一种并发控制机制，用于在数据库中实现并发事务的隔离性和一致性…
阅读更多...
互联网Java工程师面试题·Redis 篇·第二弹

互联网Java工程师面试题·Redis 篇·第二弹

目录 16、Redis 集群方案什么情况下会导致整个集群不可用&#xff1f; 17、Redis 支持的 Java 客户端都有哪些&#xff1f;官方推荐用哪个&#xff1f; 18、Jedis 与 Redisson 对比有什么优缺点&#xff1f; 19、Redis 如何设置密码及验证密码&#xff1f; 20、说说 Redis…
阅读更多...
卷积神经网络的发展历史-ResNet

卷积神经网络的发展历史-ResNet

ResNet的产生 2015 年&#xff0c;Kaiming He 提出了ResNet&#xff08;拿到了 2016 年 CVPR Best Paper Award&#xff09;&#xff0c;不仅解决了神经网络中的退化问题还在同年的ILSVRC和COCO 竞赛横扫竞争对手&#xff0c;分别拿下分类、定位、检测、分割任务的第一名。 R…
阅读更多...
山东省赛二阶段第一部分解题思路

山东省赛二阶段第一部分解题思路

提交攻击者的IP地址 192.168.1.7 这个直接awk过滤一下ip次数&#xff0c;这个ip多得离谱&#xff0c;在日志里面也发现了它的恶意行为&#xff0c;后门&#xff0c;反弹shell 识别攻击者使用的操作系统 Linux 找出攻击者资产收集所使用的平台 shodan 提交攻击者目…
阅读更多...
给 Linux0.11 添加网络通信功能 (Day3: 完成 MIT6.S081 最终实验 网卡驱动(1. 安装工具链和依赖))

给 Linux0.11 添加网络通信功能 (Day3: 完成 MIT6.S081 最终实验 网卡驱动(1. 安装工具链和依赖))

url: https://pdos.csail.mit.edu/6.S081/2020/labs/net.html 首先看 tools章节&#xff1a;https://pdos.csail.mit.edu/6.S081/2020/tools.html 浏览了一下&#xff0c;就是要我们安装依赖 执行以下命令 sudo apt-get install git build-essential gdb-multiarch qemu-syst…
阅读更多...
CentOS Stream9 安装远程桌面服务 Xrdp

CentOS Stream9 安装远程桌面服务 Xrdp

1. 安装 XRDP 若服务器本身没有桌面则首先需要安装本地桌面&#xff1a; yum -y groups install "GNOME Desktop" startx配置源&#xff1a; dnf install epel-release安装 xrdp dnf install xrdp 2. 配置 Xrdp Xrdp 配置文件位于 /etc/xrdp 目录中。对于常规 X…
阅读更多...
学信息系统项目管理师第4版系列20_风险管理

学信息系统项目管理师第4版系列20_风险管理

1. 针对不确定性的应对方法 1.1. 【高23上选58】 1.2. 收集信息 1.2.1. 可以对信息收集和分析工作进行规划&#xff0c;以便发现更多信息&#xff08;如进行研究、争取专家参与或进行市场分析&#xff09;来减少不确定性 1.3. 为多种结果做好准备 1.3.1. 制定可用的解决方…
阅读更多...
【b站韩顺平 快速学Java课】Java的JDK8（包括公共JRE8）安装教程 总结

【b站韩顺平 快速学Java课】Java的JDK8（包括公共JRE8）安装教程 总结

最近开始学Java&#xff0c;如果是程序员的话要使用Java——需要安装JDK。 不同操作系统&#xff08;Win/Linux/Mac&#xff09;——需要安装不同的JDK。 1.JDK安装官网链接&#xff1a; Java Downloads | Oracle 我的电脑是win x64,以下笔记总结就暂且以本人电脑操作系统版本…
阅读更多...
Python编程：创建图像浏览器应用程序

Python编程：创建图像浏览器应用程序

介绍&#xff1a; 图像浏览器应用程序是一种非常常见和实用的工具。它们使用户能够轻松地浏览和管理计算机中的图像文件。本文将介绍如何使用Python编程语言和wxPython库创建一个简单的图像浏览器应用程序。我们将学习如何利用Python的os模块进行文件和文件夹操作&#xff0c;以…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023