Laden von einfachem HTML in Node.js.

207

Ich versuche herauszufinden, wie eine einfache HTML-Datei geladen und gerendert wird, damit ich keinen Code schreiben muss wie:

response.write('...<p>blahblahblah</p>...');
David Granado
quelle

Antworten:

240

Ich habe gerade einen Weg gefunden, die fs-Bibliothek zu benutzen . Ich bin mir nicht sicher, ob es das sauberste ist.

var http = require('http'),
    fs = require('fs');


fs.readFile('./index.html', function (err, html) {
    if (err) {
        throw err; 
    }       
    http.createServer(function(request, response) {  
        response.writeHeader(200, {"Content-Type": "text/html"});  
        response.write(html);  
        response.end();  
    }).listen(8000);
});

Das Grundkonzept besteht nur darin, Rohdaten zu lesen und den Inhalt zu sichern. Trotzdem offen für sauberere Optionen!

David Granado
quelle
14
Sie sollten in Ihrem Fall fs.readFileSync verwenden. Es wäre schlecht, wenn die Seite als undefiniert angezeigt würde. Aber ja, das ist ein guter Weg, um einen einfachen HTML-Server zu
erstellen
1
sys = require('util')wird nicht benötigt, da nichts auf der Konsole gedruckt wird.
Bakudan
1
Dies liest die gesamte Datei in den Speicher und bei jeder Anforderung. Sie sollten die Datei wirklich von der Festplatte streamen, anstatt sie zu puffern. Für solche Dinge gibt es qualitativ hochwertige Bibliotheken wie senchalabs.org/connect und github.com/cloudhead/node-static
Drew Noakes
6
Ich denke, es sollte writeHead (...) sein, nicht writeHeader (...) ... Node.js response.writeHead ()
Danny Bullis
2
@generalhenry Besser noch, der Aufruf von fs.readFilekönnte innerhalb des Aufrufs von platziert werden http.createServer, sodass der Fehler behandelt werden kann. Verwenden Sie Stephens Antwort mit if (err) { console.log('something bad'); return res.end('Oops! Something bad happened.');}Die returnAussage ist die einfache Sache, die neue Benutzer möglicherweise übersehen.
Eenblam
47

Verwenden Sie app.get, um die HTML-Datei abzurufen. Es ist einfach!!

const express = require('express');
const app = new express();

app.get('/', function(request, response){
    response.sendFile('absolutePathToYour/htmlPage.html');
});

So einfach ist das. Verwenden Sie dazu das Express-Modul. Express installieren:npm install express -g

Muhammed Neswine
quelle
35
Sie haben vergessen zu erwähnen, dass Sie haben müssen express.
Schrei
7
Express veraltete res.sendfile: Verwenden Sie res.sendFile anstelle von stackoverflow.com/a/26079640/3166417
itzhar
1
Gute Antworten. Für diejenigen, die nicht wissen, wie man Express benutzt, geben Sie dies vor app.get ein ....:var express = require('express'); var app = express();
Eugenijus S.
2
verwendet npm install express --saveanstelle von -g
MrWater
39

Sie können Dateien manuell mit dem fs-Objekt wiedergeben, aber ich würde empfehlen, das ExpressJS- Framework zu verwenden, um Ihnen das Leben zu erleichtern.

... Aber wenn Sie darauf bestehen, es auf die harte Tour zu machen:

var http = require('http');
var fs = require('fs');

http.createServer(function(req, res){
    fs.readFile('test.html',function (err, data){
        res.writeHead(200, {'Content-Type': 'text/html','Content-Length':data.length});
        res.write(data);
        res.end();
    });
}).listen(8000);
Stephen
quelle
7
Ja, das ist ungefähr das Gleiche, mit dem ich mich beschäftige. Danke auch für den Express-Vorschlag. Es ist ziemlich süß und ich bin mir ziemlich sicher, dass ich es für mein nächstes Projekt verwenden werde. Mein Ziel war es, herauszufinden, wie es unter der Haube gemacht wird, bevor ich den Rahmen das schwere Heben für mich erledigen lasse.
David Granado
1
Firewall von Antivirus kann diesen Schritt deaktivieren
Mohammad Farahani
22

Ich weiß, dass dies eine alte Frage ist, aber da niemand sie erwähnt hat, dachte ich, dass es sich lohnt, sie hinzuzufügen:

Wenn Sie buchstäblich statischen Inhalt bereitstellen möchten (z. B. eine "Über" -Seite, ein Bild, ein CSS usw.), können Sie eines der statischen Inhaltsbereitstellungsmodule verwenden, z. B. Node-Static. (Es gibt andere, die möglicherweise besser / schlechter sind - versuchen Sie es mit search.npmjs.org.) Mit ein wenig Vorverarbeitung können Sie dynamische Seiten aus statischen herausfiltern und an den richtigen Anforderungshandler senden.

Paul
quelle
1
Die Antwort lädt die js-Datei nicht richtig, die Verwendung von Node-Static löst mein Problem.
AZ.
19

Dies wäre wahrscheinlich etwas Besseres, da Sie die Datei (en) streamen, anstatt sie wie fs.readFile in den Speicher zu laden.

var http = require('http');
var fs = require('fs');
var path = require('path');
var ext = /[\w\d_-]+\.[\w\d]+$/;

http.createServer(function(req, res){
    if (req.url === '/') {
        res.writeHead(200, {'Content-Type': 'text/html'});
        fs.createReadStream('index.html').pipe(res);
    } else if (ext.test(req.url)) {
        fs.exists(path.join(__dirname, req.url), function (exists) {
            if (exists) {
                res.writeHead(200, {'Content-Type': 'text/html'});
                fs.createReadStream('index.html').pipe(res);
            } else {
                res.writeHead(404, {'Content-Type': 'text/html'});
                fs.createReadStream('404.html').pipe(res);
        });
    } else {
        //  add a RESTful service
    }
}).listen(8000);
user2428926
quelle
14

Dies ist ein Update der Antwort von Muhammed Neswine

In Express 4.x ist sendfile veraltet und die sendFile- Funktion muss verwendet werden. Der Unterschied besteht darin, dass sendfile den relativen Pfad und sendFile den absoluten Pfad verwendet. Daher wird __dirname verwendet, um eine Hardcodierung des Pfads zu vermeiden.

var express = require('express');
var app = express();
var path = require("path");

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname + '/folder_name/filename.html'));
});
Mit Mehta
quelle
12

Es ist flexibler und einfacher, Methode zu verwenden pipe.

var fs = require('fs');
var http = require('http');

http.createServer(function(request, response) {
  response.writeHead(200, {'Content-Type': 'text/html'});

  var file = fs.createReadStream('index.html');
  file.pipe(response);

}).listen(8080);

console.log('listening on port 8080...');
Devsullo
quelle
10

Der beste Weg, den ich gelernt habe, ist die Verwendung von Express mit HTML-Dateien, da Express viele Vorteile bietet. Sie können es auch auf eine Heroku-Plattform erweitern, wenn Sie möchten. Sagen Sie einfach :)

var express = require("express");
var app     = express();
var path    = require("path");


app.get('/',function(req,res){
  res.sendFile(path.join(__dirname+'/index.html'));
});

app.listen(3000);



console.log("Running at Port 3000");

Sauber und am besten .. !!!

Kaushik Ray
quelle
6

Die einfache Möglichkeit besteht darin, alle Ihre Dateien, einschließlich index.html oder etwas mit allen Ressourcen wie CSS, JS usw., in einem öffentlichen Ordner abzulegen, oder Sie können ihn beliebig benennen. Jetzt können Sie Express-JS verwenden und App einfach mitteilen um den _dirname zu verwenden als:

Fügen Sie diese in Ihren server.js mit Express hinzu

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));

und wenn Sie ein separates Verzeichnis haben möchten, fügen Sie ein neues Verzeichnis unter dem öffentlichen Verzeichnis hinzu und verwenden Sie diesen Pfad "/ public / YourDirName".

Also, was machen wir hier genau? Wir erstellen eine Expressinstanz mit dem Namen app und geben die Adresse des öffentlichen Verzeichnisses an, um auf alle Ressourcen zuzugreifen. Hoffe das hilft !

Muaaz Salagar
quelle
6

Wie wäre es mit einem Express-Modul?

    var app = require('express')();

    app.get('/',function(request,response){
       response.sendFile(__dirname+'/XXX.html');
    });

    app.listen('8000');

Dann können Sie den Browser verwenden, um / localhost: 8000 abzurufen

李杰駿
quelle
5
   var http = require('http');
   var fs = require('fs');

  http.createServer(function(request, response) {  
    response.writeHeader(200, {"Content-Type": "text/html"});  
    var readSream = fs.createReadStream('index.html','utf8')
    readSream.pipe(response);
  }).listen(3000);

 console.log("server is running on port number ");
Siddharth Shukla
quelle
2
Ich glaube nicht response.writeHeader(), sondern response.writeHead().
Edwin
response.writeHeader()und response.writeHead()beide sind gültig.
Deke
4

Ich denke, dies wäre eine bessere Option, da die URL angezeigt wird, auf der der Server ausgeführt wird:

var http = require('http'),
    fs = require('fs');

const hostname = '<your_machine_IP>';
const port = 3000;

const html=fs.readFile('./index.html', function (err, html) {
    if (err) {
        throw err; 
    }
        http.createServer(function(request, response) {  
        response.writeHeader(200, {"Content-Type": "text/html"});  
        response.write(html);  
        response.end();  
    }).listen(port, hostname, () => {
            console.log(`Server running at http://${hostname}:${port}/`);
        })
}); 
sghazagh
quelle
4

Sie können auch dieses Snippet verwenden:

var app = require("express");
app.get('/', function(req,res){
   res.sendFile(__dirname+'./dir/yourfile.html')
});
app.listen(3000);
heyTanay
quelle
4

Es ist ganz einfach, wenn Sie Pipe verwenden. Das Folgende ist das Code-Snippet server.js.

var http = require('http');
var fs = require('fs');

function onRequest(req, res){

    console.log("USER MADE A REQUEST. " +req.url);
    res.writeHead(200, {'Content-Type': 'text/html'});
    var readStream = fs.createReadStream(__dirname + '/index.html','utf8'); 
    
/*include your html file and directory name instead of <<__dirname + '/index.html'>>*/

    readStream.pipe(res);

}

http.createServer(onRequest).listen(7000);
console.log('Web Server is running...');

Abrar_11648
quelle
Wenn jemand versucht, dies auf die Rückgabe beliebiger Dateien in beliebigen verschachtelten Verzeichnissen auszudehnen, stellen Sie sicher, dass das von Ihrem Benutzer übergebene Verzeichnis keine Elemente wie enthält ../. Wenn Sie nur __dirname + "/index.html'etwas ändern __dirname + requestedPageFromHeaderwürden, würde der resultierende Code meiner Meinung nach diese Sicherheitsanfälligkeit aufweisen. Zeichen für Verzeichnispfade wie ~sind in Ordnung, solange Sie Folgendes angeben __dirname +: Wenn der Benutzer den Beginn des Pfads bestimmen kann, muss er auch nach diesen suchen.
Jon
2

Ich weiß, dass dies eine alte Frage ist. Hier ist ein einfaches Dateiserver-Dienstprogramm, wenn Sie Connect oder Express nicht verwenden möchten. sondern das http-Modul.

var fileServer = require('./fileServer');
var http = require('http');
http.createServer(function(req, res) {
   var file = __dirname + req.url;
   if(req.url === '/') {
       // serve index.html on root 
       file = __dirname + 'index.html'
   }
   // serve all other files echoed by index.html e.g. style.css
   // callback is optional
   fileServer(file, req, res, callback);

})
module.exports = function(file, req, res, callback) {
    var fs = require('fs')
        , ext = require('path').extname(file)
        , type = ''
        , fileExtensions = {
            'html':'text/html',
            'css':'text/css',
            'js':'text/javascript',
            'json':'application/json',
            'png':'image/png',
            'jpg':'image/jpg',
            'wav':'audio/wav'
        }
    console.log('req    '+req.url)
    for(var i in fileExtensions) {
       if(ext === i) {    
          type = fileExtensions[i]
          break
       }
    }
    fs.exists(file, function(exists) {
       if(exists) {
          res.writeHead(200, { 'Content-Type': type })
          fs.createReadStream(file).pipe(res)
          console.log('served  '+req.url)
          if(callback !== undefined) callback()
       } else {
          console.log(file,'file dne')
         }  
    })
}
user548
quelle
2

Verwenden Sie EJS anstelle von Jade

npm install ejs

app.js.

app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

./routes/index.js

exports.index = function(req, res){
res.render('index', { title: 'ejs' });};
Saurabh Chandra Patel
quelle
1

Dies ist eine ziemlich alte Frage ... aber wenn Ihr Anwendungsfall hier darin besteht, einfach eine bestimmte HTML-Seite ad hoc an den Browser zu senden, würde ich Folgendes verwenden:

var http = require('http')
,       fs = require('fs');

var server = http.createServer(function(req, res){
  var stream = fs.createReadStream('test.html');
  stream.pipe(res);
});
server.listen(7000);
Granmoe
quelle
0

Wir können das HTML-Dokument mit Connect Frame Work laden. Ich habe mein HTML-Dokument und die zugehörigen Bilder im öffentlichen Ordner meines Projekts abgelegt, in dem die folgenden Code- und Knotenmodule vorhanden sind.

//server.js
var http=require('http');
var connect=require('connect');

var app = connect()
  .use(connect.logger('dev'))
  .use(connect.static('public'))
  .use(function(req, res){
   res.end('hello world\n');
 })

http.createServer(app).listen(3000);

Ich habe die readFile () -Methode von fs ausprobiert, aber die Bilder können nicht geladen werden. Deshalb habe ich das Connect-Framework verwendet.

Balayesu Chilakalapudi
quelle
0

https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906

Hier sind meine einfachen Demo-Codes für statische HTML-Hostdateien mithilfe des Express-Servers!

hoffe es hilft dir!

// simple express server for HTML pages!
// ES6 style

const express = require('express');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 3000;
const app = express();

let cache = [];// Array is OK!
cache[0] = fs.readFileSync( __dirname + '/index.html');
cache[1] = fs.readFileSync( __dirname + '/views/testview.html');

app.get('/', (req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.send( cache[0] );
});

app.get('/test', (req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.send( cache[1] );
});

app.listen(port, () => {
    console.log(`
        Server is running at http://${hostname}:${port}/ 
        Server hostname ${hostname} is listening on port ${port}!
    `);
});

xgqfrms
quelle