Werte aus Datenbank anzeigen mit JS?

Hallo,

ich habe folgenden Code für mein Formular:

<form action="/message1" method="post">
  <div class="input">
    <input type="text" placeholder="Chat" id="input" name="input1">
  </div>
  <div class="send">
    <button type="submit" onclick="message();">Send</button>
  </div>
</form>

Nun noch das JS onclick-Event:

function message() {
  input = document.getElementById("input").value;
  count++;

  if (input == "") {
    alert("please type your message!");
  }
  else {
    if (count % 2 == 0) {
      let newDiv = document.createElement("div");
      newDiv.id = "divMessage";
      newDiv.style.display = "flex";
      newDiv.style.justifyContent = "flex-start";
      newDiv.style.margin = "45px";
      newDiv.style.backgroundColor = "#303032";
      newDiv.style.borderRadius = "10px";
      newDiv.style.padding = "10px";
      newDiv.style.marginTop = "80px";
      newDiv.style.color = "white";
      newDiv.style.marginBottom = "80px";
      newDiv.style.width = "120px";
      newDiv.innerHTML = input;

      let chatMessages = document.querySelector(".chat-messages");
      chatMessages.appendChild(newDiv);
    }

Und nun noch das Reinschreiben mit node.js in die MariaDB-Datenbank:

app.post('/message1', async (req, res) => {
  const input = req.body.input1;
  console.log(input);
  const conn = await pool.getConnection();
  await conn.query(`INSERT INTO test.handy (id, name) VALUES (2, '${input}')`);
  conn.release();
});

Nun möchte ich aber, das, was in die Datenbank geschrieben wurde, beim Aktualisieren der Seite immer noch im "newDiv" anzeigen. Wie geht das?

LG

Answer 1

[regex9]

Da du offensichtlich einen Chat zusammenbauen möchtest, wäre es günstiger, mit WebSockets zu arbeiten. Die erlauben einen flüssigeren Austausch, ohne dass die Seite überhaupt neu geladen werden muss.

Um die Chat-History bei Neuladen der Seite jedoch nicht zu verlieren, müsstest du den Nutzer identifizieren. Im besten Fall über einen Login. Im einfachsten Fall könntest du jedem Chat auch eine GUID zuordnen, die sich der Nutzer/Client fortan merken muss und über die er seine Chat-History wieder aufrufen kann. Jede Chat-Nachricht muss folgend in der Datenbank mit dieser GUID assoziiert werden, damit du sie wiederfindest.

Du brauchst jedenfalls einen Request Handler, der die Chat-History zurückgibt.

Beispiel:

app.get('/chat', async (request, response) => {
  const chatId = request.query.id;
  /* check if chatId is a valid GUID ... */

  const connection = await pool.getConnection();
  const query = mysql.format("SELECT message FROM messages WHERE id=?", [ chatId ]);
  const messages = await connection.query(query);
  connection.release();

  const result = // build chat history HTML ...
  return result;
});

Beachte an dieser Stelle, wie ich den SQL-Query zusammenbaue. Jeder Platzhalter (?) wird von der format-Methode maskiert, um eine sichere Anfrage zu gewährleisten. Dein INSERT-Query hingegen ist unsicher. Du gibst die Nutzereingabe ungeprüft weiter und erlaubst einem Nutzer somit, SQL-Injections durchzuführen.

Um die Chat-History zusammenzubauen, könntest du eine Template Engine verwenden.

Zuletzt noch ein paar Tipps zu deinem JavaScript (clientseitig):

1) Die meisten Variablen können als konstant gekennzeichnet werden, da sich ihr Wert nicht wieder ändert.

2) Die CSS-Properties sollten in eine CSS-Regel verlagert werden, um JavaScript- und CSS-Code strikter voneinander zu trennen. Das kommt vor allem der Übersichtlichkeit deines Projekts zugute.

In diesem Fall

newDiv.classList.add("new-message");

bräuchtest du eine Regel mit dem Klassenselektor new-message:

.new-message {
  background-color: #303032;
  display: flex;
  /* etc. ... */
}

3) Da die Nutzereingabe nur Plaintext beinhalten sollte, sollte auch das textContent-Property benutzt werden.

newDiv.textContent = input;

Beim derzeitigen Zustand würdest du dem Nutzer eine HTML-Injection über das Eingabefeld erlauben.

Answer 2

[Prowect]

Hallo,

du brauchst genauso wie du einen Datensatz einfügen kannst, auch eine Möglichkeit die bestehenden Daten abzufragen bzw. auszulesen. Dafür gibt es grundsätzlich mehrere mögliche Lösungswege.

Am besten du machst dir hierfür noch einen zusätzlichen Endpoint: /messages wo du über einen SQL Query dir die jeweiligen Nachrichten abfragst:

SELECT id, name FROM test.handy;

Anschließend kannst du die ganzen Nachrichten, die du als Response bekommst, wieder, wie schon zu vor, mittels JavaScript auf der Seite hinzufügen.

Ich möchte allerdings anmerken, dass das nicht unbedingt der Weg ist, wie man so etwas heutzutage implementiert.

Woher ich das weiß: Berufserfahrung – Fullstack Webdeveloper/in