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

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

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

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

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

无头浏览器

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

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

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

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

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

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

我们可以使用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显示了关系。

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

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

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

获取数据。

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

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

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

等待可视化显示

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

关闭无头浏览器

关闭本地web服务器

准备可视化渲染

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

纽约市过去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-visualization

bower install

live-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-visualization

cd public

bower install

cd ..

npm install

live-server

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

关注小编了解更多精彩内容,加入小编的前端学习q u n,领取精品的前端免费学习课程视频,同时我将为您分享精品资料。213+126+486 邀请码:落叶

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180425A1UVDE00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券