Server-Side-Visualisering Med Mardröm

0
44

Detta är ett utdrag från kapitel 11 av Ashley Davis bok Data Gräl med JavaScript som nu finns på Bemanning Början av Access-Programmet. Jag absolut älskar denna idé eftersom det är så mycket data visualisering saker på webben som bygger på en fullt fungerande JavaScript klientsidan och potentiellt mer API-anrop. Det är inte alls lika robust, tillgängligt, eller syndicatable som det skulle kunna vara. Om du tar data visualisering tillbaka till servern, kan du ta med progressive enhancement till fest. Alla exempel kod och data kan hittas på GitHub.

När du gör förberedande kodning och analys av data i Node.js det är mycket användbart att kunna göra en visualisering av våra data. Om vi skulle arbeta i browser-baserade JavaScript vi kan välja någon av de många diagram, grafik och visualisering bibliotek. Tyvärr, under Node.js att vi inte har några fungerande alternativ, så hur annars kan vi uppnå detta?

Vi skulle prova på något som fejkar DOM under Node.js men jag hittade ett bättre sätt. Vi kan göra vår webb-baserad visualisering bibliotek arbeta för oss under Node.js med hjälp av en huvudlös webbläsare. Detta är en webbläsare som inte har något användargränssnitt. Du kan se det som en webbläsare som är osynlig.

Jag använder Mardröm under Node.js för att fånga visualiseringar till PNG och PDF-filer och det fungerar riktigt bra!

Den huvudlösa webbläsare

När vi tänker på en webbläsare som vi brukar tänka på den grafiska program som vi interagerar med på en dag när du surfar på webben. Normalt är vi samverkar med en sådan webbläsare direkt, se det med våra ögon och styra den med musen och tangentbordet så som visas i Figur 1.

Figur 1: Det normala tillståndet för frågor: vår visualisering gör i en webbläsare och användaren interagerar direkt med webbläsaren

En huvudlös webbläsaren på den andra sidan är en webbläsare som har inget grafiskt användargränssnitt och inget direkt sätt för oss att kontrollera det. Du kan fråga vad är det för användning av en webbläsare som vi inte kan se direkt eller interagera med.

Tja, som utvecklare skulle vi vanligtvis använder för en huvudlös webbläsaren för att automatisera och testa webbplatser. Låt oss säga att du har skapat en webbsida och du vill köra en svit av automatiserade tester mot det att bevisa att det fungerar som förväntat. Test suite är automatiserad, vilket innebär att det är kontrollerat från koden och detta innebär att vi måste köra webbläsaren från koden.

Vi använder en huvudlös webbläsaren för automatiserade tester eftersom vi inte behöver för att direkt visa eller interagera med webbsidan som håller på att testas. Visa sådan automatiserad test är på gång är onödigt, allt vi behöver veta är om testet blivit godkänd eller inte — och om det inte gick skulle vi vilja veta varför. I själva verket har ett GUI för webbläsaren enligt testet skulle faktiskt vara ett hinder för en kontinuerlig integration eller kontinuerlig-deployment server, där många sådana tester kan köras parallellt.

Så huvudlösa webbläsare används ofta för automatiserad testning av våra webbsidor, men de är också otroligt bra för att fånga browser-baserade visualiseringar och mata dem till PNG bilder eller PDF-filer. För att göra detta arbete behöver vi en webbserver och en visualisering, vi måste då skriva kod till exempel en huvudlös webbläsare och peka på vår webbserver. Vår kod och sedan uppdrar åt den huvudlösa webbläsaren för att ta en skärmdump av en webbsida och spara det till vårt filsystem som en PNG-eller PDF-fil.

Figur 2: Vi kan använda en huvudlös webbläsare under Node.js för att fånga vår visualisering till en statisk bild-fil

Mardröm är min huvudlösa webbläsare val. Det är en Node.js bibliotek (installeras via npm) som är byggd på Elektron. Elektronen är en ram som normalt används för att bygga plattformsoberoende apps-skrivbordet som är baserad på web-teknik.

Varför Mardröm?

Det kallas Mardröm, men det är definitivt inte en Mardröm att använda. I själva verket är det den enklaste och mest bekväma huvudlösa webbläsare som jag har använt. Det inkluderar automatiskt Electron, så för att komma igång är vi helt enkelt installera Mardröm i vår Node.js projektet enligt följande:

npm install –spara mardröm

Det är allt vi behöver för att installera Mardröm och vi kan börja använda den direkt från JavaScript!

Mardrömmen med nästan allt vi behöver: Ett skript bibliotek med en inbäddad huvudlösa webbläsare. Det omfattar också kommunikation mekanism för att kontrollera den huvudlösa webbläsare Node.js. För det mesta är det smidig och väl integrerade och att Node.js.

Elektronen är byggd på Node.js och Krom och upprätthålls av GitHub och är grunden för ett antal populära applikationer.

Här är skälen till att jag väljer att använda Mardröm över alla andra huvudlösa webbläsare:

  • Elektronen är mycket stabil.
  • Electron har bra prestanda.
  • API är enkel och lätt att lära sig.
  • Det är ingen komplicerad konfiguration (bara börja använda det).
  • Det är väl integrerade med Node.js.

Mardröm och Elektron

När du installerar Mardröm via npm det automatiskt kommer med en inbyggd version av Elektron. Så, kan vi säga att Mardröm är inte bara ett bibliotek för att styra en huvudlös webbläsare, att det i praktiken är den huvudlösa webbläsare. Detta är en annan anledning till att jag gillar Mardröm. Med några av de andra huvudlösa webbläsare, kontroll bibliotek är separat, eller det är värre än så och att de inte har en Node.js kontroll bibliotek alls. I värsta fall, du måste rulla din egen kommunikation för att kontrollera den huvudlösa webbläsare.

Mardröm skapar en instans av Elektron-processen med hjälp av den Node.js child_process modul. Det använder sig av inter-process kommunikation och ett eget protokoll för att styra Electron exempel. Förhållandet visas i Figur 3.

Figur 3: Mardröm gör det möjligt för oss att kontrollera Electron kör som en huvudlös webbläsare

Vår process: att Fånga visualiseringar med Mardröm

Så vad är processen för att fånga en visualisering för att skapa en bild-fil? Detta är vad vi strävar efter:

  1. Skaffa data.
  2. Starta en lokal webbserver för hosting av våra visualisering
  3. Spruta in våra data i web server
  4. Exempel en huvudlös webbläsare och peka på våra lokala webbservern
  5. Vänta på att visualisering ska visas
  6. Ta en skärmdump av visualisering för att en image-fil
  7. Avstängning huvudlösa webbläsare
  8. Avstängning av den lokala webbservern

Förbereda en visualisering för att göra

Det första vi behöver är att ha en visualisering. Figur 4 visar sjökortet vi kommer att arbeta med. Här en karta över New York årliga medeltemperaturen för de senaste 200 åren.

Figur 4: Genomsnittlig årlig temperatur i New York de senaste 200 åren

För att köra denna kod du behöver Node.js installerade. För detta första exempel kommer vi också att använda live-servern (alla webb-servern kommer att göra) för att testa visualisering (på grund av att vi inte har skapat vår Node.js webbservern ännu), installera live-servern enligt följande:

npm install-g live-server

Då kan du klona exempel kod reporäntan till detta blogginlägg:

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

Gå nu in i repo, installera beroenden och köra exempel använda live-server

cd nodejs-visualisering-exempel/grundläggande-visualisering
bower installera
live-server

När du kör live-servern din webbläsare ska öppnas automatiskt och du bör se diagrammet i Figur 4.

Det är en bra idé att kontrollera att din visualisering arbetar direkt i en webbläsare innan du försöker fånga det i en huvudlös webbläsare, det kan lätt vara något fel med det och problem är mycket lättare att felsöka i en riktig webbläsare än i den huvudlösa webbläsare. live-servern har live ladda inbyggd, så nu har du en fin liten installation här när du kan redigera och förbättra diagram interaktivt innan du försöker att fånga det under Node.js.

Denna enkla rad diagram konstruerades med C3. Vänligen ta en titt på exempel kod och kanske titta på några av exemplen i C3 galleri för att lära sig mer om C3.

Starta web server

Att vara värd för våra visualisering, vi behöver en webb-server. Det är inte nog att vi har en webb-server, måste vi också kunna dynamiskt starta och stoppa det. Notering 1 visar koden för vår webbserver.

Notering 1 – Koden för en enkel web-server som kan startas och stoppas
const snabb = require(‘snabb’);
const path = require(‘path’);

modulen.exporten = {
start: () => { // börja Exportera en funktion så att vi kan starta web server på efterfrågan.
återgå nya Löfte((lösa, avvisa) => {
const app = snabb();

const staticFilesPath = sökväg.gå med(__dirname, “offentliga”); // Gör våra ” allmänna sub-katalog tillgänglig via HTTP.
const staticFilesMiddleWare = snabb.statisk(staticFilesPath);
app.använd(‘/’, staticFilesMiddleWare);

const server = app.lyssna(3000, err => { // Starta web server!
if (err) {
förkasta(err); // Fel inträffade samtidigt börjar webbserver.
}
else {
lösa(server); // Web-server igång på ok.
}
});
});
}
}

Koden modul i lista 1 exporten en start-funktionen, som vi kan kalla för att kicka igång vår webb-server. Denna teknik, att kunna starta och stoppa vår webbplats, är också mycket användbara för att göra automatiserad integration tester på en webbplats. Tänk dig att du vill starta din webb-servern, köra några tester mot den och sedan stoppa den i slutet.

Så nu har vi vår webb-baserad visualisering och vi har en webbserver som kan startas och stoppas på efterfrågan. Dessa är de råvaror som vi behöver för att fånga server-side-visualiseringar. Låt oss blanda upp det med Mardröm!

Att göra webb-sida till en bild

Låt oss nu bygga ut koden för att ta en skärmdump av visualisering med Mardröm. Notering 2 visar den kod som instanser Mardröm, pekar det på vår webbserver och då tar en skärmdump.

Notering 2 – Fånga vår diagrammet till en bildfil med hjälp av Mardröm
const webbserver = require(‘./web-server.js’);
const Mardröm = require(‘mardröm’);

webbserver.start() // Starta webbservern.
.då(server => {
const outputImagePath = “./utdata/nyc-temperaturer.png”;

const mardröm = new Nightmare(); // Skapa Mardröm exempel.
tillbaka mardröm.goto(“http://localhost:3000”) // Peka webbläsaren på den webbserver vi har precis börjat.
.vänta(“svg”) // Vänta tills sjökortet visas på skärmen.
.skärmdump(outputImagePath) // tar en skärmdump till en bildfil.
.end() // Avsluta Mardrömmen session. Köade är avslutad och den huvudlösa webbläsaren avslutas.
.då(() => server.stäng()); // Stoppa web server när vi är klara.
})
.då(() => {
konsolen.logga in(“Alla gjort :)”);
})
.catch(err => {
konsolen.fel(“Något gick fel :(“);
konsolen.felmeddelande(err);
});

Observera användning av goto-funktion, detta är vad som faktiskt styr webbläsaren för att ladda vår visualisering.

Webbsidor brukar ta lite tid att ladda. Det är förmodligen inte kommer att vara mycket lång, speciellt när vi har en lokal webbserver, men fortfarande står vi inför faran av att ta en skärmdump av den huvudlösa webbläsare innan eller under sin ursprungliga färg. Det är därför vi måste samtal väntar-funktionen för att vänta tills sjökort <svg – > – elementet visas i webbläsarens DOM innan vi kallar skärmdump funktion.

Så småningom, i slutet funktionen anropas. Fram till nu har vi effektivt byggt en lista över kommandon för att skicka till den huvudlösa webbläsare. Slutet funktion faktiskt skickar den kommandon till webbläsaren som tar skärmdump och utgångar filen nyc-temperaturer.png. Efter det att bilden har tagits vi avsluta genom att stänga ner web-server.

Du kan hitta den färdiga koden under capture-visualisering sub-katalogen i reporäntan. Gå in sub-katalog och installera dependencies:

cd nodejs-visualisering-exempel/ta-visualisering
cd-allmänna
bower installera
cd ..
npm install
live-server

Nu kan du prova koden för dig själv:

nod index.js

Detta har varit ett utdrag från kapitel 11 av Data Gräl med JavaScript som nu finns på Bemanning Början av Access-Programmet. Vänligen använda denna rabattkod fccdavis3 till 37% rabatt. Vänligen kontrollera Uppgifterna Wrangler för nya uppdateringar på boken.