add chat client

2024-04-01 23:17:04 +02:00
parent 967d271ee5
commit a8698f0bee
2 changed files with 88 additions and 0 deletions
--- a/src/main/webapp/chat.html
+++ b/src/main/webapp/chat.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chat en REST</title>
+</head>
+<body>
+
+<div id="chatContent">
+</div>
+
+<form name="chatForm" action="" method="POST">
+    <input type="text" name="ligne" id="ligne">
+    <button type="button" id="submitButton">ok</button>
+</form>
+
+<script src="js/main.js"></script>
+
+</body>
+</html>
--- a/src/main/webapp/js/main.js
+++ b/src/main/webapp/js/main.js
@@ -0,0 +1,66 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const rootURL = "http://localhost:8080/pr.tp.services/api";
+    let lastID = 0;
+
+    const updateMessages = async () => {
+        try {
+            const response = await fetch(`${rootURL}/messages/after/${lastID}`, {
+                method: 'GET'
+            });
+            const data = await response.json();
+            if (data !== null) {
+                const messages = Array.isArray(data) ? data : [data];
+                console.log(messages.length > 1 ? "append each message" : "append one message");
+                messages.forEach(appendMessage);
+            }
+            console.log("call update again in 1s");
+            setTimeout(updateMessages, 1000);
+        } catch (error) {
+            console.error(`updateMessages error: ${error}`);
+        }
+    };
+
+    const appendMessage = (message) => {
+        console.log(message);
+        const messageElement = document.createElement("p");
+        messageElement.textContent = `${message.id}:${message.date}>${message.content}`;
+        document.querySelector('#chatContent').appendChild(messageElement);
+
+        lastID = parseInt(message.id) + 1;
+        console.log(`${lastID} computed from ${message.id}`);
+    };
+
+    const sendMessage = async (messageContent) => {
+        try {
+            const response = await fetch(`${rootURL}/messages`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ content: messageContent })
+            });
+            const data = await response.json();
+            console.log(`create message ${data.id}`);
+        } catch (error) {
+            console.error(`sendMessage error: ${error}`);
+        }
+    };
+
+    const sendContent = () => {
+        const input = document.querySelector("#ligne");
+        const messageContent = input.value;
+        input.value = "";
+        sendMessage(messageContent);
+    };
+
+    document.querySelector("#submitButton").addEventListener("click", sendContent);
+
+    window.addEventListener("keydown", (event) => {
+        if (event.keyCode === 13) {
+            event.preventDefault();
+            sendContent();
+        }
+    });
+
+    updateMessages();
+});