首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

高效打造跨平台桌面应用:Electron加载服务器端JS

编程知识
2024年09月18日 14:28

在现代桌面应用开发中,使用 Electron 加载远程服务器托管的前端资源,再与本地 API 交互,能够带来灵活的部署和强大的本地功能支持。这种方式不仅提升了开发效率,还能充分利用 PC 端的资源和性能。

本文将深入解析如何使用 Electron 实现这一架构,并探讨其背后的关键技术,包括 ipcMainipcRenderer 进程间通讯,以及 preload.js 安全交互等内容。你将学会如何打造既能随时更新前端,又能高效利用本地硬件资源的桌面应用。

1. 服务器资源与 Electron 的高效结合

通常,我们的前端资源(HTML、CSS、JavaScript)可以托管在远程服务器上,比如通过 Nginx、Apache 等托管工具来部署静态页面和资源。

Electron 使用 BrowserWindow 加载这些远程资源:

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            nodeIntegration: false,
            contextIsolation: true,
        },
    });

    // 加载服务器托管的前端页面
    win.loadURL('https://example.com');
}

app.whenReady().then(createWindow);

这样,Electron 应用可以直接从服务器加载最新的前端资源,同时主进程负责处理本地 API 的调用和交互。

2. preload.js:前端与本地 API 的安全桥梁

Electron 提供了 preload.js,这是一个在 Web 页面加载之前运行的脚本,它允许安全地在前端和主进程之间创建通信通道。通过 preload.js,我们可以将本地 API 的访问封装起来,并通过 contextBridge 暴露给前端。

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
    sendMessage: (channel, data) => {
        const validChannels = ['toMain'];
        if (validChannels.includes(channel)) {
            ipcRenderer.send(channel, data);
        }
    },
    receiveMessage: (channel, func) => {
        const validChannels = ['fromMain'];
        if (validChannels.includes(channel)) {
            ipcRenderer.on(channel, (event, ...args) => func(...args));
        }
    }
});

这种方式确保前端无法直接访问 Node.js API,从而提高了应用的安全性。

3. 利用 ipcMainipcRenderer 实现前后端通讯

前端通过 preload.js 与主进程进行消息交互,而主进程通过 ipcMain 监听来自前端的请求。以下是主进程中如何处理前端请求并与本地 API 交互的示例:

const { ipcMain } = require('electron');

ipcMain.on('toMain', (event, data) => {
    console.log('收到前端数据:', data);

    // 调用本地 API 或进行其他操作
    const response = callLocalAPI(data);

    // 发送结果给前端
    event.sender.send('fromMain', response);
});

function callLocalAPI(data) {
    return `处理后的数据: ${data}`;
}

前端可以使用暴露的 API 来发送消息并接收响应:

<script>
    window.electronAPI.sendMessage('toMain', '这是来自前端的数据');

    window.electronAPI.receiveMessage('fromMain', (response) => {
        console.log('收到主进程响应:', response);
    });
</script>

4. 综合工作流

通过这套架构,Electron 可以:

  1. 从服务器加载和渲染最新的前端资源。
  2. 使用 preload.js 提供安全的接口,允许前端与本地 API 进行通讯。
  3. 利用 ipcMainipcRenderer 实现前后端的双向通讯。

结语

这种 Electron 与服务器资源结合的架构,不仅让前端资源管理更加灵活,还能高效利用本地 API 和硬件资源。无论是需要频繁更新的前端界面,还是依赖本地系统功能的应用场景,这种方式都能提供强大支持。

通过本文的示例,你已经掌握了如何通过 Electron 加载服务器资源并与本地 API 交互的核心技术,为你的桌面应用注入更多可能性。

让我们一起动手,打造更加灵活与强大的桌面应用吧!

From:https://www.cnblogs.com/chenyishi/p/18418596
本文地址: http://www.shuzixingkong.net/article/2106
0评论
提交 加载更多评论
其他文章 火山引擎数智平台:高性能ChatBI的技术解读和落地实践
导读:大模型能力的发展和成熟,催生出新一代智能化 BI—— ChatBI,即通过自然语言处理(NLP)与大型语言模型(LLMs)的结合,极大简化数据分析过程,提高效率并降低分析门槛。火山引擎数智平台旗下智能数据洞察产品 DataWind 近期上线 ChatBI 能力,提供智能修复、多语法适用等能力,
火山引擎数智平台:高性能ChatBI的技术解读和落地实践 火山引擎数智平台:高性能ChatBI的技术解读和落地实践 火山引擎数智平台:高性能ChatBI的技术解读和落地实践
免弹窗、预授权,默认界面扫码能力打造系统级扫码体验
二维码如今是移动应用流量入口以及功能实现的重要工具,也是各App的流量入口,使用场景愈加丰富,广泛应用于支付、出行、餐饮、生活服务、智慧生活、零售及广告营销等主流场景。 然而,在实际生活中,扫码环境如光照强度、扫码角度、距离等,相机功能如缩放、对焦、曝光等和码图本身完整程度、弯曲程度等很大程度上会影
免弹窗、预授权,默认界面扫码能力打造系统级扫码体验 免弹窗、预授权,默认界面扫码能力打造系统级扫码体验 免弹窗、预授权,默认界面扫码能力打造系统级扫码体验
SSD-KD:天翼云&清华出品,最新无原始数据的蒸馏研究 | CVPR'24
无数据知识蒸馏能够利用大型教师网络所学到的知识,来增强较小型学生网络的训练,而无需访问原始训练数据,从而避免在实际应用中的隐私、安全和专有风险。在这方面的研究中,现有的方法通常遵循一种反演蒸馏的范式,在预训练教师网络指导下实时训练生成对抗网络来合成一个大规模的样本集用于知识蒸馏。论文重新审视了这种常
SSD-KD:天翼云&清华出品,最新无原始数据的蒸馏研究 | CVPR'24 SSD-KD:天翼云&清华出品,最新无原始数据的蒸馏研究 | CVPR'24 SSD-KD:天翼云&清华出品,最新无原始数据的蒸馏研究 | CVPR'24
一文带你精通二项式反演!不服来看!
前言 原题:《二项式反演学习笔记》。 这里有我关于二项式反演的一些思考和领会,包含理论推导和在信息学竞赛中的应用。网络上的教程都太潦草了,难以深入理解。因此,这里将以详细的证明为主,介绍二项式反演在 OI 中的使用。 如果你只想快速浏览结论,可以点击这里查看结论。 概述 反演是一种将两个函数 \(f
一文带你精通二项式反演!不服来看!
Ubuntu 64系统编译android arm64-v8a 的openssl静态库libssl.a和libcrypto.a
#!/bin/bash # Cross-compile environment for Android on ARM64 and x86 # # Contents licensed under the terms of the OpenSSL license # http://www.openssl
Ubuntu 64系统编译android arm64-v8a 的openssl静态库libssl.a和libcrypto.a
OSG开发笔记(三十):OSG加载动力学仿真K模型文件以及测试Demo
前言 Osg需要打开模型文件,但是遇到显示动力学仿真的K模型文件,.k文件是一种描述材料属性的文件,比如密度、弹性模量等,该模型文件不是常规中间开放格式,无法直接支持,需要自定义解析并且重建三维模型。 Demo 实际非常流程,因为视频转gif导致部分看起来不行: 交互流畅性测试 实际研发需要用不同的
OSG开发笔记(三十):OSG加载动力学仿真K模型文件以及测试Demo OSG开发笔记(三十):OSG加载动力学仿真K模型文件以及测试Demo OSG开发笔记(三十):OSG加载动力学仿真K模型文件以及测试Demo
LCT
\(LCT\),全称 \(Link\) \(Cut\) \(Tree\),可以解决动态树问题。 动态树(LCT) \(isroot\) 操作 如果一个点不是根,则考虑它既不是父亲的左儿子也不是父亲的右儿子。代码: bool isroot(int x){ return tr[tr[x].p].s[0]
LCT LCT LCT
手脱upx
其实已经是大一下刚开始的事情了,补个档 手动脱壳の新年快乐 查壳,有壳,UPX X32dbg打开文件,查看初始断点 点击PUSHAD跟进,CTRL+*设置EIP,开始F8步过,寻找ESP寄存器第一次单个变红的地址 此时的内存窗口 开始步过 第一次步过就发现ESP单个变红,右键跟进内存窗口 然后在第一
手脱upx 手脱upx 手脱upx