vuminh224/ipd-tp-7
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add chat client

Browse Source
This commit is contained in:
Yoann
2024-04-01 23:17:04 +02:00
parent 967d271ee5
commit a8698f0bee
2 changed files with 88 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/main/webapp/chat.html Normal file
View File

@@ -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>

66
src/main/webapp/js/main.js Normal file
View File

@@ -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();
});