Tutorial 7 - Anmerkungen aus Übung umgesetzt

bin/www

@@ -7,6 +7,7 @@
 var app = require('../app');
 var debug = require('debug')('chess:server');
 var http = require('http');
+var url = require('url');
 
 const WebSocket = require('ws');
 
@@ -27,7 +28,7 @@ var server = http.createServer(app);
  * Listen on provided port, on all network interfaces.
  */
 
-server.listen(port, '0.0.0.0');
+server.listen(port); // Cloudflared nutzen
 server.on('error', onError);
 server.on('listening', onListening);
 
@@ -96,7 +97,14 @@ let wsServer = new WebSocket.Server({ noServer: true });
 
 // Reagiert auf 'upgrade'-Ereignisse vom HTTP-Server. Dies ist notwendig,
 // um HTTP-Verbindungen zu WebSocket-Verbindungen zu 'upgraden'.
+
 server.on('upgrade', (request, socket, head) => {
+
+  const pathname = url.parse(request.url).pathname;
+  if (!(pathname == '/chat' || pathname == '/chat/')){
+    socket.destroy();
+    return;
+  }
   // Verarbeitet das Upgrade von HTTP zu WebSocket und etabliert die WebSocket-Verbindung
   wsServer.handleUpgrade(request, socket, head, (ws) => {
       // Emittereignis für eine neue WebSocket-Verbindung
@@ -108,12 +116,6 @@ server.on('upgrade', (request, socket, head) => {
 wsServer.on('connection', (ws) => {
   // Reagiert auf Nachrichten, die von WebSocket-Clients gesendet werden
   ws.on('message', (message) => {
-      // Überprüft, ob die empfangene Nachricht ein Objekt ist (z.B. ein Buffer)
-      if (typeof message === 'object') {
-          // Konvertiert das Objekt in einen String
-          message = message.toString();
-      }
-
       // Sendet die empfangene Nachricht an alle verbundenen WebSocket-Clients
       wsServer.clients.forEach((client) => {
           // Überprüft, ob der Client aktuell eine offene Verbindung hat

public/javascripts/webSocketChat.js

@@ -2,13 +2,24 @@ const messageHistory = document.getElementById('messageHistory');
 const messageInput = document.getElementById('messageInput');
 const sendButton = document.getElementById('sendButton');
 
+let ws;
+
 // Erstelle eine WebSocket-Verbindung
-const ws = new WebSocket('ws://localhost:3000/chat'); // URL anpassen
+if (window.location.protocol == 'https:') {
+    ws = new WebSocket("wss://" + window.location.host + '/chat');
+}
+else {
+    ws = new WebSocket("ws://" + window.location.host + '/chat');
+}
 
 // Ereignishandler für eingehende Nachrichten
-ws.onmessage = function(event) {
-    const message = event.data;
-    messageHistory.innerHTML += `<li>${message}</li>`;
+ws.onmessage = async function(event) {
+    const message = await event.data.text();
+
+    let li = document.createElement('li');
+    li.innerHTML = message;
+
+    messageHistory.appendChild(li);
     scrollToBottom(); // scoll bis zum Ende der Nachrichten
 };
 
@@ -17,6 +28,10 @@ ws.onerror = function(event) {
     console.error('WebSocket-Fehler:', event);
 };
 
+ws.onopen = function() {
+    console.log("Verbindung mit WebSocket erfolgreich.");
+}
+
 // Ereignishandler für die Senden-Schaltfläche
 sendButton.addEventListener('click', () => {
     const message = messageInput.value;

public/stylesheets/style.css

@@ -122,12 +122,14 @@ a {
   justify-content: space-between; /* trennt Nachrichtenverlauf und Eingabefeld */
   height: var(--board-scale);
   width: var(--chat-width);
-  border: 1px solid white;
+  border: 1px solid var(--square-light-color);
   padding: 10px;
 }
 
 #chatbox h1 {
   font-size: 4vmin;
+  color: var(--square-light-color);
+  border-bottom: 2px solid var(--square-light-color);
 }
 
 #messageHistory {
@@ -142,7 +144,7 @@ a {
   font-size: 2vmin;
   margin-bottom: 10px;
   padding: 5px;
-  border-bottom: 1px solid white;
+  border-bottom: 1px solid var(--square-light-color);
   word-wrap: break-word; /* ermöglicht das Umbruch von Text innerhalb der Nachrichten */
 }
 
@@ -150,4 +152,3 @@ a {
   font-size: 2.5vmin;
   margin-top: 10px; /* Abstand zwischen Nachrichtenverlauf und Eingabefeld */
 }
-

tutorial/3/tutorial_3.js

@@ -155,7 +155,7 @@
                 td.id = j + i;
                 
                 // Feldposition
-                let boardPosition = document. createElement("span");
+                let boardPosition = document.createElement("span");
                 boardPosition.className = "boardPosition";
                 boardPosition.innerHTML = j + i;
                 td.appendChild(boardPosition);