Jump to content
  • 0
Melde dich an, um diesem Inhalt zu folgen  

Inhalt eines JS Objektes via express fetch an node.js server senden?

Frage

Hallo liebes Forum, ich habe das ganze Internet nach einer passenden Erklärung abgegrast. Leider ohne erfolg.

Ich habe ein kleines Spiel (js/html/css) gemacht:

  • index.html 
  • game.html & game.js (Spielroutine und zwischenspeichern der Punkte)
  • end.html & end.js (Darstellung der gesammelten Punkte, abspeichern von Namen und Punkte in localstorage)

Das funktioniert alles ohne Probleme. Der Code ist auch sehr kurz. Vor allem deshalb, weil ich lernen möchte, wie Daten durch einen MEAN-Stack gereicht werden. Deshalb will ich als nächstes, dass die Punkte nicht auf der client-seite im Browser localstorage gespeichert werden, sondern auf einem Server.

Dafür habe ich nodejs installiert und in VS Code npm init + npm install nodemon express body-parser gemacht.

Damit bin ich so weit gekommen, dass ich die Spiel Resourcen über den Node Server bereitgestellt werden und abgerufen werden können. Leider funktioniert das überhaupt nicht, wenn ich irgendwo, egal wo, auf der index.html, in der end.js Datei einen fetch request einbaue. Da tut sich überhaupt nichts. Zum Beispiel:

Aus der end.js datei:

saveHighScore = e => {
    console.log("clicked the save button!");
    e.preventDefault();
 
    const score = {
        score: mostRecentScore,
        name: username.value
    };
 
    fetch('/scoreSubmit', {
        method: 'POST',
        body: JSON.stringify(score),
        headers: {'Content-Type': 'application/json'},
    })
 
    localStorage.setItem("highScores", JSON.stringify(highScores));
    window.location.assign("/");
};
 
Aus der app.js Datei für den Node Server:
 
const express = require("express");
const app = express();
const bodyParser = require('body-parser');
app.listen(3000);
app.use(express.static("public"));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
 
app.post('/scoreSubmit', function(request, response) {
        const score = request.body.score;
        console.log(score);
});

Ich komme mit dem ganzen nicht weiter. Kann mich hier jemand bitte in die richtige Richtung schicken? Ich bin tatsächlich etwas am verzweifeln.

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen

5 Antworten auf diese Frage

Empfohlene Beiträge

  • 1

Warum machst du aus deinem Object welches du senden möchtest einen String?

Und schau dir mal den gesamten Body an serverside. Außerdem kannst du auch deine Node Applikation testen mit dem Programm Postman. Hier kannst du deine URL eingeben deiner API und dieser dann bei einem POST Request test Daten übermitteln.

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
  • 0
vor 5 Stunden schrieb yuah:

Warum machst du aus deinem Object welches du senden möchtest einen String?

Interessante Frage. Ich mache das, weil es überall so gemacht wird. Und wenn ich es nicht mache der Server damit scheinbar nichts anfangen kann (undefined). Laut W3School zB können per HTTP Daten an Web Server nur im String-Format übermittelt werden.

Auf Stackoverflow schrieb jemand auch folgenges:
 

Zitat

HTTP doesn't communicate in binary, so you can't send objects back and forth. Instead, they need to be converted to some text-based system. (Base64 is pretty common...there are others). JSON is not required, but it is common for HTTP communications because it is easy to convert to and from JavaScript objects.

Interessante Sache. Der Body-Teil der HTTP-Anfrage scheint im String-Format zu sein und es erforderlich zu machen, dass wir die Daten stringifizieren. Intuitiv würde ich sagen, dass man das alles wahrscheinlich auch anders lösen kann. Aber die Leute benutzen json.stringify, es funktioniert und mehr muss ich mich damit nun erst einmal auch nicht aufhalten.

Nochmal Danke und liebe Grüße!

bearbeitet von Schnuggenfuggler

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
  • 0
Falls es jemanden interessiert, der Vollständigkeit halber (ist immer schlimm, wenn jemand die Lösung nicht teilt) außerdem hat sich ggü zu oben doch einiges geändert:
 
Client code:
 
const API_URL = "http://localhost:5000/submitScore";
saveHighScore = e => {
  console.log("clicked the save button!");
  e.preventDefault();
  const score = {
    score: mostRecentScore,
    name: username.value
  };
  fetch(API_URL, {
    method:"POST",
    body: JSON.stringify(score),
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json"
    }
  });
 
node server:
 
const express = require("express");
const cors = require("cors");
const app = express();
app.use(cors());
app.use(express.json());
app.get("/", (req,res) => {
  res.json({
    message:'Test'
  });
});
app.post("/submitScore", (req,res) => {
  console.log(req.body);
  console.log("request came in");
});
 
Server Terminal:
{ score: '20', name: 'asdasdasdasdasd' }
request came in
bearbeitet von Schnuggenfuggler

Diesen Beitrag teilen


Link zum Beitrag
Auf anderen Seiten teilen
Gast
Diese Frage beantworten...

×   Du hast formatierten Text eingefügt.   Formatierung jetzt entfernen

  Only 75 emoji are allowed.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Clear editor

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Melde dich an, um diesem Inhalt zu folgen  

Fachinformatiker.de, 2020 SE Internet Services

fidelogo_small.png

if_icon-6-mail-envelope-closed_314900.pnSchicken Sie uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App


Get it on Google Play

Kontakt

Hier werben?
Oder senden Sie eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...

Wichtige Information

Fachinformatiker.de verwendet Cookies. Mehr dazu in unserer Datenschutzerklärung