Wie eine Chatprotokoll realisieren?

[SyntaxTalksToMe]

Guten Abend,

ich arbeite gerade zum Üben an einem kleinen Chatprogramm. Das ganze habe ich mit JavaEE, Servlets, HTML, CSS und einem Tomcat Server bewerkstelligt.
Soweit funktioniert alles. Jetzt habe ich gerade an der eigentlichen Chat-Oberfläche angefangen zu bauen.

Ich hatte es mir so vorgestellt, dass die Chatnachrichten in einer SQL Datenbank gespeichert werden. Logt sich ein User ein, sollen die letzten 20 Chatnachrichten angezeigt werden die in der Datenbank stehen.

Jetzt hänge ich gerade an dem Chatprotokoll, wo alle Nachrichten was die User absenden, stehen. Ich weiß nicht wie ich das am besten umsetze. Mein erster Gedanke war eine Textarea. Der springende Punkt ist, wie ich quasi den Datenbankinhalt in der Textarea anzeigen kann.

Mittlerweile habe ich aber das Gefühl, dass ich eventuell generell eine falsche Herangehensweise an die Sache habe.

Hat da jemand eine Idee? 🙂

Ich danke im Voraus

 

[abc66]

Ich denke, eine JList oder ein JTree wäre für die Darstellung der Nachrichten hierbei besser.

 

[kneitzel]

Ich habe Dich jetzt so verstanden, dass Du eine HTML Oberfläche aufbauen möchtest. Textarea kann zwar durchaus auch funktionieren aber ich halte es für problematisch, da hier die Styling Möglichkeiten per CSS gering sind.

Als Lösung sehe ich hier ggf. eine Tabelle (table). Das hat aus meiner Sicht den Vorteil, dass es direkt eine funktionale Ansicht bietet und du kannst dynamisch Zeilen hinzufügen oder entfernen (Falls Du nicht immer die Seite neu laden willst).

Flexibler ist wohl der Ansatz, wie ihn nach meinem Verständnis Bootstrap gemacht hat. Da werden die Daten einfach in divs aufgeteilt und dann kann man sich am CSS austoben und so ... Siehe z.B. https://www.w3schools.com/bootstrap/default.asp

Wenn man eine Tabelle nutzt, dann sind evtl. auch Lösungen interessant, die hier viele Bearbeitungsoptionen erlauben. Da habe ich dann Libraries wie https://mottie.github.io/tablesorter/docs/ (Da gibt es aber ganz viele Libraries ... https://ourcodeworld.com/articles/read/619/top-7-best-table-sorter-javascript-and-jquery-plugins gibt da auch eine Auswahl.)
Aber sowas braucht man nicht wirklich zwingend. Evtl. die Möglichkeit, einzelne Elemente zu löschen oder so. Aber das ist auch selbst relativ einfach selbst zu entwickeln. Daher bin ich hier jetzt erst einmal unsicher, ob so eine Library eingesetzt werden sollte... Aber könnte sinn machen, wenn man z.B. die Filter und Suchen haben will oder einige Lösungen bieten auch ein Gruppieren und so ...)

 

[thecain]

Einfach spans oder divs untereinander und dann stylen. Tabelle finde ich unpassend, da Chatnachrichten mMn keine tabelarischen Daten sind.

 

[SyntaxTalksToMe]

Als Lösung sehe ich hier ggf. eine Tabelle (table). Das hat aus meiner Sicht den Vorteil, dass es direkt eine funktionale Ansicht bietet und du kannst dynamisch Zeilen hinzufügen oder entfernen (Falls Du nicht immer die Seite neu laden willst).

Das hier wäre mir wichtig, dass die Seite nicht neu geladen werden muss.
Gut, ich danke allen für die Antworten.

Dazu hätte ich aber noch zwei Fragen:

1. Wie synchronisiere ich dann so eine Table mit einer Datenbank? Muss ich mich da in JSON bzw JavaScript einarbeiten oder geht das auch so irgendwie 🙂
2. Wie kann man auf auf HTML Tags zugreifen im Java-Code? Läuft das über diese .getDocument Klasse?

 

[kneitzel]

Da solltest Du Dich auf jeden Fall in JavaScript einlesen. Hier wäre es aus meiner Sicht wichtig, dass man sich auf ein grundlegendes Framework festlegt oder, falls man dies nicht möchte, zumindest jQuery nutzt. (Das vereinfacht die Zugriffe auf die Elemente enorm).

Bezüglich der Synchronisierung: da kommt dann AJAX (Asynchron Javascript And Xml) ins Spiel - siehe z.B. https://www.w3schools.com/xml/ajax_intro.asp Bezüglich des "XML" im Namen nicht irritieren lassen - generell kann da alles übertragen werden auch einfacher Text oder JSON oder was auch immer 🙂.

Aber evtl. haben da andere, die mehr mit Frontends machen / gemacht haben, besser. Wegen meiner Unerfahrenheit mit CSS "missbrauche" ich durchaus auch mal eine Tabelle wie man an meiner ersten Antwort erkennen konnte. Da ist mein Ansatz halt, dass man da einen ersten "brauchbaren" Ansatz hat um Daten zu sehen.

 

[thecain]

jQuery hat mit dem aktuellen Stand von JavaScript keinen Use Case mehr. Moderne Browser bieten die fetch Api. Sonst gibt es noch Websockets, welche für Chats gut geeignet sind.
Mir scheint aber dein aktueller Wissenstand noch etwas tief für so ein Projekt. Ich würde mich mal ein bisschen in die Themen vertiefen, da hast du mehr davon, als jetzt etwas hinzubasteln.

 

[kneitzel]

jQuery hat mit dem aktuellen Stand von JavaScript keinen Use Case mehr.

Ahh ok, das ist interessant. Das zeigt, wie sehr mein Wissensstand da doch veraltet ist. Aber ich bin halt vor allem im Backend Bereich unterwegs und habe mit den Frontends relativ wenig zu tun ... Daher auf jeden Fall Danke für den Hinweis und die Korrektur!

 

[SyntaxTalksToMe]

Ist die Kombination JavaEE, html, css und sql unüblich?

Ich würde mich gerne auf eine Sache konzentrieren. Es sagt nur gefühlt jeder etwas anderes was man tun sollte.

Ich möchte zukunftsträchtige Programmiersprachen und Skriptsprachen lernen und nicht auf jeden Hype anspringen.

JavaEE, html, css und Javascript ergänzen sich doch, oder?

 

[mihe7]

Ist die Kombination JavaEE, html, css und sql unüblich?

Nein.

JavaEE, html, css und Javascript ergänzen sich doch, oder?

Ja.

 

[SyntaxTalksToMe]

Nein.

Ja.

Perfekt 🙂

Also dann javascript lernen.

 

[mihe7]

Also dann javascript lernen.

JS ist nicht schwer, es verzeiht vieles und einfache Dinge kann man nach ein paar Minuten umsetzen.

Hier mal kurz was zusammengeschustert:

<html>
<body>
<input id="message" type="text" />
<div id="proto"></div>
<script>
'use strict';

// Protokoll-Funktionalitaet
  const proto = document.getElementById("proto")
  function addChatMessage(msg) {
      let elem = document.createElement("div")
      elem.innerText = msg
      if (proto.children.length >= 5) {
          proto.removeChild(proto.firstChild)
      }
      proto.appendChild(elem)
  }

// Verbindung zum UI

  const inputField = document.getElementById("message")
  inputField.addEventListener("keydown", e => {
      if (e.keyCode == 13) {
          addChatMessage(inputField.value);
          inputField.value = ""
      }
  });
</script>
</body>
</html>

 

[SyntaxTalksToMe]

Besten Dank dir für deine Mühe. Echt spitze von dir! Ich hatte angeommen die Schnittstelle läuft über eine JavaClass, worauf das HTML zugreift. Aber jetzt ist es klar.

Auf dem ersten Blick nehme ich an, wird ein Div erstellt. Aus diesem Div erzeugst du ein Object in JavaScript. Anschließend fügst du einen beliebigen Text über die Objekteigenschaft hinzu.

Der Listener überprüft ob Tastenanschläge stattfinden und werden als Parameter der Function bzw Methode hinzugefügt.

Ich hatte mich die letzten Monate mit HTML und CSS beschäftigt und dann mit JavaEE. ich wollte nicht soviele Baustellen gleichzeitig eröffnen. Aber da alles zusammenhängt, muss alles am besten gleichzeitig wachsen.

 

[mihe7]

Ich hatte angeommen die Schnittstelle läuft über eine JavaClass, worauf das HTML zugreift. Aber jetzt ist es klar.

Das ginge auch. Das oben war einfach nur ein Beispiel für JavaScript, bei dem Texte in ein div der Seite eingefügt werden. Wenn Du lieber auf dem Server bleibst, sollte das auch z. B. per JSF (f:websocket und @Push) funktionieren, oder über periodisches Polling (Primefaces p:poll).

Auf dem ersten Blick nehme ich an, wird ein Div erstellt. Aus diesem Div erzeugst du ein Object in JavaScript. Anschließend fügst du einen beliebigen Text über die Objekteigenschaft hinzu.

Ja, das sind normale DOM-Operationen (das HTML-Dokument liegt im Browser als DOM-Baum vor und dieser kann manipuliert werden). In addChatMessage wird also das im HTML bereits vorhandene Container-Div mit der ID "proto" rausgesucht, anschließend wird ein neues div-Element erzeugt, dessen Text-Eigenschaft einfach auf die übergebene Nachricht gesetzt wird und dieses div-Element wird dem proto-Element als Kindelement hinzugefügt. Außerdem wird dafür gesorgt, dass das erste Kindelemente (="Nachrichtenelemente") von proto entfernt wird, damit nicht mehr als 5 Nachrichten angezeigt werden.

Der Listener überprüft ob Tastenanschläge stattfinden und werden als Parameter der Function bzw Methode hinzugefügt.

Ja, es wird überprüft, ob die Returntaste (keyCode 13) gedrückt wurde, dann wird eben die Funktion aufgerufen, anschließend wird der Text aus dem Eingabefeld wieder entfernt.

Du kannst die Datei einfach abspeichern und per Browser öffnen, mit etwas Glück führt er es auch aus.