[NODEJS] Ouverture d'un fichier HTML, pas d'images

1 avril 2017 à 16:19:13

Bonjour tout le monde,

J'ai un problème sur NodeJS, enfaite je veux ouvir un fichier HTML tout simplement avec NodeJS.

La page s'affiche etc, mais le problème ce sont les images, elles ne s'affichent pas.Juste le cadre.

Voici le code du serveur :

//modules and variables
	var port = 8080;
	var http = require("http");
	var url = require("url");
	var fs = require("fs");


//server
fs.readFile('../web/www/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);
});

console.log('Server listenning on port',port);

Merci d'avance.

Pitox

1 avril 2017 à 18:20:20

Bonjour,

Surement un problème d'url, tu as regardé ta console, tes requêtes ? Voir ce qui pose problème ?

GannoN

1 avril 2017 à 18:23:59

Salut,

C est normale

Si je regarde ton code, tu envoie eulement la page tu envoie toujours index.html.

Si tu change le lien pour tadatat.html ou toto.jpg, tu au à encore et toujours ton index.html.

Il faut que tu revoie la bonne ressource suivant la requête du client. ( avec la variable resquest )

Utilise un frameword type express JS si tu veut pas te cassé la tête

-
Edité par GannoN 1 avril 2017 à 18:24:32

Zhass

2 avril 2017 à 0:35:13

Merci beaucoup pour vos réponses ! :)

Oké pas de soucis je vais regardé de ce coté la merci encore !

Ce qui m'avait choqué c'est lorsque j'affiche l'url parsé (query) dans la console. Il met bien qu'il va chercher l'image, son chemin dans mes dossiers.

Mais je vais chercher du coté requête :)

Merci encore ! :)

-
Edité par Zhass 2 avril 2017 à 0:35:46

GannoN

2 avril 2017 à 1:26:46

Dans la console du navigateur ? Parce que oui, le navigateur va cherche l'image, mais le serveur ne fait pas la différence entre index.html et tonimage.png, il renvoie toujours le contenu de index.html

Voila un exemple qui marche, et qui gère le cas d'une image (but.png)

    var port = 8080;
    var http = require("http");
    var url = require("url");
    var fs = require("fs");
    
    var html = '<html><body>Text blablabla <img src="but.png"></body></html>'

    http.createServer(function(request, response) { 
        let url = request.url
        
        // on gere le cas de index.html
        if (url === '/' || url === '/index.html') {
          response.writeHeader(200, {"Content-Type": "text/html"}); 
          response.write(html); 
          response.end();
          return
        }
        
        // on gere le cas de but.png
        if (url === '/but.png') {
          fs.readFile('but.png', function (err, content) {
              if (err) {
                  response.writeHead(500, {"Content-Type": "text/plain"});
                  response.write("500 Internal Error");
                  response.end();
                  return 
              }  
              response.writeHeader(200, {"Content-Type": "image/png"}); 
              response.write(content); 
              response.end();
          });
          return
        }
        
        // Sinon, la resource n'existe pas ?
        response.writeHead(404, {"Content-Type": "text/plain"});
        response.write("404 Not found");
        response.end();
        
        // Bien sûr, il faut pas faire comme ça
        // on utilise fs.exist avec url pour verifié si le contenu est dispo dans le dossier public
        // si oui : On lie le fichier et l'envoie a l'utilisateur
        // sinon on retourne une erreur 404 
  
    }).listen(port);

Alors bien sur, ne fait pas çà pour tout les fichiers, il faut le faire dynamiquement !

-
Edité par GannoN 2 avril 2017 à 1:28:03

Zhass

2 avril 2017 à 15:16:19

Ah d'accord je voie Merci beaucoup pour ton aide !

C'est plus claire maintenant

Mais quand tu dis, il faut le faire dynamiquement au lieu de checker les url à chaque fois, c'est avec express ?

Ah et j'ai un autre soucis Enfaite je suis en train de faire le TP SuperChat de OC sur NodeJS et j'aimerais séparer la page de connexion et la page de chat, faire une vraie page de connexion en html avec un formulaire simple.

Mais mon problème c'est d"ouvrir la page chat.html lorsque query.login (la valeur du formulaire pour le pseudo) est définie.

J'arrive à ouvrir la première page de connexion sans soucis (index.html) avec fs.readFileSync mais je n'arrive pas à "effacer" index.html de la page web pour ouvrir chat.html contenant le chat entier.

Merci d'avance, et désolé pour toutes ces questions mais je suis un peux perdu sur les responses la

-
Edité par Zhass 2 avril 2017 à 15:54:22

GannoN

3 avril 2017 à 0:07:33

Re,

Mais quand tu dis, il faut le faire dynamiquement au lieu de checker les url à chaque fois, c'est avec express ?

Non, pas forcement avec expressJS. Tu peut le faire tout seul, surtout si c'est pour t’entraîner.
Il faut juste a parti de l'url, regarde sur le fichier correspondant existe sur le server. Si oui, tu l'envoie, sinon tu envoie une erreur.

URL = index.html , Je regarde si il a le fichier index.html, Si oui j'envoie, sinon je retourne une erreur type 404
URL = xxxxx, je regarde si le fichier xxxx existe, Si oui j'envoie, sinon je retourne une erreur type 404

Pour ta 2éme questions, personnellement je mettrais tout dans la page index.html. Suivant si utilisateur est enregistré ou pas, je cache les elements avec javascript. ( elem.style.display = 'block' or 'none' )

Apres, tu peut aussi redirigé l'utilisateur a la connexion, ta plusieurs solution

Zhass

4 avril 2017 à 12:16:01

Re,

D'accord c'est plus clair Merci à toi !

Je vais faire ce chat alors

Bonne continuation.

2free

15 janvier 2018 à 13:47:09

Voir en exemple le lien suivant

http://loopstools.com/rubrique/NodeJS/Lire-des-fichiers-avec-NodeJS

pour lire un fichier HTML avec NodeJS