news 2026/4/22 23:39:27

Electron桌面应用聊天(续) 进程间的通信

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Electron桌面应用聊天(续) 进程间的通信

2026.4.1

2026.4.10补充

一.Day.js

与时间格式相关的用day.js

安装 | Day.js中文网

npm install dayjs --save

二.Omit

Omit是 TypeScript 内置的泛型工具类型,作用是从一个类型中「剔除」指定的属性,生成一个新的类型。

语法与原理

Omit<Type, Keys>
  • Type:你要操作的原始类型(比如你的MessageProps

  • Keys:你要剔除的属性名(可以是单个属性,也可以是联合类型'a' | 'b'

  • 最终返回一个剔除了指定属性后的新类型

三.进程间的通信(IPC)

渲染进程将问题连带着他的id等信息,传入主进程。在主进程调用对应的大模型,最后将结果又传回给渲染进程。

具体可查阅官方文档 进程间通信 | Electron

1.渲染进程 ---> 主进程

(1)渲染进程发送消息ipcRenderer.send

ipcRenderer.send(channel, data)

已经成功拿到newMessageId ,lastQuestion, provider.name, conversation.selectModel

可以进行发送:要把类型手动添加到window上去。

创建interface.d.ts,(在window上面加上electronAPI方法)

preload.ts中(在electron上面加上startChat方法)

conversation.vue(使用startChat方法)

type.ts

(2)主进程接收消息ipcMain.on

ipcMain.on(channel, (event, ...args) => {}

在main.ts中接收来自渲染进程的数据

可在终端查看,发现已成功打印

2.主进程 ----> 渲染进程

(1)主进程处理逻辑mainWindow.webContents.send

mainWindow.webContents.send('xxx', content);

上一步骤主进程已经拿到渲染进程的providerName, content, messageId, selectedModel。在这里就可以用拿到的数据,调用大模型,返回结果。又发送给渲染进程。

main.ts中

(2)渲染进程接收数据 ipcRenderer.on

发送的名字叫upload-message

proload.ts

给IElectronAPI加一个方法叫onUpdateMessage

interface.d.ts中

Conversation.vue就可以拿到大模型返回的数据了

可在控制台成功打印

(3)将数据展示到页面上

Conversation.vue

如图,成功返回。

【补充知识】

1.Electron 主进程 / 渲染进程区分:

  • 主进程(main.ts/main.js):Node.js 环境,负责窗口管理、IPC 通信,不能直接写 DOM 代码。

  • 渲染进程(.vue文件):浏览器环境,支持 TS/JS,负责页面渲染,不能直接访问 Node.js API(需要通过preload桥接)。

2.TypeScript 类型的本质:

  • 所有<>包裹的类型语法(如Omit<>data: Type)只在编译阶段生效,绝对不能出现在运行时的赋值语句中。

3.Electron IPC 通信规范:

1.渲染进程发送:ipcRenderer.send(channel, data)

2.主进程监听:ipcMain.on(channel, (event, ...args) => {}

中间靠proload.ts中的contextBridge桥接。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/22 23:37:25

高维非线性抛物型PDE求解:FBSDE框架与局部线性回归技术

1. 高维非线性抛物型PDE求解的挑战与机遇在科学计算领域&#xff0c;高维非线性抛物型偏微分方程&#xff08;PDE&#xff09;的数值求解一直是个令人头疼的问题。想象一下&#xff0c;当你试图模拟100维甚至10000维空间中的物理现象时&#xff0c;传统的网格方法会面临怎样的困…

作者头像 李华
网站建设 2026/4/22 23:36:21

SeanLib系列函数库使用说明

写在前面的话 我将陆续发布SeanLib系列的函数库的使用说明&#xff0c;这些函数库的创作&#xff0c;基于面向对象的思想&#xff0c;方便在应用程序中的使用。本篇作为目录&#xff0c;记载各个库的文章链接。 但请注意&#xff0c;并不会在此提供核心代码及库文件。 函数库…

作者头像 李华
网站建设 2026/4/22 23:27:56

告别‘看不懂’:用CANalyzer和PCAN-USB Pro手把手解析一条真实的J1939报文

从零解析J1939报文&#xff1a;CANalyzer实战指南 当你第一次从卡车CAN总线上捕获到一条J1939报文时&#xff0c;那串看似随机的十六进制数字可能令人望而生畏。但别担心——这正是工具存在的意义。本文将带你用CANalyzer和PCAN-USB Pro这类专业工具&#xff0c;像侦探破译密码…

作者头像 李华
网站建设 2026/4/22 23:26:30

Python类方法怎么定义@classmethod与@staticmethod区别

该用 classmethod 而不是 staticmethod 时&#xff1a;需返回当前类&#xff08;含子类&#xff09;实例、读取类变量或支持继承动态绑定&#xff1b;staticmethod 仅适用于无类依赖的纯工具函数。什么时候该用 classmethod 而不是 staticmethod核心区别不在“能不能访问类”&a…

作者头像 李华
网站建设 2026/4/22 23:24:22

从原理到防御:深入解析泛洪攻击(Flood Attack)的攻防博弈

1. 泛洪攻击的本质&#xff1a;为什么你的服务器突然"卡死"了&#xff1f; 想象一下周末早晨的网红早餐店。原本能容纳50人的店面&#xff0c;突然涌进500个"顾客"&#xff0c;其中大部分人既不点餐也不消费&#xff0c;只是堵在过道里闲聊。结果是什么&am…

作者头像 李华
网站建设 2026/4/22 23:24:14

485AI语音识别模块:多路语音控制,构建楼宇智能语音中控

485AI语音识别模块凭借工业级的RS485总线通信与离线/在线AI语音识别能力&#xff0c;应用场景非常广泛&#xff0c;粗略划分可覆盖超10大领域、数十种细分场景&#xff0c;核心集中在工业自动化、智能楼宇、智慧农业、交通车载、安防消防、能源设施、老旧设备改造等。一、工业自…

作者头像 李华