奇怪的用法增加了:通过渲染进程在思源中拉起子应用

本贴最后更新于 779 天前,其中的信息可能已经时移世异

image.png

这下面这一排就是在渲染进程中拉起的子应用窗口

image.png

打开的效果类似这样,这是 kityminder

image.png

这是以源码方式直接伺服的魔改思源界面,注意右边,他有一些 api。

还有嵌入到思源中运行的 esm.sh(一个 es module 的 cdn 吧算是),vite 等等

主要的代码实现在下面:


import Button from "./UI/button.js"
const { EventEmitter } = require("stream")
const {
    app,
    BrowserWindow,
    shell,
    Menu,
    screen,
    nativeTheme,
    ipcMain,
    globalShortcut,
    Tray,
} = require("@electron/remote")
const path = require("path")
const fs = require("fs")
const appDir = path.dirname(app.getAppPath())
let createServiceHost = (icon) => {
    let serverHost = new BrowserWindow(
        {
            width: screen.getPrimaryDisplay().size.width / 2,
            height: screen.getPrimaryDisplay().workAreaSize.height / 2,
            frame: true,
            icon: icon||path.join(appDir, 'stage', 'icon-large.png'),
            show: false,
            webPreferences: {
                preload: 'D:\\newSiyuan\\conf\\appearance\\themes\\naive\\script\\serviceHandler\\UI\\preload.js',
                nativeWindowOpen: true,
                nodeIntegration: true,
                webviewTag: true,
                webSecurity: false,
                contextIsolation: false,
            },
        }
    )
    window.addEventListener('beforeunload', () => {
        serverHost.close()
        serverHost.webContents.destroy
        serverHost.webContents.send("重新加载", {})

    })
    serverHost.webContents.send("setGlobal", { key: "appDir", value: appDir })

    require("@electron/remote").require("@electron/remote/main").enable(serverHost.webContents)
    return serverHost
}
export default class naiveService extends EventEmitter {
    constructor(_path, option) {
        super()
        this.option = option
        if (_path.endsWith('index.html')) {
            _path = path.dirname(_path)
        }
        this.hosts = []
        this.id = _path
        if(fs.existsSync(path.join(_path, "favicon.png"))){
            this.icon = path.join(_path, "favicon.png")
        }else if(fs.existsSync(path.join(_path, "favicon.ico"))){
            this.icon = path.join(_path, "favicon.ico")
        }else if(fs.existsSync(path.join(_path, "favicon.svg"))){
            this.icon = path.join(_path, "favicon.svg")
        }else{
            this.icon = path.join(appDir, 'stage', 'icon-large.png')
        }
        let serverHost = createServiceHost(this.icon)
        this.serverHost = serverHost

        this.button = new Button(this.id,  this.icon, this)
        serverHost.webContents.on('did-finish-load', () => {
            if (!serverHost) {
                return
            }

        })
        ipcMain.on('服务启动完成', (event, msg) => {
            try {
                console.log(msg)
                this.emit("服务启动完成",msg)
            } catch (e) {
                console.log(e)
            }
        })
        this.自杀计数 = 0
        ipcMain.on(this.id, (event, msg) => {
            this.自杀计数 = 0
        })
        this.path = _path
        if (option.url) {
            this.url = option.url
        } else {
            this.url = this.path
        }
        this.加载服务界面()
        this.加载脚本()
        this.开始自杀计数()
        if (option && option.show) {
            this.是否显示界面 = true
            this.显示界面()
        }
        this.serverHost.webContents.on("close", () => {
            this.destoyed = true
            this.button.remove()
            if (option && option.stayAlive) {
                this.重新初始化()
            }
        })
        this.serverHost.webContents.on("destoyed", () => {
            this.destoyed = true
            this.button.remove()
            if (option && option.stayAlive) {
                this.重新初始化()
            }
        })
        let options = {
            persistent: true,
            recursive: true,
        };

        fs.watch(
            this.path,options,(type,fileName)=>{
                    this.文件被修改=true
                    this.自杀计数 = 10
            }
        )
    }
//这里是让子应用每秒钟向主窗口发送消息证明自己还没有卡死,如果卡死并且设置了stayAlive的话, 子应用会自动被重新拉起
    自杀计数器 = () => {
        this.自杀计数 += 1
        if (this.destoyed) {
            this.自杀计数 = -1
            if (this.option && this.option.stayAlive) {
                this.重新初始化()
            }
            return
        }
        if (this.自杀计数 >= 5) {
            if(this.文件被修改){
            console.log(`服务${this.path}源代码改动,重新启动`)
                this.文件被修改=false
            }else{
                console.log(`服务${this.path}失联,重新启动`)
            }
            if (this.serverHost && !this.destoyed) {
                this.serverHost.close()
                this.serverHost = undefined
            }
            this.自杀计数 = -1
            clearInterval(this.自杀计数器)
            this.重新初始化()
        }
    }
    开始自杀计数() {
        let that = this
        clearInterval(that.自杀计数器)
        setInterval(
            that.自杀计数器,
            1000
        )
    }
    重新初始化() {
        if (!this.destoyed) {
            return
        }
        let serverHost = createServiceHost()
        this.serverHost = serverHost
        serverHost.webContents.on('did-finish-load', () => {
            if (!serverHost) {
                return
            }
        })
        ipcMain.on('服务启动完成', (event, msg) => {
            try {
                this.emit("服务启动完成",msg)

                console.log(msg)

            } catch (e) {
                console.log(e)
            }
        })
        this.自杀计数 = 0
        this.加载服务界面()
        if (this.是否显示界面) {
            this.显示界面()
        }
        this.button.setColor('success')
        this.destoyed = false
        this.serverHost.webContents.on("close", () => {
            this.destoyed = true
            this.button.remove()
        })
        this.serverHost.webContents.on("destoyed", () => {
            this.destoyed = true
            this.button.remove()
        })
    }
    改变可见性() {
        if (this.destoyed) {
            return
        }
        else {
            if (this.serverHost.isVisible()) {
                this.serverHost.hide()
                this.button.setColor('info')

            } else {
                this.serverHost.show()
                this.button.setColor('success')
            }

        }
    }
    加载服务界面() {
        if (fs.existsSync(this.path+'/index.html')) {
            console.log(this.option)
            try {
                if(this.option&&!this.option.widget){
                this.serverHost.loadURL(this.path+'/index.html')
                }else{
                    console.log("http://"+"127.0.0.1:"+window.location.port+`/widgets/${this.path.split('\\').pop()}/index.html`)
                    let url =new URL("http://"+"127.0.0.1:"+window.location.port+`/widgets/${this.path.split('\\').pop()}/index.html`)
                    this.serverHost.loadURL(url.href)
                }
                this.serverHost.send("id", this.id)
            } catch (e) {
                console.error(e)
            }
        } else {
            throw (`${this.path}下不存在index或者index.html,请检查`)
        }
    }
    加载脚本(filePath) {
        if (fs.existsSync(filePath)) {
            this.serverHost.webContents.send('加载脚本', filePath)
        }
    }
    显示界面() {
        if (!this.serverHost.isVisible()) {
            this.serverHost.show()
        }
    }
    隐藏界面() {
        if (this.serverHost.isVisible()) {
            this.serverHost.hide()
        }
    }
}

这玩意的主要作用就是将一些可能造成主界面卡顿的大型代码丢到另一个渲染进程去执行,或者给挂件更独立的运行环境,拉起 vite、esm.sh 之类纯属我自己犯懒......

奥,那个圆形的按钮自己实现一下就可以了奥

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    23020 引用 • 92599 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 1 关注
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    11 引用 • 5 回帖 • 612 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 535 关注
  • 笔记

    好记性不如烂笔头。

    308 引用 • 793 回帖
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 684 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    728 引用 • 1273 回帖
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3454 回帖 • 189 关注
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 637 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖 • 1 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 465 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 29 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 139 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    123 引用 • 74 回帖 • 2 关注
  • 安全

    安全永远都不是一个小问题。

    200 引用 • 816 回帖
  • 一些有用的避坑指南。

    69 引用 • 93 回帖 • 1 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 699 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 623 关注
  • 倾城之链
    23 引用 • 66 回帖 • 138 关注
  • 电影

    这是一个不能说的秘密。

    121 引用 • 604 回帖 • 1 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 158 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 400 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 106 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    166 引用 • 595 回帖
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    34 引用 • 148 回帖 • 1 关注