res.sendfile

ExpressJS/Node.js

Le problème exposé dans ce sujet a été résolu.

Bonjour, j’ai le contenu d’un fichier js (server.js) :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const express = require('express'); // Inclusion de ExpressJS
const fs = require('fs'); // Inclusion de fs (fs.readfile)
const path = require("path");
var app = express(); // Utilisé pour app.get/put/delete/post
var port = 9500; // On définit la valeur du port sur 9500


// URL
app.get('/api', function (req, res) {

// On lit le ficher time.json dans TimeBot/json/time.json. Puis, on envoie "timestamp" dans le res.send.

let ts = fs.readFileSync('./TimeBot/json/time.json', { encoding: 'utf-8' });
res.send(JSON.parse(ts));


   //let ts = fs.readFileSync('./TimeBot/json/time.json');
    //res.send(ts);

});

app.get('/', function (req, res){
      res.send("va pas ici, y'a rien. Va plutôt à cette adresse : http://localhost:9500/api");
});



app.get('/',function(req,res){
     res.sendFile('./test.html');

});


// Port sur lequel est lu le serveur, soit 9500
app.listen(port, function(err){
    if (err) throw err;
    console.log("nickel !");
});

Cependant, j’aimerais pouvoir l’afficher sur une page html, j’ai vu sur la doc, que la méthode res.sendfile pourrais me correspondre, mais j’ai essayé des dizaines de fois, et rien n’y fait..

méthode res.sendfile :

1
2
3
4
app.get('/',function(req,res){
     res.sendFile('./test.html');

});

DOC ExpressJS/Node.js

Au cas où vous aurez besoin de mon arborescence : Arborescence

PS : Ceci est mon premier post sur ce forum, si quelque chose n’est pas correct, dites-le moi :)

Merci et bonne journée/soirée !

+0 -0

PS : Ceci est mon premier post sur ce forum, si quelque chose n’est pas correct, dites-le moi :)

Merci et bonne journée/soirée !

Awoken

Tu as oublié d’expliquer ce que tu souhaites faire avec ton code. Et de nous dire ce que tu obtiens.

A-312

J’ai fais un bot Discord, lorsqu’un utilisateur fait la commande "!live (hh:mm:ss) cela calcule le timestamp (temps en millisecondes) de l’heure à laquelle l’utilisateur à écris la commande et l’heure à laquelle le format hh:mm:ss est déstiné. Ce timestamp est relié à un fichier json qui appraît sur mon serveur .

apparition du timestamp sur mon serveur

Le truc, c’est que j’aimerais crée un fichier html et pouvoir relier le contenu de cette page à la page html.

Merci.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
app.get('/', function (req, res){
      res.send("va pas ici, y'a rien. Va plutôt à cette adresse : http://localhost:9500/api");
});



app.get('/',function(req,res){
     res.sendFile('./test.html');

});

Tu peux pas mettre 2 ressources à la même adresse.

+0 -0

Tu peux pas mettre 2 ressources à la même adresse.

victor

Effectivement, mais j’obtiens cette erreur :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
TypeError: path must be absolute or specify root to res.sendFile
    at ServerResponse.sendFile (C:\Users\admin\Desktop\addon\MonAPI\node_modules\express\lib\response.js:410:11)
    at C:\Users\admin\Desktop\addon\MonAPI\server.js:24:10
    at Layer.handle [as handle_request] (C:\Users\admin\Desktop\addon\MonAPI\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Users\admin\Desktop\addon\MonAPI\node_modules\express\lib\router\route.js:137:13)
    at Route.dispatch (C:\Users\admin\Desktop\addon\MonAPI\node_modules\express\lib\router\route.js:112:3)
    at Layer.handle [as handle_request] (C:\Users\admin\Desktop\addon\MonAPI\node_modules\express\lib\router\layer.js:95:5)
    at C:\Users\admin\Desktop\addon\MonAPI\node_modules\express\lib\router\index.js:281:22
    at Function.process_params (C:\Users\admin\Desktop\addon\MonAPI\node_modules\express\lib\router\index.js:335:12)
    at next (C:\Users\admin\Desktop\addon\MonAPI\node_modules\express\lib\router\index.js:275:10)
    at expressInit (C:\Users\admin\Desktop\addon\MonAPI\node_modules\express\lib\middleware\init.js:40:5)

app.get(’/’,function(req,res){ res.sendFile(’./test.html’);

}); ```

+0 -0

Ok, essayons autre chose. Ton beau-frère a une place de park. Une seule.

Il parque son Audi tunée avec des néons verts sur cette place. Puis il te dit d’y parquer ta Citroën. Tu lui dis "Il y a déjà une voiture parquée !". Il te répond : "Oui mais c’est une Audi".


TypeError: path must be absolute or specify root to res.sendFile

Yes, because path must be absolute. Or specify root.

+0 -0

Ok, essayons autre chose. Ton beau-frère a une place de park. Une seule.

Il parque son Audi tunée avec des néons verts sur cette place. Puis il te dit d’y parquer ta Citroën. Tu lui dis "Il y a déjà une voiture parquée !". Il te répond : "Oui mais c’est une Audi".


TypeError: path must be absolute or specify root to res.sendFile

Yes, because path must be absolute. Or specify root.

victor

Tu veux que je fasse un code ? J’ai pas trop compris ce que je dois faire avec le code .

PS : Y’a un Discord pour zds ou pas ?

Ce que vhf essaye de te faire comprendre c’est que tu dois mettre le chemin complet vers le fichier C:\Users\...\Mon api\tonfichier.html 1 et non le chemin relatif ./tonfichier.html.


Le truc, c’est que j’aimerais crée un fichier html et pouvoir relier le contenu de cette page à la page html.

Merci.

Awoken

Ensuite pour ce qui est de la façon de faire. Tu as deux solutions pour faire ce que tu souhaites faire.

Solution 1

Soit tu envoies une page HTML statique qui interroges /api avec une requête ajax. Via le code suivant :

1
2
3
$.getJSON( "/api", function( data ) {
  document.write(data.timestamp);
});

Solution 2

Soit tu utilises un moteur de templates avec ejs qui génère un rendu dynamique.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
// Pense à installer le package "ejs", avec `npm install ejs`

app.set('view engine', 'ejs');

//...

app.get('/', function(req, res) {
  try {
    //>> Tu peux améliorer ce code en gardant la valeur timestamp en mémoire.
    let ts = fs.readFileSync('./TimeBot/json/time.json', { encoding: 'utf-8' });
    res.render('index', { timestamp: JSON.parse(ts).timestamp });
    //<<
  } catch {
    res.send("error");
  }
});

Il faut toujours utiliser JSON.parse(ts) dans try { } catch { } comme cette exemple. Surtout s’il s’agit d’une application de type serveur. Quand JSON.parse n’est pas content il envoie une exception qui ferme l’application.

index.ejs :
1
2
3
4
5
6
<html>
  <head><title>Timestamp</title></head>
  <body>
    welcome <%= timestamp %>;
  </body>
</html>

  1. Pense à double tes anti-slash : "C:\\Users\\...\\Mon api\\tonfichier.html"

index.ejs :
1
2
3
4
5
6
<html>
  <head><title>Timestamp</title></head>
  <body>
    welcome <%= timestamp %>``;
  </body>
</html>

C’est un fichier ejs ou html ça ? J’ai l’impression que c’est un fichier html, mais t’as mis des commandes que j’ai jamais vu à l’intérieur.

Et, à ce code, la deuxième accolade est souligné :

1
  } catch {
+0 -0

Ejs est un moteur de template. Il permet de rendre un fichier html statique, en fichier html dynamique.

Par exemple tu as 3 utilisateurs : Marc, Michel et Pascal. Si tu crées ton fichier .html comme ceci :

1
2
3
4
5
6
<html>
  <head><title>Hello word</title></head>
  <body>
    Salut Michel.
  </body>
</html>

Il va afficher "Salut Michel" pour les trois. Alors que si tu utilises un moteur de template (ejs par exemple). Tu vas obtenir :

1
2
3
4
5
6
<html>
  <head><title>Hello word</title></head>
  <body>
    Salut <%= user %>.
  </body>
</html>

<%= user %> est une variable que ton moteur de template (ejs) va transformer en fonction de la valeur que tu indiques, donc soit : Marc, Michel ou Pascal. Ainsi tu obtiens un fichier html dynamique (donc laisse le .ejs).


Le catch est souligné car ton IDE n’est pas content de la syntaxe. La syntaxe correcte/conseillée est la suivante, où e est une variable.

1
  } catch (e) {
+0 -0

Ejs est un moteur de template. Il permet de rendre un fichier html statique, en fichier html dynamique.

Par exemple tu as 3 utilisateurs : Marc, Michel et Pascal. Si tu crées ton fichier .html comme ceci :

1
2
3
4
5
6
<html>
  <head><title>Hello word</title></head>
  <body>
    Salut Michel.
  </body>
</html>

Il va afficher "Salut Michel" pour les trois. Alors que si tu utilises un moteur de template (ejs par exemple). Tu vas obtenir :

1
2
3
4
5
6
<html>
  <head><title>Hello word</title></head>
  <body>
    Salut <%= user %>.
  </body>
</html>

<%= user %> est une variable que ton moteur de template (ejs) va transformer en fonction de la valeur que tu indiques, donc soit : Marc, Michel ou Pascal. Ainsi tu obtiens un fichier html dynamique (donc laisse le .ejs).


Le catch est souligné car ton IDE n’est pas content de la syntaxe. La syntaxe correcte/conseillée est la suivante, où e est une variable.

1
  } catch (e) {
A-312

Ok, merci c’est plus clair. Cependant, j’obtiens ceci : https://image.noelshack.com/fichiers/2017/28/4/1499958051-capture.png

+0 -0

Tu as ajouté app.set('view engine', 'ejs'); ?

EDIT :

app.set('view engine', 'ejs'); Permet d’éviter de mettre l’extension pour les fichiers .ejs.

Tu dois ajouter :

  • app.engine('ejs', require('ejs').renderFile);.

Pour le moteur de rendu traite le rendu.

A-312

Cela me donne toujours le même résultat.

Et y’a un Discord ou pas ? J’ai toujours pas eu de réponse :p

+0 -0

EDIT 2 :

Je viens d’essayer et le code suivant fonctionne avec l’url http://127.0.0.1:9500/. Le template doit être mit dans ./views/index.ejs.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const express = require('express');
var app = express();
var port = 9500;

app.set('view engine', 'ejs');

app.get('/', function(req, res) {
  res.render('index', { timestamp: +new Date() });
});

app.listen(port);
+0 -0

EDIT 2 :

Je viens d’essayer et le code suivant fonctionne avec l’url http://127.0.0.1:9500/. Le template doit être mit dans ./views/index.ejs.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const express = require('express');
var app = express();
var port = 9500;

app.set('view engine', 'ejs');

app.get('/', function(req, res) {
  res.render('index', { timestamp: +new Date() });
});

app.listen(port);
A-312

Je sais pas bien comment t’expliquer ce que je veux faire, ce sera mieux si tu voyais mon bot, tu ne veux pas venir sur mon discord ? Tu peux partir ensuite si tu veux, c’est vraiment juste pour te montrer.

TypeError: path must be absolute or specify root to res.sendFile

Yes, because path must be absolute. Or specify root.

victor

Tu veux que je fasse un code ? J’ai pas trop compris ce que je dois faire avec le code .

PS : Y’a un Discord pour zds ou pas ?

Awoken

Non je veux pas que tu fasses un code, je veux que tu lises le message d’erreur que tu nous as donné. Il explique précisément pourquoi ton code fonctionne pas. Il est tellement explicite et précis qu’après que tu l’as copié-collé pour nous le montrer, je te l’ai copié-collé pour te le montrer.

Je sais pas ce que c’est Discord donc je vais dire que non, y’a pas. :)

+0 -0

TypeError: path must be absolute or specify root to res.sendFile

Yes, because path must be absolute. Or specify root.

victor

Tu veux que je fasse un code ? J’ai pas trop compris ce que je dois faire avec le code .

PS : Y’a un Discord pour zds ou pas ?

Awoken

Non je veux pas que tu fasses un code, je veux que tu lises le message d’erreur que tu nous as donné. Il explique précisément pourquoi ton code fonctionne pas. Il est tellement explicite et précis qu’après que tu l’as copié-collé pour nous le montrer, je te l’ai copié-collé pour te le montrer.

Je sais pas ce que c’est Discord donc je vais dire que non, y’a pas. :)

victor

Le chemin doit être absolu ou spécifié à res.sendFile

(Je comprends pas bien l’anglais, c’était approximatif)

Et Discord c’est un réseau social plutôt sympa, vous devrez y penser le staff. Votre communauté serais plus active si y’avait un moyen de parler entre nous :)

https://discordapp.com/

+0 -0

Le chemin doit être absolu ou spécifié à res.sendFile

Presque. Le chemin doit être absolu, ou alors tu dois lui donner le paramètre root : https://expressjs.com/en/api.html#res.sendFile

Du coup tu sais quoi faire pour régler le problème.

Et Discord c’est un réseau social plutôt sympa, vous devrez y penser le staff. Votre communauté serais plus active si y’avait un moyen de parler entre nous :)

Awoken

On est plusieurs sur le canal IRC non-officiel de ZdS depuis le début de ZdS, et le staff n’a pas envie de modérer un truc hors du site. ;)

+0 -0

Le chemin doit être absolu ou spécifié à res.sendFile

Presque. Le chemin doit être absolu, ou alors tu dois lui donner le paramètre root : https://expressjs.com/en/api.html#res.sendFile

Du coup tu sais quoi faire pour régler le problème.

Et Discord c’est un réseau social plutôt sympa, vous devrez y penser le staff. Votre communauté serais plus active si y’avait un moyen de parler entre nous :)

Awoken

On est plusieurs sur le canal IRC non-officiel de ZdS depuis le début de ZdS, et le staff n’a pas envie de modérer un truc hors du site. ;)

victor

Ok, je vais essayé. Mais j’ai un peu de mal avec les chemins, je peux avoir une petite explication svp ?

Si vous pouviez venir sur mon discord, ce serait sympa, vous quittez après si vous voulez. Car j’ai du mal à expliquer ici, j’aimerais poster mon code mais il faudrait que je recommence tout le topic :/

Sinon, je vais essayer d’être un peu plus clair :

Dans cette arborescence : Image utilisateur J’ai le fichier server.js qui est dans : Bureau > addon > MonAPI > server.js et le fichier popup.html qui se trouve dans : Bureau > addon > MonAPI > Extension_Chrome > popup.html

Et j’aimerais pouvoir mettre le contenu du fichier server.js dans le fichier popup.html

+0 -0

C’est bon !!! Problème résolu Si quelqu’un cherche comment faire :

1
    Server.js :
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
const express = require('express'); // Inclusion de ExpressJS
const fs = require('fs'); // Inclusion de fs (fs.readfile)
const path = require("path");
var app = express(); // Utilisé pour app.get/put/delete/post
var port = 9500; // On définit la valeur du port sur 9500
app.set('view engine', 'ejs');

// URL
app.get('/api', function (req, res) {

// On lit le ficher time.json dans TimeBot/json/time.json. Puis, on envoie "timestamp" dans le res.send.

let ts = fs.readFileSync('./TimeBot/json/time.json', { encoding: 'utf-8' });
res.send(JSON.parse(ts));


});

app.get('/', function (req, res){
      res.send("va pas ici, y'a rien. Va plutôt à cette adresse : http://localhost:9500/api");
});


app.get('/', function(req, res) {
  try {
    //>> Tu peux améliorer ce code en gardant la valeur timestamp en mémoire.
    let ts = fs.readFileSync('./TimeBot/json/time.json', { encoding: 'utf-8' });
    res.render('index', { timestamp: JSON.parse(ts).timestamp });
    //<<
  } catch (e) { 
    res.send("error");
  }
});


// Port sur lequel est lu le serveur, soit 9500
app.listen(port, function(err){
    if (err) throw err;
    console.log("nickel !");
});

Arborescence : Image utilisateur

J’ai un bot Discord derrière où une commande disponible est "!live hh:mm:ss" et le timestamp (temps en millisecondes) définis le temps en millisecondes qu’il y a entre l’heure ou l’utilisateur à tapé la commande l’heure à laquelle l’utilisateur à défini l’heure. (je sais pas si vous me comprenez xD)

Donc si vous tapez ce code et que vous n’avez pas tout comme moi c’est normal !

Merci et bonne journée/soirée !!

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte