web-dev-qa-db-fra.com

Serveur node.js simple qui envoie html + css en réponse

J'ai créé un serveur http de base qui envoie un fichier html en réponse. Comment puis-je également envoyer un fichier css pour que le client utilisant le navigateur voit un html utilisant css?

Le code que j'ai:

var http = require('http');

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

fs.readFile('./AppClient.html', function(err, data) {
    if (err){
        throw err;
    }
    htmlFile = data;
});



var server = http.createServer(function (request, response) {
      response.writeHead(200, {"Content-Type": "text/html"});
      response.end(htmlFile);
    });

//Listen on port 8000, IP defaults to 127.0.0.1
server.listen(8000);


console.log("Server running at http://127.0.0.1:8000/");

Ce que j'ai essayé (il semble que cela ne fonctionne pas - le client ne voit que le contenu du fichier CSS ici):

var http = require('http');

var fs = require('fs');
var htmlFile;
var cssFile;

fs.readFile('./AppClient.html', function(err, data) {
    if (err){
        throw err;
    }
    htmlFile = data;
});

fs.readFile('./AppClientStyle.css', function(err, data) {
    if (err){
        throw err;
    }
    cssFile = data;
});

var server = http.createServer(function (request, response) {
      response.writeHead(200, {"Content-Type": "text/css"});
      response.write(cssFile);
      response.end();

      response.writeHead(200, {"Content-Type": "text/html"});
      response.write(htmlFile);
      response.end();
    });

//Listen on port 8000, IP defaults to 127.0.0.1
server.listen(8000);


console.log("Server running at http://127.0.0.1:8000/");

fichier html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="AppClientStyle.css">
</head>
<body>


<div class=middleScreen>

<p id="p1">Random text</p>

</div>

</body>
</html>

fichier css:

@CHARSET "UTF-8";

.middleScreen{
    text-align:center;
    margin-top:10%;
}

Je ne veux pas utiliser express ici (c'est juste à des fins d'apprentissage)

javascripthtmlcssnode.js
15
kiluk876

Ce que vous avez écrit dans votre premier extrait est un serveur Web qui répond avec le corps de votre fichier HTML, quel que soit l'URI demandé par le navigateur.

C'est bien beau, mais avec le deuxième extrait, vous essayez d'envoyer un deuxième document à un descripteur de réponse fermé. Pour comprendre pourquoi cela ne fonctionne pas, vous devez comprendre comment HTTP fonctionne. HTTP est (pour la plupart) un protocole de type requête-> réponse. Autrement dit, le navigateur demande quelque chose et le serveur renvoie cette chose, ou un message d'erreur quelconque, au navigateur. (Je vais ignorer Keep-Alive et les méthodes qui permettent au serveur de pousser le contenu vers le navigateur - ce sont bien au-delà du simple objectif d'apprentissage que vous semblez avoir à l'esprit ici.) Il suffit de dire qu'il est inapproprié de envoyer une deuxième réponse au navigateur lorsqu'il ne l'a pas demandé.

Alors, comment voulez-vous que le navigateur demande un deuxième document? Eh bien, c'est assez simple ... dans votre fichier HTML, vous avez probablement un <link rel="stylesheet" href="AppClientStyle.css"> tag. Cela entraînera le navigateur à faire une demande à votre serveur lui demandant AppClientStyle.css. Vous pouvez gérer cela en ajoutant un switch ou if à votre code createServer pour effectuer une action différente en fonction de l'URL demandée par le navigateur.

var server = http.createServer(function (request, response) {
    switch (request.url) {
        case "/AppClientStyle.css" :
            response.writeHead(200, {"Content-Type": "text/css"});
            response.write(cssFile);
            break;
        default :    
            response.writeHead(200, {"Content-Type": "text/html"});
            response.write(htmlFile);
    });
    response.end();
}

Donc, tout d'abord, lorsque vous accédez à votre serveur à http: // localhost: 80 vous recevrez votre fichier html. Ensuite, le contenu de ce fichier déclenchera le navigateur pour demander http: // localhost: 8000/AppClientStyle.css

Notez que vous pouvez rendre votre serveur beaucoup plus flexible en servant n'importe quel fichier qui existe dans le répertoire de votre projet:

var server = http.createServer(function (request, response) {
    fs.readFile('./' + request.url, function(err, data) {
        if (!err) {
            var dotoffset = request.url.lastIndexOf('.');
            var mimetype = dotoffset == -1
                            ? 'text/plain'
                            : {
                                '.html' : 'text/html',
                                '.ico' : 'image/x-icon',
                                '.jpg' : 'image/jpeg',
                                '.png' : 'image/png',
                                '.gif' : 'image/gif',
                                '.css' : 'text/css',
                                '.js' : 'text/javascript'
                                }[ request.url.substr(dotoffset) ];
            response.setHeader('Content-type' , mimetype);
            response.end(data);
            console.log( request.url, mimetype );
        } else {
            console.log ('file not found: ' + request.url);
            response.writeHead(404, "Not Found");
            response.end();
        }
    });
}

Démarrez cela dans le même répertoire que vos fichiers HTML et CSS. Ce qui précède est simpliste, sujet aux erreurs et INSECURE. Mais cela devrait être suffisant pour votre propre apprentissage ou à des fins de développement local.

Gardez à l'esprit que tout ce qui précède est beaucoup moins succinct que le simple fait d'utiliser Express. En fait, je ne sais pas pourquoi vous ne voudriez pas utiliser Express, alors je vais essayer de vous convaincre de l'essayer:

$ npm install express
$ mkdir www
$ mv AppClientStyle.css www/
$ mv AppClient.html www/index.html

Votre script ressemblera à: (emprunté à Express Hello World )

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

app.use(express.static('www'));

var server = app.listen(8000, function () {

    var Host = server.address().address
    var port = server.address().port

    console.log('Express app listening at http://%s:%s', Host, port)

})

Exécutez ensuite votre script et pointez votre navigateur sur http: // localhost: 80 . C'est vraiment indolore.

21
Andy Zarzycki