前端服务器的可视化与它的恶梦

这是摘自中的戴维斯书第11章的摘录。与JavaScript的数据争论现在可以在曼宁早期访问程序。我完全喜欢这个想法，因为网络上有很多数据可视化工具，它依赖于完全运行的客户端javascript以及潜在的api调用。它并不像它可能那样健壮、可访问或无任何功能。如果您将数据可视化返回到服务器，您可以向该缔约方带来渐进增强。

在进行探索性编码或数据分析时n.Node.js能够从我们的数据中呈现可视化是非常有用的。如果我们在基于浏览器的javascript中工作，我们可以选择许多图表、图形和可视化库中的任何一个。不幸的是，在Node.js下，我们没有任何可行的选择，那么我们如何才能实现呢？

我们可以尝试像假装在Node.js下面的在一样，但是我找到了更好的方法。我们罐使用基于浏览器的可视化库为我们提供了一个无头浏览器。这是一个没有用户界面的浏览器。你可以把它想象成一个隐形的浏览器。

我用恶梦在Node.js下，捕获可视化到png和pdf文件，它工作真的很好！

无头浏览器

当我们想到一个网络浏览器时，我们通常会想到图形软件，我们每天都会在浏览网页时交互。通常，我们直接与这样的浏览器交互，用我们的眼睛查看它，并用鼠标和键盘控制它，如图1所示。

图1：正常状态：我们的可视化呈现在浏览器中，用户直接与浏览器交互。

另一方面，一个无头浏览器是一个web浏览器，它没有图形用户界面，也没有直接的手段来控制它。您可能会问，浏览器的使用是什么，我们无法直接看到或交互。

嗯，作为开发人员，我们通常会使用一个无头浏览器来自动化和测试网站。假设您已经创建了一个web页面，您希望运行一系列自动化测试来证明它是按照预期运行的。测试套件是自动化的，这意味着它是由代码控制的，这意味着我们需要驱动从代码中的浏览器。

我们使用一个无头浏览器进行自动化测试，因为我们不需要直接查看或与正在测试的网页交互。在进度上查看这样的自动化测试是不必要的，我们需要知道的是测试是否通过或失败-如果失败，我们想知道何必。实际上，为被测试的浏览器提供GUI实际上是对连续集成或连续部署服务器的一个障碍，在那里，许多这样的测试可以并行运行。

因此，无头浏览器常常用于对我们的网页进行自动化测试，但是它们对于捕捉基于浏览器的可视化并将其输出到png图像或pdf文件也非常有用。为了使这项工作需要一个web服务器和可视化程序，我们必须编写代码来实例一个无头浏览器并指向我们的web服务器。然后我们的代码指示无头浏览器以一个png或pdf文件将网页截图保存到我们的文件系统中。

图2：我们可以使用Node.js下的无头浏览器来捕获对静态图像文件的可视化

恶梦是我无头浏览器的选择。它是一个基于上的库(通过国家预防机制安装)，它构建于电子。电子是一种框架，通常用于构建基于web技术的跨平台桌面应用程序。

为什么要做恶梦？

这叫恶梦，但它绝对不是一个噩梦。事实上，这是我使用过的最简单、最方便的无头浏览器。它自动包含电子，因此我们只需将噩梦安装到我们的Node.js项目中，如下：

npm install --save nightmare

这就是我们安装噩梦所需要的，我们可以从javascript开始使用它！

噩梦几乎来自我们所需要的一切：一个带有嵌入式无头浏览器的脚本库。它还包括了控制无头浏览器从Node.js来控制的通信机制。大部分情况下，它是无缝的，并且集成到了Node.js。

电子是建立在Node.js和铬之上的，并且由GitHub维护，是许多流行桌面应用程序的基础。

下面是我选择使用噩梦来处理任何其他无头浏览器的原因：

• 电子是非常稳定的。

• 电子具有良好的性能。

• 该api简单易学。

• 没有复杂的配置(只需开始使用)。

• 它与Node.js非常好地集成在一起。

恶梦与电子

当您通过国家预防机制安装噩梦时，它会自动地附带一个嵌入式版本的电子。因此，我们可以说，噩梦不仅仅是一个控制无头浏览器的库，它有效地实现了。是无头浏览器。这也是我喜欢噩梦的另一个原因。对于其他一些无头浏览器，控件库是单独的，或者比它更糟糕，而且它们根本没有一个Node.js控制库。在最糟糕的情况下，您必须卷起自己的通信机制来控制无头浏览器。

恶梦使用在创建电子过程实例。child_process模块。然后使用进程间通信和自定义协议来控制电子实例。图3显示了关系。

图3：恶梦让我们可以控制电子运行作为无头浏览器

我们的过程：用恶梦捕捉可视化

那么，如何捕捉图像文件的可视化过程呢？这就是我们所瞄准的目标：

1. 获取数据。

2. 启动本地web服务器来承载我们的可视化。

3. 将我们的数据注入web服务器

4. 实例一个无头浏览器并指向本地web服务器

5. 等待可视化显示

6. 捕获可视化到图像文件的屏幕截图

7. 关闭无头浏览器

8. 关闭本地web服务器

准备可视化渲染

首先我们需要的是可视化。图4显示了我们将使用的图表。这张图表显示了纽约市过去200年间年平均气温。

图4：纽约市过去200年间平均年气温

要运行此代码，您需要安装Node.js。对于这个第一个示例，我们还将使用生活(任何web服务器将做)来测试可视化(因为我们还没有创建我们的Node.js服务器)，安装运行服务器如下：

npm install -g live-server

然后，您可以克隆这个博客文章的示例代码回收：

git clone https://github.com/Data-Wrangling-with-JavaScript/nodejs-visualization-example

现在进入回购，安装依赖项并使用运行服务器运行示例

cd nodejs-visualization-example/basic-visualizationbower installlive-server

当运行服务器时，浏览器应该自动打开，您应该看到图4中的图表。

检查可视化在浏览器中直接工作是一个好主意，然后尝试在一个无头浏览器中捕获它；它很容易发生错误，而问题更容易在实际浏览器中进行故障排除，而不是在无头运行服务器上进行故障排除。活重装内置，所以现在您有一个很好的设置，当您可以编辑和改进图表交互之前，尝试捕获它在Node.js下。

这条简单的线图是用C3。请查看示例代码，并查看下面示例代码中的一些示例c3廊道了解更多关于c3的知识。

启动web服务器

为了承载我们的可视化，我们需要一个web服务器。我们还没有足够的网络服务器，我们还需要能够动态启动和停止它。清单1显示了我们web服务器的代码。

清单1-可以启动和停止的简单web服务器的代码

const express = require('express');const path = require('path'); module.exports = { start: () => { // Export a start function so we can start the web server on demand. return new Promise((resolve, reject) => { const app = express(); const staticFilesPath = path.join(__dirname, "public"); // Make our 'public' sub-directory accessible via HTTP.  const staticFilesMiddleWare = express.static(staticFilesPath); app.use('/', staticFilesMiddleWare); const server = app.listen(3000, err => { // Start the web server! if (err) { reject(err); // Error occurred while starting web server. } else { resolve(server); // Web server started ok. } });  }); }}

所以现在我们有了基于浏览器的可视化技术，我们有一个web服务器，可以在需求上启动和停止。这些是我们需要捕获服务器端可视化所需的原始元素。让我们把它和噩梦混起来！

将网页呈现为图像

现在让我们来编写代码来捕捉可视化的屏幕快照和噩梦。清单2显示了实例失败的代码，并将其放在我们的web服务器上，然后进行截图。

清单2-使用噩梦捕获我们的图表到图像文件

const webServer = require('./web-server.js');const Nightmare = require('nightmare'); webServer.start() // Start the web server..then(server => { const outputImagePath = "./output/nyc-temperatures.png"; const nightmare = new Nightmare(); // Create the Nightmare instance. return nightmare.goto("http://localhost:3000") // Point the browser at the web server we just started. .wait("svg") // Wait until the chart appears on screen. .screenshot(outputImagePath) // Capture a screenshot to an image file. .end() // End the Nightmare session. Any queued operations are completed and the headless browser is terminated. .then(() => server.close()); // Stop the web server when we are done.}).then(() => { console.log("All done :)");}).catch(err => { console.error("Something went wrong :("); console.error(err);});

注意使用goto函数，这实际上就是引导浏览器加载我们的可视化。

网页通常需要一些时间来加载。这可能不会很长，尤其是在我们运行本地Web服务器的情况下，但我们仍然面临着在无头浏览器开始之前或过程中截图的危险。这就是为什么我们必须打电话给wait功能等等直到图表的元素出现在浏览器的是中，然后再调用屏幕快照函数。

最终，end函数被调用。直到现在我们已经有效地构建了一个命令列表，以便发送到无头浏览器。最终函数实际上将命令发送到浏览器，该浏览器将接收屏幕截图并输出该文件。nyc-temperatures.png。在图像文件被捕获后，我们通过关闭Web服务器来完成。

进入子目录并安装依赖项：

cd nodejs-visualization-example/capture-visualizationcd public bower installcd ..npm installlive-server

现在您可以为自己尝试代码：

node index.js

关注小编了解更多精彩内容，私信学习，领取精品的前端免费学习课程视频，同时我将为您分享精品资料。