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

[Gast Schnuggenfuggler]

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.

[Memento]

Guten Morgen!

Was ist die genaue Fehlermeldung?

Wird die Funktion saveHighScore() überhaupt irgendwo aufgerufen?

Hast du mal in den DevTools des Browsers geschaut, ob der Request aufgerufen wurde?

[yuah]

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.

[Gast Schnuggenfuggler]

Danke für die Hilfe.

Ich hatte eine Funktion im Code, welche den fetch request beendet hat, bevor dieser ausgeführt werden konnte bzw an den Server übermittelt werden konnte.

 

[Gast Schnuggenfuggler]

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 24. Februar 2020 von Schnuggenfuggler

[Gast Schnuggenfuggler]

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 24. Februar 2020 von Schnuggenfuggler