Ismerősök hozzáadása a Gondolatolvasó Zenei API-hoz: Valós idejű közösségi megosztás

Készen állsz arra, hogy a Gondolatolvasó Zenei API-dat valóban közösségivé tedd? Ebben az oktatóanyagban egy robusztus baráti rendszert és lejátszási lista megosztást fogsz hozzáadni, amely megőrzi magát az adatbázisban, így a felhasználók akkor is megtekinthetik barátaik megosztott lejátszási listáit, ha nincsenek online. A valós idejű frissítésekhez a Socket.io-t, az állandó tároláshoz pedig a MongoDB-t fogjuk használni.

Amit felépítesz

Barát rendszer – Barátok hozzáadása és kezelése felhasználónév alapján, kölcsönös barátsággal, ObjectId-k használatával
Állandó lejátszási lista megosztása – A megosztott lejátszási listák az adatbázisba kerülnek, és bármikor megtekinthetők
Valós idejű értesítések – Azonnali értesítéseket kapsz, amikor a barátok megosztanak (ha online vannak)
Aktivitás hírcsatorna – Tekintsd meg a legutóbbi baráti megosztásokat kattintható lejátszási lista előnézetekkel
Továbbfejlesztett hangulatelemzés – Intelligens lejátszási lista generálás keresési tartalékokkal

Előfeltételek

A kitöltött Gondolatolvasó Zenei API-d 2. rész
MongoDB, Node.js és npm telepítve
Spotify API hitelesítő adatok (kliensazonosító és titkos kód)
30–45 perc kódolási idő

A 2. részben felhasználói fiókokat hoztál létre hangulati előzményekkel és intelligens beállításokkal. Most pedig közösségivé tesszük! Megtanulod, hogyan kapcsolódhatsz a felhasználókhoz, hogyan oszthatsz meg lejátszási listákat valós időben és folyamatosan, és hogyan láthatod, mit hallgatnak a barátaid a hangulatuk alapján.

A kulcsfogalmak megértése

Mielőtt belemerülnénk a kódba, nézzük meg, mit is építünk:

Socket.io – Egy könyvtár, amely lehetővé teszi a valós idejű, kétirányú kommunikációt a szervered és a böngésződ között. Gondolj rá úgy, mint egy telefonhívásra szöveges üzenetek helyett – azonnal küldhetsz és fogadhatsz információkat az oldal frissítése nélkül.
Állandó tárolás – Adatok mentése a MongoDB adatbázisodba, így azok ott is maradnak, még akkor is, ha a felhasználók kijelentkeznek. Ez olyan, mintha egy fájlt a merevlemezedre mentenél, ahelyett, hogy csak a memóriában tartanád.
ObjectId referenciák – A MongoDB módja az adatok közötti kapcsolatok létrehozására. Ahelyett, hogy az összes barátod információját átmásolnád a profilodba, csak egy referenciát (például egy mutatót) tárolsz a profiljára.
Sémák – Gondolj ezekre úgy, mint tervrajzokra, amelyek meghatározzák az adataid szerkezetét. Ezek mondják meg a MongoDB-nek, hogy milyen mezőkkel kell rendelkeznie az egyes dokumentumoknak, és milyen típusú adatok kerüljenek az egyes mezőkbe.

1. lépés: A szükséges függőségek telepítése

Nyissa meg a terminált a projektkönyvtárában, és telepítse a Socket.io-t a valós idejű funkciókhoz:

npm install socket.io

Mit csinál ez: Ez a parancs letölti és telepíti a Socket.io könyvtárat a projektbe. Az npm install parancs csomagokat kér le az npm rendszerleíró adatbázisból (egy hatalmas JavaScript kódkönyvtárból), és hozzáadja azokat a node_modules mappádhoz.

A többi függőségnek (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) már telepítve kellett lennie a 2. részből.

2. lépés: Frissítsd a felhasználói modelledet közösségi funkciókkal

Mivel már létrehoztál egy felhasználói modellt a 2. részben, frissíteni fogjuk a közösségi funkciók hozzáadásával. A felhasználói modell egy sablonhoz hasonló, amely meghatározza, hogy milyen információkat tároljunk az egyes felhasználókról az adatbázisunkban.

Amit hozzáadunk:

friends tömb – ObjectId hivatkozások listája más felhasználókra. A teljes felhasználói információk tárolása helyett csak olyan azonosítókat tárolunk, amelyek az adatbázisban található más felhasználói dokumentumokra mutatnak.
sharedWith és isShared mezők – Ezek nyomon követik, hogy mely hangulatbejegyzéseket osztották meg, és kivel osztották meg azokat.
sharedPlaylistSchema – Egy új séma (tervrajz), amely meghatározza, hogy hogyan néz ki egy megosztott lejátszási lista: ki osztotta meg, milyen hangulathoz készült, a számok és mikor lett megosztva.
sharedPlaylists tömb – Egy lista, amely az összes olyan lejátszási listát tárolja, amelyet a barátaid megosztottak veled.

Cseréld le a models/User.js fájlt a következőre:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // Séma az egyes hangulatbejegyzésekhez (minden alkalommal, amikor a felhasználó létrehoz egy lejátszási listát) const moodEntrySchema = new mongoose.Schema({ text: String, // Amit a felhasználó beírt (pl. "boldognak érzem magam ma") detectedMood: String, // Az analizátor által érzékelt hangulat (pl. "boldog") confidence: Number, // Mennyire vagyunk magabiztosak (0-10) playlistGenerated: [{ // Az általunk ajánlott számok tömbje trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } // null = nincs értékelve, true = liked, false = disliked }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // Kivel osztottuk meg ezt? isShared: { type: Boolean, default: false }, // Megosztották ezt? timestamp: { type: Date, default: Date.now } // Mikor jött létre ez? }); // Séma a felhasználói beállításokhoz (kedvenc műfajok stb.) const userPreferencesSchema = new mongoose.Schema({ favoriteGenres: [String], preferredEnergyLevel: { type: Number, min: 0, max: 1 }, dislikedArtists: [String], moodMusicMapping: { happy: [String], sad: [String], energetic: [String], chill: [String], angry: [String], romantic: [String], nostalgic: [String] } }); // ÚJ: Séma a barátok által veled megosztott lejátszási listákhoz const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // ObjectId hivatkozás arra a barátra, aki megosztotta a sharedByUsername: String, // Felhasználónév az egyszerű megjelenítéshez (denormalizálva a teljesítmény érdekében) mood: String, // Milyen hangulathoz készült ez a lejátszási lista? playlist: [{ // A tényleges szám neve: String, előadó: String, album_image: String, id: String }], timestamp: { type: Date, default: Date.now } // Mikor lett ez megosztva? }); // Fő felhasználói séma - a felhasználói dokumentum szerkezetét határozza meg const userSchema = new mongoose.Schema({ username: { type: String, required: true, unique: true, trim: true, minlength: 3 }, email: { type: String, required: true, unique: true, lowercase: true }, password: { type: String, required: true, minlength: 6 }, friends: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // ObjectId hivatkozások tömbje barátokra moodHistory: [moodEntrySchema], // Az összes lejátszási lista, amelyet ez a felhasználó generált sharedPlaylists: [sharedPlaylistSchema], // Lejátszási listák, amelyeket a barátok megosztottak ezzel a felhasználóval preferences: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Number, default: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, default: Date.now } } }, { timestamps: true }); // Automatikusan hozzáadja a createdAt és updatedAt mezőket // Middleware: Futtassa ezt a függvényt a felhasználó mentése előtt (a jelszavának hasheléséhez) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // Csak akkor hasheli, ha a jelszó megváltozott this.password = await bcrypt.hash(this.password, 12); // Hasheli 12 körös salttal next(); }); // Metódus: Ellenőrzi, hogy a jelszó megegyezik-e a hashelt jelszóval userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // Metódus: Felhasználói statisztikák frissítése a hangulati előzményeik alapján userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // Összes nem üres hangulat lekérése this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // Megszámolja, hogy az egyes hangulatok hányszor jelennek meg const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // Megkeresi a legmagasabb számlálású hangulatot this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // Kiszámítja a kedvenc napszakot a lejátszási listák generálása alapján const hours = this.moodHistory.map(e => e.timestamp.getHours()).filter(h => !isNaN(h)); if (hours.length) { const avg = hours.reduce((a, b) => a + b, 0) / hours.length; this.stats.favoriteTime = avg < 6 ? 'night' : avg < 12 ? 'morning' : avg < 18 ? 'afternoon' : 'evening'; } }; // Exportáljuk a modellt, hogy más fájlokban is használhassuk module.exports = mongoose.model('User', userSchema);

Főbb fogalmak magyarázata:

ObjectId referenciák – A friends tömb nem tárol teljes felhasználói objektumokat. Ehelyett ObjectId-ket (egyedi azonosítókat) tárol, amelyek más felhasználókra mutatnak. Ez azért hatékony, mert ha egy barát megváltoztatja a felhasználónevét, nem kell mindenhol frissítenünk – csak követjük a referenciát.
Denormalizálás – Figyeljük meg, hogy mind a sharedBy (ObjectId), mind a sharedByUsername (String) értékeket tároljuk. Ezt denormalizálásnak nevezzük – ugyanazon adatok több helyen történő tárolása a teljesítmény érdekében. A felhasználónevet azért tároljuk, hogy ne kelljen minden alkalommal megkeresnünk a felhasználót, amikor megosztott lejátszási listákat jelenítünk meg.
Middleware (.pre()) – Ez automatikusan lefut bizonyos műveletek előtt. Itt biztonsági okokból hasheli a jelszavakat az adatbázisba mentés előtt.
Példánymetódusok (.methods) – Ezek olyan függvények, amelyeket egyes felhasználói dokumentumokon hívhatsz meg, például a user.comparePassword() vagy a user.updateStats() függvényeket.

3. lépés: Frissítsd a HTML frontendedet közösségi funkciókkal

Most frissítsük a felhasználói felületet, hogy tartalmazzon barátkezelést és egy tevékenységi hírcsatornát. A HTML határozza meg a weboldalad szerkezetét – milyen elemek jelennek meg és hol helyezkednek el.

Amit hozzáadunk a felhasználói felülethez:

Ismerőslista rész – Megjeleníti az aktuális ismerőseidet
Ismerős hozzáadása – Szöveges mező egy ismerős felhasználónevének megadásához
Legutóbbi tevékenységek hírcsatornája – Megjeleníti az ismerőseid által megosztott lejátszási listákat (kattintásra megtekinthető a teljes lejátszási lista)
Megosztás jelölőnégyzet – Lehetőség a létrehozott lejátszási lista megosztására ismerősökkel
Értesítési terület – Felugró értesítések a valós idejű frissítésekről

Cseréld le a public/index.html fájlt a következőre:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Gondolatolvasó Zenei API - Közösségi</title> <style> /* Alapértelmezett böngészőstílusok visszaállítása */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Főoldal stílusának módosítása színátmenetes háttérrel */ body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; color: #333; } /* A teljes irányítópult konténere */ .dashboard { max-width: 1000px; margin: 0 auto; padding: 20px; } /* Fejléc rész üdvözlő üzenettel */ .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); /* Elmosódás effektus üvegmorfizmushoz */ border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* Két oszlopos rács elrendezés: lejátszási lista rész (nagyobb) és barátok rész (kisebb) */ .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } /* Kártya stílusa mindkét részhez */ .playlist-section, .friends-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* Űrlap elemek stílusa */ input, textarea, button { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } /* Gombra jellemző stílus színátmenetes háttérrel */ button { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; cursor: pointer; font-weight: 600; } /* Finom hover effektus a gombokon */ button:hover { transform: translateY(-2px); } /* Egyedi barát elem stílusa */ .friend-item { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 8px; border-left: 4px solid #667eea; /* Kiemelés színe bal oldalon */ } /* Értesítési felugró ablak stílusa (alapértelmezés szerint rejtett, jobbról csúszik be) */ .notification { position: fixed; top: 20px; right: 20px; background: rgba(102,126,234,0.95); color: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transform: translateX(400px); /* Képernyőn kívüli indítás */ transition: transform .3s ease; z-index: 1000; max-width: 300px; } /* Értesítés megjelenítése (becsúsztatás) */ .notification.show { transform: translateX(0); } /* Bejelentkezési és regisztrációs űrlapok */ .login-section, .register-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } /* Megosztáshoz használható jelölőnégyzetek */ .share-controls { display: flex; gap: 10px; margin: 10px 0; } .share-controls input[type=checkbox] { width: auto; margin-right: 5px; } </style> </head> <body> <div class="dashboard"> <!-- Hitelesítési szakasz (Bejelentkezés/Regisztrációs űrlapok) --> <div id="authSection"> <!-- Bejelentkezési űrlap --> <div class="login-section"> <h2>🧠🎵 Üdvözlünk ismét!</h2> <input type="text" id="loginUsername" placeholder="Felhasználónév"/> <input type="password" id="loginPassword" placeholder="Jelszó"/> <button onclick="login()">Bejelentkezés</button> <p><a href="#" onclick="showRegister()">Nincs fiókja? Regisztráljon</a></p> </div> <!-- Regisztrációs űrlap (alapértelmezés szerint elrejtve) --> <div id="registerSection" class="register-section" style="display:none"> <h2>🎵 Zenei profil létrehozása</h2> <input type="text" id="regUsername" placeholder="Felhasználónév"/> <input type="email" id="regEmail" placeholder="Email"/> <input type="password" id="regPassword" placeholder="Jelszó"/> <button onclick="register()">Fiók létrehozása</button> <p><a href="#" onclick="showLogin()">Már van fiókja? Bejelentkezés</a></p> </div> </div> <!-- Fő irányítópult rész (bejelentkezés után látható) --> <div id="dashboardSection" style="display:none"> <!-- Fejléc felhasználónévvel és kijelentkezés gombbal --> <div class="header"> <h1>🧠🎵 A személyes zenei gondolatolvasód</h1> <p>Üdvözlünk, <span id="felhasználónév"></span>!</p> <button onclick="logout()" style="width:auto; margin-top:10px">Kijelentkezés</button> </div> <!-- Két oszlopos elrendezés: Lejátszási lista rész bal oldalon, Barátok rész jobb oldalon --> <div class="main-content"> <!-- Bal oszlop: Lejátszási lista generálása --> <div class="playlist-section"> <h2>💭 Hogy érzed magad?</h2> <textarea id="moodText" placeholder="Írd le a hangulatod..."></textarea> <div class="share-controls"> <label><input type="checkbox" id="shareWithFriends"/>Megosztás barátokkal</label> </div> <button onclick="generatePlaylist()">🎧 Lejátszási lista létrehozása</button> <!-- Az eredmények itt jelennek meg a lejátszási lista létrehozása után --> <div id="result" style="display:none"></div> </div> <!-- Jobb oszlop: Barátok és aktivitás --> <div class="friends-section"> <h3>👥 Barátaim</h3> <div id="friendsList"></div> <h4>Barát hozzáadása</h4> <input type="text" id="friendUsername" placeholder="Barát felhasználóneve"/> <button onclick="addFriend()">Barát hozzáadása</button> <h4>Legutóbbi aktivitás</h4> <!-- Itt jelennek meg a barátok megosztott lejátszási listái --> <div id="friendActivity">A barátok aktivitása itt fog megjelenni...</div> </div> /div> /div> -- Értesítési felugró ablakok tárolója -->  ... ``értesítési terület``��`` <!-- Socket.io könyvtár beillesztése (automatikusan kiszolgálva a szerverünk által) --> <script src="/socket.io/socket.io.js"></script> <!-- Egyéni JavaScript kód beillesztése --> <script src="./js/app.js"></script> </body> </html>

A HTML struktúra megértése:

Két fő rész: authSection (bejelentkezés/regisztráció) és dashboardSection (fő alkalmazás). Egyszerre csak az egyik látható.
Rács elrendezése: A .main-content CSS Grid segítségével hoz létre két oszlopot (2fr a lejátszási listának, 1fr a barátoknak). Ez azt jelenti, hogy a lejátszási lista szakasz kétszer olyan széles.
Eseménykezelők: Az onclick="functionName()" azt jelzi a böngészőnek, hogy hívjon meg egy JavaScript függvényt, amikor az elemre kattintanak.
Azonosítók: Az elemek egyedi azonosítókkal rendelkeznek (például id="friendsList"), így a JavaScriptünk később megtalálhatja és módosíthatja őket.

4. lépés: Frissítse a server.js-t a Socket.io-val, a Friend Endpoints-szal és az állandó megosztással

Most frissítjük a szerverünket, hogy kezelje a baráti kéréseket, a lejátszási lista megosztását és a valós idejű kommunikációt. A szerver az alkalmazásod „agya” – feldolgozza a kéréseket, kommunikál az adatbázissal, és válaszokat küld a felhasználóknak.

Amit hozzáadunk a szerverhez:

Socket.io szerver – Lehetővé teszi a valós idejű, kétirányú kommunikációt a szerver és a kliensek között
/api/add-friend endpoint – Kezeli a barátkozási kéréseket (kölcsönös barátság)
/api/shared-playlists endpoint – Visszaadja azokat a lejátszási listákat, amelyeket a barátok megosztottak veled
Továbbfejlesztett /api/personalized-playlist – Mostantól a megosztott lejátszási listákat menti a barátok adatbázisába
Socket eseménykezelők – Figyeli és kibocsátja a valós idejű eseményeket (hitelesítés, megosztás)

Cserélje le a server.js with:

// Környezeti változók betöltése .env fájlból require('dotenv').config(); // Szükséges modulok importálása const path = require('path'); const express = require('express'); const http = require('http'); const socketIo = require('socket.io'); const mongoose = require('mongoose'); const jwt = require('jsonwebtoken'); const auth = require('./middleware/auth'); const User = require('./models/User'); const moodAnalyzer = require('./moodAnalyzer'); const PlaylistGenerator = require('./playlistGenerator'); // Lejátszási lista generátor inicializálása const playlistGen = new PlaylistGenerator(); const PORT = process.env.PORT || 3000; // Kapcsolódás a MongoDB adatbázishoz async function connectDB() { try { console.log('🔗 Kapcsolódás a MongoDB-hez…'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }); console.log('✅ A MongoDB sikeresen csatlakozott!'); } catch (err) { console.error('❌ A MongoDB csatlakozása sikertelen:', err.message); process.exit(1); // Kilépés, ha az adatbázis-kapcsolat sikertelen } } connectDB(); // Express alkalmazás és HTTP szerver létrehozása const app = express(); const server = http.createServer(app); // Socket.io inicializálása a HTTP szerver tetején const io = socketIo(server); // Online felhasználók követése: userId => socketId // Ez lehetővé teszi üzenetek küldését a jelenleg csatlakozott felhasználóknak const connectedUsers = new Map(); // Socket.io kapcsolatkezelő - akkor fut, amikor egy kliens csatlakozik io.on('connection', socket => { console.log('🔗 Socket connected:', socket.id); // 'authenticate' esemény kezelése - a kliens megmondja, hogy kik ők socket.on('authenticate', ({ userId, username }) => { // Tárolja a felhasználó socket azonosítóját, hogy később üzeneteket küldhessünk neki connectedUsers.set(userId, socket.id); socket.userId = userId; // Felhasználói azonosító csatolása ehhez a sockethez socket.username = username; // Felhasználónév csatolása ehhez a sockethez console.log(`✅ Hitelesített felhasználó: ${username}`); }); // 'share_playlist' esemény kezelése - a felhasználó meg akarja osztani a barátaival socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // Végigmegy az összes barátazonosítón for (let friendId of friendIds) { // Lekéri a socket azonosítóját Ennek a barátnak (ha online van) const sid = connectedUsers.get(friendId.toString()); if (sid) { // A barát online van! Küldj neki valós idejű értesítést io.to(sid).emit('friend_shared_playlist', { friendName, mood, playlist }); } // Ha a barát offline van, akkor a lejátszási lista megjelenik az aktivitási hírfolyamában, amikor bejelentkezik } } catch (err) { console.error('Lejátszási lista megosztása hiba:', err); } }); // Szétkapcsolás kezelése - a felhasználó eltávolítása az online térképről socket.on('disconnect', () => { if (socket.userId) { connectedUsers.delete(socket.userId); console.log(`👋 Szétkapcsolva: ${socket.username}`); } }); }); // Köztes szoftver a JSON kérések törzseinek elemzéséhez app.use(express.json()); // Statikus fájlok kiszolgálása a 'public' mappából (HTML, CSS, képek) app.use(express.static(path.join(__dirname, 'public'))); // ===== API VÉGPONTOK ===== // POST /api/register - Új felhasználói fiók létrehozása app.post('/api/register', async (req, res) => { try { const { felhasználónév, email, jelszó } = req.body; // Bevitel érvényesítése if (!username || !email || !password) { return res.status(400).json({ hiba: 'Minden mező kitöltése kötelező' }); } if (password.length < 6) { return res.status(400).json({ hiba: 'A jelszónak legalább 6 karakterből kell állnia' }); } // Ellenőrzi, hogy létezik-e már felhasználónév vagy email cím const exists = await User.findOne({ $or: [{ felhasználónév }, { email }] }); if (exists) { return res.status(400).json({ hiba: 'Felhasználónév vagy email cím már létezik' }); } // Új felhasználó létrehozása és mentése (a jelszót a mentés előtti köztes réteg automatikusan hasheli) const user = new User({ felhasználónév, email, jelszó }); await user.save(); res.status(201).json({ üzenet: 'A felhasználó sikeresen létrehozva' }); } catch (err) { console.error('Regisztrációs hiba:', err); res.status(500).json({ hiba: 'A regisztráció sikertelen' }); } }); // POST /api/login - Felhasználó hitelesítése és JWT token visszaadása app.post('/api/login', async (req, res) => { try { const { felhasználónév, jelszó } = req.body; // Felhasználó keresése felhasználónév vagy e-mail cím alapján const user = await User.findOne({ $or: {[ felhasználónév }, { email: felhasználónév }] }); // Felhasználó létezésének és a jelszó helyességének ellenőrzése if (!user || !(await user.comparePassword(password))) { return res.status(401).json({ error: 'Érvénytelen hitelesítő adatok' }); } // JWT token létrehozása (például egy ideiglenes személyi igazolvány) const token = jwt.sign( { userId: user._id }, // Hasznos adat (amit kódolunk) process.env.JWT_SECRET, // Titkos kulcs (biztonságban tartja) { expiresIn: '7d' } // A token 7 nap múlva lejár ); // A token visszaküldése a kliensnek res.json({ token, user: { username: user.username, email: user.email, friends: user.friends } }); } catch (err) { console.error('Bejelentkezési hiba:', err); res.status(500).json({ error: 'Bejelentkezés sikertelen' }); } }); // GET /api/profile - Aktuális felhasználó profiljának lekérése // Az 'auth' köztes réteg ellenőrzi a JWT tokent és csatolja a felhasználót a req.user tömbhöz app.get('/api/profile', auth, async (req, res) => { try { // Felhasználói statisztikák frissítése req.user.updateStats(); await req.user.save(); // Friends tömb feltöltése (ObjectId-k cseréje tényleges felhasználói objektumokkal) await req.user.populate('friends', 'username _id'); const { username, email, friends } = req.user; res.json({ _id: req.user._id, username, email, friends: friends.map(f => ({ username: f.username, _id: f._id })) }); } catch (err) { console.error('Profilhiba:', err); res.status(500).json({ error: 'Profil betöltése sikertelen' }); } }); // GET /api/shared-playlists - Lejátszási listák lekérése, amelyeket a barátaid megosztottak veled app.get('/api/shared-playlists', auth, async (req, res) => { try { // Az utolsó 10 megosztott lejátszási lista lekérése, a legfrissebb szerint elöl rendezve const sharedPlaylists = req.user.sharedPlaylists .sort((a, b) => b.timestamp - a.timestamp) // Csökkenő rendezés időbélyeg szerint .slice(0, 10); // Az első 10 kiválasztása res.json({ sharedPlaylists }); } catch (err) { console.error('Megosztott lejátszási listák hiba:', err); res.status(500).json({ error: 'Nem sikerült betölteni a megosztott lejátszási listákat' }); } }); // POST /api/add-friend - Barát hozzáadása (kölcsönös barátság) app.post('/api/add-friend', auth, async (req, res) => { try { const { friendUsername } = req.body; // Barát keresése felhasználónév alapján const friend = await User.findOne({ felhasználónév: friendUsername }); if (!friend) { return res.status(404).json({ error: 'A felhasználó nem található' }); } // Már barátok ellenőrzése if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { return res.status(400).json({ error: 'Már barátok ezzel a felhasználóval' }); } // Minden felhasználó hozzáadása a másik barátlistájához (kölcsönös barátság) req.user.friends.push(friend._id); friend.friends.push(req.user._id); // Mindkét felhasználó mentése await req.user.save(); await friend.save(); res.json({ üzenet: 'A barát hozzáadása sikeresen megtörtént', friendId: friend._id }); } catch (err) { console.error('Barát hozzáadása hiba:', err); console.error('Hibaverem:', err.stack); res.status(500).json({ hiba: 'Nem sikerült hozzáadni a barátot' }); } }); // POST /api/personalized-playlist - Hangulatalapú lejátszási lista létrehozása app.post('/api/personalized-playlist', auth, async (req, res) => { try { const { text, shareWithFriends = false, playlistSize = 15 } = req.body; if (!text) { return res.status(400).json({ error: 'Kérlek, mondd el, hogy érzed magad!' }); } // 1. Hangulat elemzése a felhasználó szövege alapján const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. Lejátszási lista létrehozása a hangulat alapján const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. Mentés a felhasználó hangulati előzményeibe const entry = { text, detectedMood: moodAnalysis.mood, confidence: moodAnalysis.confidence, isShared: shareWithFriends, sharedWith: shareWithFriends ? req.user.friends : [], playlistGenerated: playlist.map(t => ({ trackName: t.name, artist: t.artist, spotifyId: t.id })) }; req.user.moodHistory.push(entry); req.user.updateStats(); await req.user.save(); // 4. Ha a megosztás engedélyezve van, mentés minden barát sharedPlaylists tömbjébe if (shareWithFriends && req.user.friends.length > 0) { const sharedPlaylistData = { sharedBy: req.user._id, sharedByUsername: req.user.username, mood: moodAnalysis.mood, playlist: playlist.slice(0, 5).map(t => ({ // Első 5 szám megosztása name: t.name, artist: t.artist, album_image: t.album_image, id: t.id })) }; // Végigmegyünk az összes barátunkon, és hozzáadjuk ezt a lejátszási listát a megosztott lejátszási listáikhoz for (let friendId of req.user.friends) { const friend = await User.findById(friendId); if (friend) { friend.sharedPlaylists.push(sharedPlaylistData); await friend.save(); } } } // 5. Válasz küldése az ügyfélnek res.json({ moodAnalysis, playlist, personalizedMessage: `Az előzményeid alapján itt van a tökéletes ${moodAnalysis.mood} lejátszási listád!` }); } catch (err) { console.error('Személyre szabott lejátszási lista hiba:', err); console.error('Hibastack:', err.stack); res.status(500).json({ error: 'Nem sikerült létrehozni a személyre szabott lejátszási listát. Próbáld újra.' }); } }); // Tartalék: Az index.html fájl kiszolgálása nem API útvonalakhoz (SPA útvonalakhoz) app.use((req, res, next) => { if (req.method === 'GET' && !req.path.startsWith('/api/')) { res.sendFile(path.join(__dirname, 'public', 'index.html')); } else { next(); } }); // Globális hibakezelő app.use((err, req, res, next) => { console.error('Globális hiba:', err); res.status(500).json({ error: 'Belső szerverhiba', részletek: err.message }); }); // Elindítjuk a szervert server.listen(PORT, () => { console.log(`🚀 Server running on http://localhost:${PORT}`); });

A legfontosabb szerverfogalmak magyarázata:

Middleware – Függvények, amelyek feldolgozzák a kéréseket, mielőtt azok elérnék az útvonalkezelőidet. Az express.json() elemzi a JSON-t a kérések törzséből, az auth ellenőrzi a JWT tokeneket.
async/await – Modern JavaScript szintaxis aszinkron műveletek (például adatbázis-lekérdezések) kezeléséhez. Az await szünetelteti a végrehajtást, amíg az ígéret fel nem oldódik.
HTTP állapotkódok – Az eredményt jelző számok: 200 = sikeres, 201 = létrehozva, 400 = hibás kérés, 401 = jogosulatlan, 404 = nem található, 500 = szerverhiba.
Socket.io események – Névvel ellátott üzenetek, amelyek oda-vissza mozognak a kliens és a szerver között. A socket.on() eseményeket figyel, a socket.emit() eseményeket küld.
JWT (JSON Web Token) – Biztonságos módja a felhasználók azonosításának. Bejelentkezéskor adunk nekik egy tokent. Minden kéréssel együtt elküldik ezt a tokent, hogy igazolják kilétüket.

5. lépés: Frontend JavaScript frissítése (public/js/app.js)

Végül adjuk hozzá a JavaScriptet, amely interaktívvá teszi a frontendünket. Ez a kód a felhasználó böngészőjében fut, és olyan dolgokat kezel, mint a gombokra kattintások, API-kérések és valós idejű frissítések.

Mit csinál ez a JavaScript:

Kezeli a hitelesítést – Bejelentkezés, regisztráció, kijelentkezés és tokenek tárolása
Inicializálja a Socket.io-t – Csatlakozik a szerverhez és figyeli a valós idejű eseményeket
API-kérések küldése – A fetch() használatával kommunikál a szerver végpontjaival
Frissíti a felhasználói felületet – Dinamikusan létrehoz HTML-elemeket a szerverről származó adatok alapján
Kezeli a felhasználói interakciókat – Gombokra kattintások, űrlapbeküldések stb.

Cserélje le a public/js/app.js fájlt a bemutatóban látható teljes kódra...

(Az app.js kódblokk pontosan a következőképpen alakul előtt, a bejelentkezéshez, regisztrációhoz, megosztott lejátszási listák betöltéséhez stb. tartozó összes funkcióval)

6. lépés: Tesztelje a közösségi zenei API-ját

Most itt az ideje mindent tesztelni! Kövesse figyelmesen az alábbi lépéseket:

Indítsa el a szervert: A terminálban futtassa az npm start parancsot. Olyan üzeneteket kell látnia, mint a "MongoDB csatlakoztatva!" és a "Kiszolgáló fut a http://localhost:3000 címen".
Nyisson meg két böngészőablakot: Nyissa meg a http://localhost:3000 parancsot két külön böngészőablakban (vagy egy normál ablakban és egy inkognitóablakban). Ez két különböző felhasználót szimulál.
1. felhasználó regisztrálása: Az első ablakban kattintson a „Regisztráció” gombra, és hozzon létre egy felhasználót (pl. felhasználónév: „alice”).
2. felhasználó regisztrálása: A második ablakban hozzon létre egy másik felhasználót (pl. felhasználónév: „bob”).
Egymás hozzáadása barátként: Alice ablakában írja be a „Barát hozzáadása” mezőbe a „Barát hozzáadása” nevet, majd kattintson a Barát hozzáadása gombra. Ugyanezt tegye Bob ablakában is (írja be az „alice” nevet). Látnia kell egymást a barátlistátokon!
Lejátszási lista megosztása: Alice ablakában írjon be valami hasonlót a hangulat szövegmezőbe, például: „Ma szuper boldognak érzem magam!”. Jelöld be a „Megosztás barátokkal” jelölőnégyzetet, majd kattints a „Lejátszási lista létrehozása” gombra.
Nézd, ahogy történik a varázslat:
- Ha Bob online van (az ablak még nyitva van), akkor egy értesítés jelenik meg jobbról!
- Bobnak Alice megosztott lejátszási listáját is látnia kell a „Legutóbbi tevékenységek” részben.
- Bob a megosztott lejátszási listára kattintva megtekintheti a dalok teljes listáját.
- Ha Bob kijelentkezik, majd később újra bejelentkezik, a megosztott lejátszási lista továbbra is ott lesz!

Hogyan működik együtt?

Nézzük meg, mi történik, amikor Alice megoszt egy lejátszási listát Bobbal:

Alice bejelöli a „Megosztás barátokkal” lehetőséget, majd a „Lejátszási lista létrehozása” gombra kattint.
A Frontend egy POST kérést küld a /api/personalized-playlist címre a shareWithFriends: true
Server elemzi Alice hangulatát, és létrehoz egy lejátszási listát a Spotify API használatával.
Server elmenti a lejátszási listát Alice moodHistory tömbjébe.
Server végigmegy Alice barátain (beleértve Bobot is), és hozzáadja a lejátszási listát minden barát sharedPlaylists tömbjéhez a MongoDB-ben.
A Frontend egy share_playlist Socket.io eseményt küld az online értesítéshez. friends
A szerver fogadja az eseményt és ellenőrzi, hogy Bob online van-e (a connectedUsers térképen keres)
Ha Bob online van, a szerver küld neki egy friend_shared_playlist eseményt a lejátszási lista előnézetével
Bob böngészője fogadja az eseményt és meghívja a showNotification() függvényt egy felugró ablak megjelenítéséhez
Bob böngészője szintén meghívja a loadSharedPlaylists() függvényt az aktivitási hírfolyam frissítéséhez
Ha Bob offline állapotban van, akkor a lejátszási listát a tevékenységi hírfolyamában fogja látni, amikor legközelebb bejelentkezik (mert az el van mentve a sharedPlaylists tömbjében)

Amit építettél

Gratulálunk! Sikeresen építettél egy teljes funkcionalitású közösségi zenei alkalmazást! Íme, mit értél el:

🤝 Barátrendszer – A felhasználók felhasználónév alapján adhatnak hozzá barátokat. A barátságok kölcsönösek (mindkét felhasználó egymás barátja lesz), és ObjectId hivatkozásokként tárolódnak a MongoDB-ben.
💾 Állandó lejátszási lista megosztás – A megosztott lejátszási listák az egyes barátok sharedPlaylists tömbjében kerülnek mentésre az adatbázisba. Ez azt jelenti, hogy az adatok a felhasználók kijelentkezése után is megmaradnak.
📡 Valós idejű értesítések – A Socket.io segítségével az online felhasználók azonnal értesítést kapnak, amikor barátaik lejátszási listákat osztanak meg. Nincs szükség az oldal frissítésére!
📰 Aktivitási hírcsatorna – A felhasználók láthatják az összes barátjuktól nemrég megosztott lejátszási listákat, a legújabbak szerint rendezve. Egy lejátszási listára kattintva megjelenik a teljes számlista.
🔐 Biztonságos hitelesítés – A jelszavakat bcrypt segítségével hasheljük (soha nem tároljuk egyszerű szövegként), és JWT tokeneket használunk az API-kérések hitelesítéséhez.
⏱️ Offline-barát – A barátok akkor is megtekinthetik a megosztott lejátszási listákat, ha nem voltak online a lejátszási lista megosztásakor. Minden mentésre kerül az adatbázisba!

A tanult kulcsfogalmak

Valós idejű kommunikáció a Socket.io-val (WebSockets)
Adatbázis-kapcsolatok MongoDB ObjectId referenciák használatával
Denormalizálás a teljesítmény érdekében (az ObjectId és a felhasználónév tárolása)
RESTful API-tervezés (GET, POST végpontok megfelelő HTTP állapotkódokkal)
Köztes szintű minta a hitelesítéshez és a kérések feldolgozásához
Aszinkron/await az aszinkron műveletek kezeléséhez
DOM-manipuláció a felhasználói felület dinamikus frissítéséhez
Eseményvezérelt architektúra Socket.io eseményekkel

Gyakori problémák elhárítása

„Nem lehet csatlakozni a MongoDB-hez” – Győződjön meg arról, hogy a MongoDB szerver fut, és a MONGODB_URI a .env fájlban helyes.
„Érvénytelen hitelesítő adatok” bejelentkezéskor – Ellenőrizze felhasználónevét és jelszavát. Ne feledje, hogy a kis- és nagybetűk megkülönböztetik őket!
„A felhasználó nem található” ismerős hozzáadásakor – Győződjön meg arról, hogy a pontos felhasználónevet írja be (kis- és nagybetűérzékeny). Előbb regisztrálnia kellett.
A megosztott lejátszási listák nem jelennek meg – Ellenőrizze a böngésző konzolját (F12) a hibák szempontjából. Győződjön meg arról, hogy mindkét felhasználó ismerős, és a „Megosztás ismerősökkel” jelölőnégyzet be van jelölve.
A valós idejű értesítések nem működnek – Győződjön meg arról, hogy a Socket.io csatlakoztatva van. Ellenőrizd a böngésző konzolján a „🔗 Csatlakozva a szerverhez” részt.

Következő lépések és ötletek a bővítéshez

Most, hogy van egy működő közösségi zenei alkalmazásod, íme néhány ötlet a továbbfejlesztéséhez:

Barátságkérés kérése – Azonnali barátságkérés helyett olyan kéréseket írj elő a felhasználóknak, amelyeket el lehet fogadni vagy el lehet utasítani.
Privát üzenetküldés – Adj hozzá egy csevegőrendszert a Socket.io használatával, hogy a barátok üzenetet küldhessenek egymásnak.
Lejátszási listákhoz fűzött megjegyzések – Lehetővé tegyék a felhasználók számára a megosztott lejátszási listákhoz fűzött megjegyzések engedélyezését.
Zenei ízlés kompatibilitása – Százalékos arány kiszámítása két felhasználó zenei preferenciáinak hasonlósága alapján.
Felhasználók keresése – Keresési funkció hozzáadása a felhasználók felhasználónév szerinti kereséséhez.
Törlés/ismerős törlése – Lehetőség hozzáadása a barátok eltávolítására vagy a megosztott tartalmak törlésére. lejátszási listák
Profiloldalak – Felhasználói statisztikák, kedvenc hangulatok és legutóbbi lejátszási listák megjelenítése
Együttműködő lejátszási listák – Több barát is hozzáadhat zeneszámokat egy megosztott lejátszási listához
Lejátszási lista előzményei – Az összes korábban létrehozott lejátszási lista megtekintése

Létrehoztál egy teljes értékű közösségi zenei alkalmazást valós idejű funkciókkal és állandó adattárolással! Ez szilárd alapot teremt a modern webfejlesztés megértéséhez. Kísérletezz és építs tovább!🎵✨