zxq5/chatapp
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

frontend now uses abckend

Browse Source
This commit is contained in:
zxq5
2025-09-30 21:02:12 +01:00
parent 834786b577
commit 1cfc5774ad
1 changed files with 30 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+30 -17
View File
@@ -23,7 +23,7 @@
display: flex;
flex-direction: column;
height: 100vh;
max-width: 400px;
max-width: 40vh;
margin: 0 auto;
background: #121212;
position: relative;
@@ -325,7 +325,7 @@
width: 32px;
height: 32px;
border-radius: 35%;
background: rgba(255, 255, 255, 0.2);
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
margin-left: -15px;
display: flex;
@@ -662,6 +662,25 @@
const messagesContainer = document.querySelector(
".messages-container",
);
const messageSource = new EventSource("http://localhost:8001/events");
messageSource.onmessage = (event) => {
const messageEl = document.createElement("div");
messageEl.className = "message";
messageEl.innerHTML = `
<div class="user-avatar" style="background: linear-gradient(135deg, #32cd32, #90ee90);"></div>
<div class="message-content">
<div class="message-header">
<span class="username">You</span>
<span class="timestamp">${getCurrentTime()}</span>
</div>
<div class="message-text">${event.data}</div>
</div>
`;
messagesContainer.appendChild(messageEl);
messagesContainer.scrollTop =
messagesContainer.scrollHeight;
}
function getCurrentTime() {
const now = new Date();
@@ -675,21 +694,15 @@
function sendMessage() {
const message = input.value.trim();
if (message) {
const messageEl = document.createElement("div");
messageEl.className = "message";
messageEl.innerHTML = `
<div class="user-avatar" style="background: linear-gradient(135deg, #32cd32, #90ee90);"></div>
<div class="message-content">
<div class="message-header">
<span class="username">You</span>
<span class="timestamp">${getCurrentTime()}</span>
</div>
<div class="message-text">${message}</div>
</div>
`;
messagesContainer.appendChild(messageEl);
messagesContainer.scrollTop =
messagesContainer.scrollHeight;
fetch("http://localhost:8001/chat", {
method: "POST",
body: JSON.stringify({
text: message
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
});
input.value = "";
}
}