SugarTeam

`本文主要讲解上一章节提到的主进程与渲染进程的概念，以及它们是如何被使用的` `如果对文章的内容有任何疑问或吐槽，请直接在下方评论，大家共同学习和改进` `阅读时间：约4min` ## 主进程与渲染进程 我们来回顾一下，程序目录结构章节中所给出的基本目录结构 app----------------------------应用程序代码目录 ├─main.js----------------------程序启动入口，主进程 ├─common-----------------------通用模块 ├─log--------------------------日志模块 ├─config-----------------------配置模块 ├─ipc--------------------------进程间模块 ├─appNetwork-------------------应用通信模块 └─browserWindows---------------窗口管理，渲染进程 ├─components---------------通用组件模块 ├─store--------------------数据共享模块 ├─statics------------------静态资源模块 └─src----------------------窗口业务模块 ├─窗口A----------------窗口 └─窗口B----------------窗口 在上面的目录结构中，`main.js`就是我们所说的主进程。而通过`browserWindows`目录下窗口文件创建的进程，我们称之为渲染进程。渲染进程需要通过主进程来创建，并被主进程所管理。这里大家可能会有疑问了，什么是进程？为什么要分主进程和渲染进程呢？ ### 进程的概念 计算机进程相关的知识在搜索引擎中可以搜到很多，我们这里不做过多的讲解。读者可以把进程理解为操作系统管理应用程序的基本单位，每个进程之间的资源是不能直接共享的。打开操作系统的任务管理器，我们可以看到当前操作系统都有那些进程，如下图  ### 主进程 回顾以往的web开发，我们的代码，无论是HTML、CSS还是Javascript，都是运行在浏览器的沙盒中的，我们无法越过浏览器的权限访问系统本身的资源，代码的能力被限制在了浏览器中。浏览器之所以这么做，是为了安全的考虑。设想一下，我们在使用浏览器的时候，会打开各式各样不同来源的网站，如果JavaScript代码有能力访问并操作本地操作系统的资源，那将是多么可怕的事情。你在某天不小心打开了一个恶意的网站，可能你存储在硬盘上的文件就被偷走了（都用不着去修电脑）。 但我们要开发的是桌面应用程序，如果无法访问到本地的资源肯定是不行的。Electron将nodejs巧妙的融合了进来，让nodejs作为整个程序的管家。管家拥有较高的权限，可以访问和操作本地资源，使用原本在浏览器中不提供的高级API。同时管家也管理着渲染进程窗口的创建和销毁。所以，我们将这个管家称之为`主进程`。在使用Electron开发的程序中，会使用main.js作为程序的主入口，该文件内代码执行的内容，就是主进程中执行的内容。 下面我们一起来看看主进程中一般都做些什么。...

`这篇文章主要是通过对简单的Electron应用程序的开发目录进行介绍，让读者对整个开发视图有初步的了解，能大概知道开发一个Electron程序需要具备哪些模块。` `如果对文章的内容有任何疑问或吐槽，请直接在下方评论，大家共同学习和改进` `阅读时间：约5min` ## 程序目录结构 Electron应用程序分成三个基础模块： 1. 主进程 2. 进程间通信 3. 渲染进程  对于做纯web开发的新人，可能对多进程开发结构不熟悉。在浏览器中，基于安全策略考虑，web页面通常是在一个沙盒环境中运行的，不被允许去接触原生的资源。然而在Electron中允许页面（渲染进程）调用Node.js的API，所以页面可以与操作系统底层进行交互。 我们知道每个进程都是一个独立运行单位，相互不能直接通信。在Electron中提供两种方法在主进程与渲染进程之间进行通信。 - 使用ipcRenderer和ipcMain模块发送消息 - 使用remote模块进行 RPC 方式的通信 Electron程序目录基础目录结构如下： app----------------------------应用程序代码目录 ├─main.js----------------------程序启动入口，主进程 ├─ipc--------------------------进程间通信模块 └─browserWindows---------------窗口管理，渲染进程 └─src----------------------窗口业务模块 ├─窗口A----------------窗口A └─窗口B----------------窗口B ###...

`系列简介：本系列文章首先围绕Electron框架的关键知识点进行详细讲解，然后对DEMO程序进行分析，让前端开发人员对使用Electron开发桌面应用程序有一个初步的了解。该系列文章更新周期为每周1~2篇。` `阅读时间：约5min` ## Electron 是什么 ### 定义 Electron是一个能让你使用传统前端技术（Nodejs, Javascript, HTML, CSS）开发一个跨平台桌面应用的框架。这里所说的桌面应用指的是在Windows、OSX及Linux系统上运行的程序。 ### 历史 2013年的时候，Atom编辑器问世，作为实现它的底层框架Electron也逐渐被熟知，到2014年时被开源，那时它还是叫`Atom Shell`。 接下来的几年，Electron在不断的更新迭代，几乎每年都有一个重大的里程碑 * 2013年4月11日，Electron以Atom Shell为名起步。 * 2014年5月6日，Atom以及Atom Shell以MIT许可证开源。 * 2015年4月17日，Atom Shell改名为Electron。 * 2016年5月11日，1.0版本发布。 * 2016年5月20日，允许向Mac应用商店提交软件包。 *...

## 背景 组织为了更好的对各个业务的请求日志进行统一的分析，制定了统一的日志打印规范，比如： ```bash [time][processId][traceId][userid] Hello World.... ``` 统一格式之后，业务现有业务的日志工具打印出来的格式是无法满足该规范的，所以我们需要对此进行改造。 我们前端目前Node中间层使用的框架是Egg.js，所以下文讲述下如何在Egg.js上自定义请求日志格式。 ## 开始动手 Egg.js中自带了三种logger，分别是 * Context Logger * App Logger * Agent Logger Context Logger主要是用来记录请求相关的日志。每行日志都会在开头自动的记录当前请求的一些信息，比如时间、ip、请求url等等。 App Logger用于记录应用级别的日志，比如程序启动日志。 Agent Logger用于记录多进程模式运行下的日志。 我们想自定义请求级别的日志，那重点就要从`Context Logger`去研究怎么做。最理想的方案就是，`Context...

我们知道，TCP是面向连接流传输的，其采用Nagle算法，在缓冲区对上层数据进行了处理。避免触发自动分片机制和网络上大量小数据包的同时也造成了粘包（小包合并）和半包（大包拆分）问题，导致数据没有消息保护边界，接收端接收到一次数据无法判断是否是一个完整数据包。那有什么方案可以解决这问题呢？ *** ### 1、粘包问题解决方案及对比 很简单，既然消息没有边界，那我们在消息往下传之前给它加一个边界识别就好了。 1. 发送固定长度的消息 2. 使用特殊标记来区分消息间隔 3. 把消息的尺寸与消息一块发送 第一种方案不够灵活；第二种有风险，如果数据内刚好有该特殊字符会出问题；第三种方案虽然要增加对消息头的解析，不过相对而言还是要安全一些。 ### 2、分包与拆包 既然使用第三种方案，就必然涉及到封包和拆包的问题。 首先肯定需要定义数据包的结构，这类似Http包一样，有包头和包体。包头其实上是个大小固定的结构体，其中有个结构体成员变量表示包体的长度，其他的结构体成员可根据需要自己定义。根据包头长度固定以及包头中含有包体长度的变量就能正确的拆分出一个完整的数据包。包体则存放数据内容。  在发送端，需要进行封包。封包就是给一段数据加上包头,这样一来数据包就分为包头和包体两部分内容了。 在接受端，则需要进行拆包。主要流程如下： 1. 为每一个连接动态分配一个缓冲区,同时把此缓冲区和SOCKET关联. 2. 当接收到数据时首先把此段数据存放在缓冲区中. 3. 判断缓存区中的数据长度是否够一个包头的长度,如不够,则不进行拆包操作. 4. 根据包头数据解析出里面代表包体长度的变量. 5. 判断缓存区中除包头外的数据长度是否够一个包体的长度,如不够,则不进行拆包操作. 6....

由于种种原因，我们选择了Ueditor作为我们的富文本编辑器选型。 Ueditor不支持模块化，所以无法在代码中使用import去引入。一开始我们在项目中是将Ueditor的js文件直接通过script标签引入，在React的代码里直接使用window.UE去使用编辑器。但是这就有一个问题，我们对UE的源码进行了改动，加入了定制化的功能。而直接引入的UE文件在浏览器是有缓存的，我们每次改动都要清除缓存才能生效。 我们要解决缓存这个问题，webpack配置就必须满足以下条件： 1. 每次改动代码后，能自动给UE的文件名加hash 2. 能自动插入html模板文件并在主入口文件加载之前加载完成 ## 第一步 为了能让UE的文件进入打包流程，我们将它作为一个新的入口文件 ```js const entry = { main: ['babel-polyfill', './src/main.js'], ueditor_config: ['./src/common/UEditor/ueditor.config.js'], ueditor_all: ['./src/common/UEditor/ueditor.all.js'] }; new HtmlWebpackPlugin({ template: `./src/app/${key}/templates/${filename}`, filename: `../view/${targetHtml}`, hash:...