基于Electron + nodejs + 小程序 实现弹幕小工具（上篇）

前言

上一篇文章，大概讲述我们即将要做的弹幕小工具是什么样的，将使用什么样的技术。那么，从这一篇开始，我们将一步步把想法落地成代码。本文，我们将使用Electron实现接收端，让我们的弹幕飞起来。

效果图

如上图所示，把放映PPT的同时，用户可以通过扫描小程序二维码，实时发表自己的想法，达到互动的效果。

Electron基本介绍

如果你已经对Electron有了一定的了解，可跳过这部分的内容。

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

在Electron中，主进程和渲染进程是一个很重要的概念。

主进程和渲染进程

一个进程是计算机程序执行中的一个实例。 Electron 应用同时使用了 main(主进程) 和一个或者多个 rendere(渲染进程) 来运行多个程序。

在 Node.js 和 Electron 里面，每个运行的进程包含一个 process对象。 这个对象作为一个全局的提供当前进程的相关信息和操作方法。 作为一个全局变量，它在应用内能够不用 require() 来随时取到。

主进程

主进程，通常是名为main.js 的文件，是每个 Electron 应用的入口文件。它控制着整个 App 的生命周期，从打开到关闭。 它也管理着系统原生元素比如菜单，菜单栏，Dock 栏，托盘等。 主进程负责创建 APP 的每个渲染进程。而且整个 Node API 都集成在里面。

每个 app 的主进程文件都定义在 package.json 中的 main 属性当中。这也是为什么 electron. 能够知道应该使用哪个文件来启动。

在Chromium中, 这个进程被称为 "浏览器进程"。它在Electron被重新命名, 以避免与渲染器进程混淆。

渲染进程

渲染进程是你的应用内的一个浏览器窗口。与主进程不同的是，它能够同时存在多个而且运行在不一样的进程。而且它们也能够被隐藏。

在通常的浏览器内，网页通常运行在一个沙盒的环境挡住并且不能够使用原生的资源。 然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些低级别的交互。

大体架构

从上面的效果图可以看出，界面主要由弹幕界面和小程序二维码组成。

结合上面说的主进程和渲染进程，我们可以将弹幕和二维码分别放在两个渲染进程中，主进程和nodejs服务端进行websocket通信，并将接收到的数据分发到对应的渲染进程。

快速开始

官方有个快速开始的示例，我们可以通过这个示例来大概了解一下整个应用是怎么跑的。

# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start

# 进入这个仓库
$ cd electron-quick-start

# 安装依赖并运行
$ npm install && npm start
复制代码

我们在package.json可以看到，main属性的值为main.js，没错，那就是主进程的入口文件了。在这个入口文件中，通过BrowserWindow创建了一个浏览器窗口，并加载了一个html文件。是的，这就是所说的渲染进程。

这样看来，我们要做的事情其实还是很简单的，基本上和我们写静态页面一样。创建浏览器窗口的代码写好之后，剩下的就是写静态页面了。当然，还需要考虑数据通信的方案。

开始开发

创建浏览器窗口

在主进程中，通过API BrowserWindow 创建两个渲染进程，分别展示弹幕主界面和二维码。

function createMainWindow() {
    mainWindow = new BrowserWindow({
        width: 1920,
        height: 1080,
        transparent: true,
        frame: false,
        resizable: false,
        alwaysOnTop: true,
        center: true,
        skipTaskbar: true,
        autoHideMenuBar</