Kezdőoldal » Számítástechnika » Programozás » Mi lehet a probléma ebben a...

Mi lehet a probléma ebben a HTML kódban?

Figyelt kérdés

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

}



máj. 17. 01:23
1 2
 11/19 anonim ***** válasza:
75%

"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.

máj. 17. 08:47
Hasznos számodra ez a válasz?
 12/19 anonim válasza:
79%
En csak most ismerkedek a programozassal 56 evesen, javitsatok ki ha tevedek de nekem javascriptnek tunik
máj. 17. 12:23
Hasznos számodra ez a válasz?
 13/19 anonim ***** válasza:
76%

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.

máj. 17. 13:52
Hasznos számodra ez a válasz?
 14/19 anonim válasza:
79%
Nem úgy volt, hogy már nem kellenek a fejlesztők, mert az AI már bemondásra lefejleszti a programokat?
máj. 18. 18:24
Hasznos számodra ez a válasz?
 15/19 anonim válasza:
Jó lenne egy részletesebb leírás, és ezalatt nem bemásolt code snippeteket értem. Elég spagetti egyébként a kódod, ez nemcsak HTML, hanem JavaScript. Miért nem külön fájlban kezeled? Egyébként az okozza valószínűleg a hibát, hogy nem reaktív az oldalad. De tényleg borzalmas és átláthatatlan, szóval nehéz ez alapján megmondani. Egyáltalán milyen adatbázist használsz? socket.io dokumentációját elolvastad részletesen? Told fel GitLabre vagy GitHubra az egészet, és akkor megpróbálok segíteni.
máj. 19. 11:54
Hasznos számodra ez a válasz?
 16/19 anonim válasza:
My bad, közben észrevettem a kulcsszavaid között a node.js-t, szóval az adatbázisra vonatkozó kérdésemet tekintsd tárgytalannak.
máj. 19. 11:59
Hasznos számodra ez a válasz?
 17/19 anonim válasza:

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.

máj. 19. 17:54
Hasznos számodra ez a válasz?
 18/19 anonim válasza:
41%

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.

máj. 19. 18:08
Hasznos számodra ez a válasz?
 19/19 anonim ***** válasza:
100%
A beidézett kódrészlet alkalmatlan hibakeresésre. Vagy átküldöd a teljes projektet és megmondod hogyan idézhető elő a nem várt működés vagy kidebuggolod magad és csak a hibát okozó blokkot idézed be teljes kontextussal.
máj. 21. 03:46
Hasznos számodra ez a válasz?
1 2

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

A weboldalon megjelenő anyagok nem minősülnek szerkesztői tartalomnak, előzetes ellenőrzésen nem esnek át, az üzemeltető véleményét nem tükrözik.
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!