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; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
max-width: 400px; max-width: 40vh;
margin: 0 auto; margin: 0 auto;
background: #121212; background: #121212;
position: relative; position: relative;
@@ -325,7 +325,7 @@
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 35%; border-radius: 35%;
background: rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
margin-left: -15px; margin-left: -15px;
display: flex; display: flex;
@@ -662,6 +662,25 @@
const messagesContainer = document.querySelector( const messagesContainer = document.querySelector(
".messages-container", ".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() { function getCurrentTime() {
const now = new Date(); const now = new Date();
@@ -675,21 +694,15 @@
function sendMessage() { function sendMessage() {
const message = input.value.trim(); const message = input.value.trim();
if (message) { if (message) {
const messageEl = document.createElement("div"); fetch("http://localhost:8001/chat", {
messageEl.className = "message"; method: "POST",
messageEl.innerHTML = ` body: JSON.stringify({
<div class="user-avatar" style="background: linear-gradient(135deg, #32cd32, #90ee90);"></div> text: message
<div class="message-content"> }),
<div class="message-header"> headers: {
<span class="username">You</span> "Content-type": "application/json; charset=UTF-8"
<span class="timestamp">${getCurrentTime()}</span> }
</div> });
<div class="message-text">${message}</div>
</div>
`;
messagesContainer.appendChild(messageEl);
messagesContainer.scrollTop =
messagesContainer.scrollHeight;
input.value = ""; input.value = "";
} }
} }