Mi lehet a probléma ebben a HTML kódban?
Nem igazán értek hozzá, főleg AI-val csinálgatom... A probléma az, hogy a privát chatnél a fogadó félnek nem jelenik meg rögtön az új üzenet az ablakban (három ablak is lehet egyszerre), csak az oldal újratöltése után.
Nem küldöm el a teljes kódot csak a fontosabb részeket:
Szerver oldal:
// Üzenetek kezelése
socket.on('sendMessage', (data) => {
console.log("sendMessage event received:", data);
const { sender, receiver, message, isPrivate } = data;
db.run('INSERT INTO messages (sender, receiver, message) VALUES (?, ?, ?)', [sender, receiver, message], (err) => {
if (err) throw err;
if (isPrivate) {
// Ellenőrizzük, hogy a címzett online van-e és van-e megnyitva a privát ablaka
if (userSockets[receiver] && userSockets[receiver].sockets && userSockets[receiver].currentChatId !== null) {
userSockets[receiver].sockets.forEach(socket => {
socket.emit('newPrivateMessage', { sender, receiver, message, chatId: userSockets[receiver].currentChatId });
});
} else { // Ha a címzett offline, vagy nincs megnyitva az ablak, akkor csak egyszer mentsük el az adatbázisba
console.log('Offline címzett, üzenet elmentve az adatbázisba.');
}
// Küldő is megkapja az üzenetet, ha az ablaka nyitva van
if (userSockets[sender] && userSockets[sender].sockets && userSockets[sender].currentChatId !== null && userSockets[sender].currentChatId !== userSockets[receiver].currentChatId) {
userSockets[sender].sockets.forEach(socket => {
socket.emit('newPrivateMessage', { sender, receiver, message, chatId: userSockets[sender].currentChatId });
});
}
if (sender !== receiver) {
return;
}
} else {
io.emit('newMessage', { sender, receiver, message });
}
});
});
// Privát ablak megnyitása
socket.on('openPrivateChat', ({ sender, receiver, chatId }) => {
console.log(`${sender} megnyitotta a(z) ${receiver} felhasználónak szóló privát ablakot (chatId: ${chatId}).`);
// Hozzuk létre vagy frissítsük a felhasználó socketját
if (!userSockets[receiver]) {
userSockets[receiver] = { sockets: [socket], currentChatId: chatId };
} else {
if (!userSockets[receiver].sockets) {
userSockets[receiver].sockets = [socket];
} else {
userSockets[receiver].sockets.push(socket);
}
userSockets[receiver].currentChatId = chatId;
}
});
// Korábbi privát üzenetek lekérése
socket.on('loadPrivateMessages', ({ sender, receiver, chatId }) => {
db.all('SELECT * FROM messages WHERE (sender = ? AND receiver = ?) OR (sender = ? AND receiver = ?) ORDER BY timestamp ASC',
[sender, receiver, receiver, sender], (err, rows) => {
if (err) throw err;
// Megjelenítjük a felhasználónak az összes privát üzenetet, beleértve az általa írtakat is
socket.emit('loadPrivateMessages', { chatId, messages: rows });
});
});
});
Kliens oldal:
// Üzenet küldése
function sendMessage() {
const messageInput = document.getElementById('messageInput');
const message = messageInput.value.trim();
if (message !== '') {
const sender = document.getElementById('loginUsername').value.trim();
const receiver = '';
const isPrivate = false;
socket.emit('sendMessage', { sender, receiver, message, isPrivate });
messageInput.value = '';
}
}
// Üzenetek megjelenítése
socket.on('newMessage', (data) => {
const messagesDiv = document.getElementById('messages');
messagesDiv.innerHTML += `<p><strong>${data.sender}:</strong> ${data.message}</p>`;
messagesDiv.scrollTop = messagesDiv.scrollHeight;
});
// Korábbi üzenetek fogadása
socket.on('loadMessages', (messages) => {
const messagesDiv = document.getElementById('messages');
messagesDiv.innerHTML = '';
messages.forEach(data => {
if (!data.receiver) {
messagesDiv.innerHTML += `<p><strong>${data.sender}:</strong> ${data.message}</p>`;
}
});
messagesDiv.scrollTop = messagesDiv.scrollHeight;
});
// A kliens oldalon tároljuk a nyitott privát ablakokat
let openPrivateChats = [];
// Privát ablak megnyitása
function startPrivateChat(receiver) {
const sender = document.getElementById('loginUsername').value.trim();
if (privateChatCount < maxPrivateChatCount) {
privateChatCount++;
const privateChatDiv = document.createElement('div');
const chatId = privateChatCount; // A chatId a privát ablak sorszáma lesz
privateChatDiv.classList.add('privateChatWindow');
privateChatDiv.setAttribute('data-chat-id', chatId); // Adjunk hozzá egy adat attribútumot a chatId-hez
privateChatDiv.innerHTML = `
<div class="privateChatHeader" onclick="togglePrivateChat(this)">
<span>${receiver}</span>
<span class="closeIcon" onclick="closePrivateChat(this)">✖</span>
</div>
<div class="privateChatContent" id="privateChatContent${chatId}"></div>
<input type="text" id="privateMessageInput${chatId}" placeholder="Írd ide az üzeneted">
<button onclick="sendPrivateMessage('${sender}', '${receiver}', ${chatId})">Küldés</button>
`;
document.getElementById('chatContainer').appendChild(privateChatDiv);
openPrivateChats.push(chatId); // Adjuk hozzá a chatId-t a nyitott ablakok listájához
// Küldjük el a szervernek, hogy megnyitottunk egy privát ablakot
socket.emit('openPrivateChat', { sender, receiver, chatId });
socket.emit('loadPrivateMessages', { sender, receiver, chatId }); // Töltsük be a korábbi üzeneteket
} else {
alert('Maximum három privát ablak nyitható meg egyszerre.');
}
}
// Privát üzenet küldése
function sendPrivateMessage(sender, receiver, chatId) {
const messageInput = document.getElementById(`privateMessageInput${chatId}`);
const message = messageInput.value.trim();
if (message !== '') {
const isPrivate = true;
socket.emit('sendMessage', { sender, receiver, message, isPrivate });
messageInput.value = '';
}
}
// Üzenetek megjelenítése
socket.on('newPrivateMessage', (data) => {
const messagesDiv = document.getElementById(`privateChatContent${data.chatId}`);
messagesDiv.innerHTML += `<p><strong>${data.sender}:</strong> ${data.message}</p>`;
messagesDiv.scrollTop = messagesDiv.scrollHeight;
});
// Korábbi privát üzenetek fogadása
socket.on('loadPrivateMessages', (data) => {
const messagesDiv = document.getElementById(`privateChatContent${data.chatId}`);
messagesDiv.innerHTML = '';
data.messages.forEach(msg => {
// Megjelenítjük mindenkinek a privát üzeneteket, beleértve a sajátjainkat is
messagesDiv.innerHTML += `<p><strong>${msg.sender}:</strong> ${msg.message}</p>`;
});
messagesDiv.scrollTop = messagesDiv.scrollHeight;
});
// Privát ablak megnyitása vagy bezárása
function togglePrivateChat(header) {
header.parentElement.classList.toggle('closed');
}
// Privát ablak bezárása
function closePrivateChat(closeIcon) {
const privateChatWindow = closeIcon.parentElement.parentElement;
privateChatWindow.remove();
privateChatCount--;
}
"A kódban ez az érintett rész, minek küldjem be az egészet?"
Talán azért, mert az életemet merném tenni rá, hogy sehol nem hoztál létre chatContainer azonosítójú elemet.
"Bár nem értek hozzá, de szerintem a megoldás is valami 2-3 sor beillesztése vagy módosítása lehet."
Ha szerinted így van, akkor nem is értem, miért nem oldottad meg magad.
De szerintem te az a kategória vagy, aki nem is akarja, hogy segítsünk neki, csak beszélgetni jöttél ide.
Kezdjük ott, hogy ez Javascript, nem HTML.
AI-val pedig nem fogsz nulla tudással használható komolyabb alkalmazásokat létrehozni. A tanulási fázist nem fogod megúszni, meg kell tanulni debugolni, meg kell tanulni az alapokat mindenképp.
15, 16-os válaszoló vagyok.
Még olyan apróságok, hogy az innerHTML borzalmas megoldás, próbáld meg innerHTML-ek nélkül megoldani.
Illetve az onclickeket is átírnám, mert okozhatnak ezek is problémák.
Arról nem is beszélve, hogy elég sok rész biztonsági szempontból is problémás az ide másolt kódjaidban.
Amúgy én sem akarom letörni a szárnyaidat vagy a lelkesedésedet, kérdező, mert valahol mindenkinek el kell kezdenie, de megvannak egyáltalán a HTML, JS alapok? Te magad érted a kódodat? Ha belekérdezek, el tudod magyarázni, mi mit csinál szerinted?
Tisztelem az ambícióidat, de alapok nélkül egy chat webapp elég húzós projekt. Látod, neked is beletört a bicskád. Jegeld ezt a projektet egyelőre, és csinálj mondjuk egy reaktív to-do listát, azzal remekül gyakorolhatnád az elemek létrehozását. Csinálj kockadobós pontszámolós minijátékot, az sokat segítene a DOM megértésében. Csinálj interaktív színkeverőt. Később egyszerű webshopot. Nekem az első kis projektem anno egy fiktív ramenező volt, ahol a JSON-ben tároltam adatokat, és reaktiv módon változott az ár, hozzávalóktól és porciótól függően. Tanuld meg az alapvető biztonsági dolgokat (SQL injection, Cross-Site Scripting, stb), a legjobb praktikákat a kivédésükre. Tanuld meg a Clean Code-ot, OOP-t.
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!