Tilføj venner til din Mind-Reading Music API: Social deling i realtid

Klar til at gøre din Mind-Reading Music API virkelig social? I denne vejledning tilføjer du et robust vennesystem og deling af playlister, der bevares i databasen, så brugerne kan se deres venners delte playlister, selv når de ikke er online. Vi bruger Socket.io til opdateringer i realtid og MongoDB til permanent lagring.

Hvad du vil opbygge

Vennesystem – Tilføj og administrer venner efter brugernavn med fælles venskab ved hjælp af ObjectIds
Vedvarende deling af playlister – Delte playlister gemmes i databasen og kan ses når som helst
Notifikationer i realtid – Få øjeblikkelige notifikationer, når venner deler (hvis online)
Aktivitetsfeed – Se seneste vennedelinger med klikbare forhåndsvisninger af playlister
Forbedret humøranalyse – Smart generering af playlister med søgealternativer

Forudsætninger

Din udfyldte Mind-Reading Music API fra Del 2
MongoDB, Node.js og npm installeret
Spotify API-legitimationsoplysninger (klient-ID og hemmelighed)
30-45 minutters kodningstid

I del 2 oprettede du brugerkonti med humørhistorik og smarte præferencer. Nu skal vi gøre det socialt! Du lærer, hvordan du forbinder brugere, deler playlister både i realtid og permanent, og ser, hvad dine venner lytter til baseret på deres humør.

Forståelse af nøglebegreberne

Før vi dykker ned i koden, lad os forstå, hvad vi bygger:

Socket.io – Et bibliotek, der muliggør tovejskommunikation i realtid mellem din server og browser. Tænk på det som et telefonopkald i stedet for sms'er – du kan sende og modtage information med det samme uden at opdatere siden.
Persistent lagring – Gemmer data i din MongoDB-database, så de forbliver der, selv når brugerne logger ud. Dette er som at gemme en fil på din harddisk i stedet for bare at gemme den i hukommelsen.
ObjectId-referencer – MongoDBs måde at oprette relationer mellem data på. I stedet for at kopiere alle dine venners oplysninger til din profil, gemmer du bare en reference (som en pointer) til deres profil.
Skemaer – Tænk på disse som tegninger, der definerer strukturen af dine data. De fortæller MongoDB, hvilke felter hvert dokument skal have, og hvilken type data der skal være i hvert felt.

Trin 1: Installer nødvendige afhængigheder

Åbn din terminal i din projektmappe, og installer Socket.io for at få realtidsfunktioner:

npm install socket.io

Hvad dette gør: Denne kommando downloader og installerer Socket.io-biblioteket i dit projekt. Kommandoen npm install henter pakker fra npm-registreringsdatabasen (et enormt bibliotek af JavaScript-kode) og tilføjer dem til din node_modules-mappe.

De andre afhængigheder (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) burde allerede være installeret fra del 2.

Trin 2: Opdater din brugermodel med sociale funktioner

Da du allerede har oprettet en brugermodel i del 2, opdaterer vi den for at tilføje sociale funktioner. Brugermodellen er som en skabelon, der definerer, hvilke oplysninger vi gemmer om hver bruger i vores database.

Hvad vi tilføjer:

friends array – En liste over ObjectId-referencer til andre brugere. I stedet for at gemme fulde brugeroplysninger, gemmer vi blot ID'er, der peger på andre brugerdokumenter i databasen.
sharedWith og isShared felter – Disse sporer, hvilke stemningsindtastninger der er blevet delt, og hvem de blev delt med.
sharedPlaylistSchema – Et nyt skema (blueprint), der definerer, hvordan en delt playliste ser ud: hvem delte den, hvilken stemning den var til, numrene, og hvornår den blev delt.
sharedPlaylists array – En liste, der gemmer alle de playlister, dine venner har delt med dig.

Erstat din models/User.js med:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // Skema for individuelle stemningsindtastninger (hver gang brugeren genererer en playliste) const moodEntrySchema = new mongoose.Schema({ text: String, // Hvad brugeren skrev (f.eks. "føler mig glad i dag") detectedMood: String, // Det humør, vores analysator registrerede (f.eks. "glad") confidence: Number, // Hvor sikre vi er (0-10) playlistGenerated: [{ // Array af numre, vi anbefalede trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } // null = not rated, true = liked, false = disliked }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // Hvem delte vi dette med? isShared: { type: Boolean, default: false }, // Blev dette delt? timestamp: { type: Date, default: Date.now } // Hvornår blev dette oprettet? }); // Skema for brugerpræferencer (favoritgenrer osv.) 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] } }); // NYT: Skema for afspilningslister, som venner deler med dig const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // ObjectId-reference til den ven, der delte sharedByUsername: String, // Brugernavn til nem visning (denormaliseret for performance) mood: String, // Hvilken mood var denne afspilningsliste til? playlist: [{ // Det faktiske nummers navn: String, kunstner: String, album_image: String, id: String }], timestamp: { type: Date, default: Date.now } // Hvornår blev dette delt? }); // Hovedbrugerskema - definerer strukturen af et brugerdokument 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' }], // Array af ObjectId-referencer til venner moodHistory: [moodEntrySchema], // Alle de playlister, som denne bruger har genereret sharedPlaylists: [sharedPlaylistSchema], // Playlister, som venner har delt med denne bruger preferences: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Number, default: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, default: Date.now } } }, { timestamps: true }); // Tilføj automatisk createdAt- og updatedAt-felterne // Middleware: Kør denne funktion, før en bruger gemmes (for at hashe deres adgangskode) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // Hash kun, hvis adgangskoden blev ændret this.password = await bcrypt.hash(this.password, 12); // Hash med 12 runder salt next(); }); // Metode: Tjek, om en adgangskode matcher den hashede adgangskode userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // Metode: Opdater brugerstatistik baseret på deres humørhistorik userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // Hent alle ikke-tomme humør this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // Tæl hvor mange gange hvert humør vises const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // Find humøret med det højeste antal this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // Beregn foretrukne tidspunkt på dagen baseret på, hvornår de genererer afspilningslister 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'; } }; // Eksporter modellen, så vi kan bruge den i andre filer module.exports = mongoose.model('User', userSchema);

Nøglebegreber forklaret:

ObjectId-referencer – friends-arrayet gemmer ikke hele brugerobjekter. I stedet gemmer den ObjectIds (unikke identifikatorer), der peger på andre brugere. Dette er effektivt, fordi hvis en ven ændrer sit brugernavn, behøver vi ikke at opdatere det overalt – vi følger bare referencen.
Denormalisering – Bemærk, at vi gemmer både sharedBy (ObjectId) og sharedByUsername (String). Dette kaldes denormalisering – lagring af de samme data flere steder for at sikre ydeevne. Vi gemmer brugernavnet, så vi ikke behøver at slå brugeren op, hver gang vi viser delte afspilningslister.
Middleware (.pre()) – Dette kører automatisk før visse handlinger. Her hashes adgangskoder, før de gemmes i databasen af sikkerhedsmæssige årsager.
Instansmetoder (.methods) – Dette er funktioner, du kan kalde på individuelle brugerdokumenter, f.eks. user.comparePassword() eller user.updateStats().

Trin 3: Opdater din HTML-frontend med sociale funktioner

Lad os nu opdatere brugergrænsefladen til at inkludere venneadministration og et aktivitetsfeed. HTML definerer strukturen på din webside – hvilke elementer der vises, og hvor de er placeret.

Hvad vi tilføjer til brugergrænsefladen:

Vennelistesektion – Viser dine nuværende venner
Tilføj ven-input – Tekstfelt til at indtaste en vens brugernavn
Seneste aktivitetsfeed – Viser afspilningslister, dine venner har delt (klik for at se hele afspilningslisten)
Del-afkrydsningsfelt – Mulighed for at dele din genererede afspilningsliste med venner
Meddelelsesområde – Pop op-meddelelser til opdateringer i realtid

Erstat din public/index.html med:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Mind-Reading Music API - Social</title> <style> /* Nulstil standard browser-stilarter */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Hoveddelsstyling med gradientbaggrund */ body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; color: #333; } /* Container til hele dashboardet */ .dashboard { max-width: 1000px; margin: 0 auto; padding: 20px; } /* Header-sektion med velkomstbesked */ .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); /* Sløringseffekt for glasmorfisme */ border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* To-kolonne gitterlayout: playliste-sektion (større) og venne-sektion (mindre) */ .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } /* Kortstyling for begge sektioner */ .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); } /* Styling af formularelementer */ input, textarea, button { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } /* Knapspecifik styling med gradientbaggrund */ button { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; cursor: pointer; font-weight: 600; } /* Diskret svæveeffekt på knapper */ button:hover { transform: translateY(-2px); } /* Styling af individuelt venneelement */ .friend-item { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 8px; border-left: 4px solid #667eea; /* Accentfarve til venstre */ } /* Styling af pop op-vinduer for notifikationer (skjult som standard, glider ind fra højre) */ .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); /* Start uden for skærmen */ transition: transform .3s ease; z-index: 1000; max-width: 300px; } /* Vis notifikation (glid ind) */ .notification.show { transform: translateX(0); } /* Login- og registreringsformularer */ .login-section, .register-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } /* Kontrolelementer til deling af afkrydsningsfelter */ .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"> <!-- Godkendelsessektion (Login/Registreringsformularer) --> <div id="authSection"> <!-- Loginformular --> <div class="login-section"> <h2>🧠🎵 Velkommen tilbage!</h2> <input type="text" id="loginUsername" placeholder="Brugernavn"/> <input type="password" id="loginPassword" placeholder="Adgangskode"/> <button onclick="login()">Login</button> <p><a href="#" onclick="showRegister()">Har du ikke en konto? Tilmeld dig</a></p> </div> <!-- Registreringsformular (skjult som standard) --> <div id="registerSection" class="register-section" style="display:none"> <h2>🎵 Opret din musikprofil</h2> <input type="text" id="regUsername" placeholder="Brugernavn"/> <input type="email" id="regEmail" placeholder="Email"/> <input type="password" id="regPassword" placeholder="Adgangskode"/> <button onclick="register()">Opret konto</button> <p><a href="#" onclick="showLogin()">Har du allerede en konto? Log ind</a></p> </div> </div> <!-- Hoveddashboardsektion (vises efter login) --> <div id="dashboardSection" style="display:none"> <!-- Header med brugernavn og log ud-knap --> <div class="header"> <h1>🧠🎵 Din personlige musik-tankelæser</h1> <p>Velkommen, <span id="brugernavn"></span>!</p> <button onclick="logout()" style="width:auto; margin-top:10px">Log ud</button> </div> <!-- Layout med to kolonner: Playlistesektion til venstre, Vennesektion til højre --> <div class="main-content"> <!-- Venstre kolonne: Generering af playlister --> <div class="playlist-section"> <h2>💭 Hvordan har du det?</h2> <textarea id="moodText" placeholder="Beskriv dit humør..."></textarea> <div class="share-controls"> <label><input type="checkbox" id="shareWithFriends"/>Del med venner</label> </div> <button onclick="generatePlaylist()">🎧 Generer afspilningsliste</button> <!-- Resultaterne vises her efter generering af afspilningsliste --> <div id="result" style="display:none"></div> </div> <!-- Højre kolonne: Venner og aktivitet --> <div class="friends-section"> <h3>👥 Mine venner</h3> <div id="friendsList"></div> <h4>Tilføj en ven</h4> <input type="text" id="friendUsername" placeholder="Vennens brugernavn"/> <button onclick="addFriend()">Tilføj ven</button> <h4>Seneste aktivitet</h4> <!-- Venners delte afspilningslister vises her --> <div id="friendActivity">Vennens aktivitet vises her...</div> </div> </div> </div> </div> <!-- Beholder til pop op-vinduer for notifikationer --> <div id="notificationArea"></div> <!-- Inkluder Socket.io-biblioteket (automatisk serveret af vores server) --> <script src="/socket.io/socket.io.js"></script> <!-- Inkluder vores brugerdefinerede JavaScript --> <script src="./js/app.js"></script> </body> </html>

Forståelse af HTML-strukturen:

To hovedsektioner: authSection (login/registrering) og dashboardSection (hovedapp). Kun én er synlig ad gangen.
Gitterlayout: .main-content bruger CSS Grid til at oprette to kolonner (2fr til afspilningslister, 1fr til venner). Det betyder, at afspilningslistesektionen er dobbelt så bred.
Hændelseshandlere: onclick="functionName()" fortæller browseren, at den skal kalde en JavaScript-funktion, når der klikkes på elementet.
ID'er: Elementer har unikke ID'er (som id="friendsList"), så vores JavaScript kan finde og ændre dem senere.

Trin 4: Opdater server.js med Socket.io, venneslutpunkter og vedvarende deling

Nu opdaterer vi vores server til at håndtere venneanmodninger, deling af afspilningslister og kommunikation i realtid. Serveren er "hjernen" i din app – den behandler anmodninger, kommunikerer med databasen og sender svar tilbage til brugerne.

Hvad vi tilføjer til serveren:

Socket.io-server – Muliggør tovejskommunikation i realtid mellem server og klienter
/api/add-friend endpoint – Håndterer venneanmodninger (gensidigt venskab)
/api/shared-playlists endpoint – Returnerer afspilningslister, som venner har delt med dig
Forbedret /api/personalized-playlist – Gemmer nu delte afspilningslister i venners databaser
Socket-hændelseshåndterere – Lytter efter og udsender hændelser i realtid (godkendelse, deling)

Erstat din server.js med:

// Indlæs miljøvariabler fra .env-fil require('dotenv').config(); // Importer nødvendige moduler 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'); // Initialiser afspilningslistegenerator const playlistGen = new PlaylistGenerator(); const PORT = process.env.PORT || 3000; // Forbind til MongoDB-database async function connectDB() { try { console.log('🔗 Forbinder til MongoDB…'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }); console.log('✅ MongoDB oprettet forbindelse!'); } catch (err) { console.error('❌ MongoDB-forbindelse mislykkedes:', err.message); process.exit(1); // Afslut hvis databaseforbindelsen mislykkes } } connectDB(); // Opret Express-app og HTTP-server const app = express(); const server = http.createServer(app); // Initialiser Socket.io oven på HTTP-serveren const io = socketIo(server); // Kort for at spore online brugere: userId => socketId // Dette lader os sende beskeder til specifikke brugere, der i øjeblikket er tilsluttet const connectedUsers = new Map(); // Socket.io forbindelseshandler - kører når en klient opretter forbindelse io.on('connection', socket => { console.log('🔗 Socket connected:', socket.id); // Håndterer 'authenticate' event - klienten fortæller os, hvem de er socket.on('authenticate', ({ userId, username }) => { // Gemer denne brugers socket-ID, så vi kan sende dem beskeder senere connectedUsers.set(userId, socket.id); socket.userId = userId; // Vedhæft brugerId til denne socket socket.username = username; // Vedhæft brugernavn til denne socket console.log(`✅ Godkendt bruger: ${username}`); }); // Håndterer 'share_playlist' event - brugeren vil dele med venner socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // Gennemgår alle venne-ID'er for (let friendId of friendIds) { // Henter socket-ID'et for denne ven (hvis de er online) const sid = connectedUsers.get(friendId.toString()); if (sid) { // Vennen er online! Send dem en realtidsnotifikation io.to(sid).emit('friend_shared_playlist', { friendName, mood, playlist }); } // Hvis vennen er offline, vil de se playlisten i deres aktivitetsfeed, når de logger ind } } catch (err) { console.error('Fejl ved deling af playliste:', err); } }); // Håndter afbrydelse - fjern bruger fra online kort socket.on('disconnect', () => { if (socket.userId) { connectedUsers.delete(socket.userId); console.log(`👋 Afbrudt: ${socket.username}`); } }); }); // Middleware til at parse JSON-anmodninger bodies app.use(express.json()); // Vis statiske filer fra 'public' mappe (HTML, CSS, billeder) app.use(express.static(path.join(__dirname, 'public'))); // ===== API-SLUTPUNKTER ===== // POST /api/register - Opret en ny brugerkonto app.post('/api/register', async (req, res) => { try { const { brugernavn, e-mail, adgangskode } = req.body; // Valider input if (! brugernavn || !email || !password) { return res.status(400).json({ fejl: 'Alle felter er påkrævede' }); } if (password.length < 6) { return res.status(400).json({ fejl: 'Adgangskoden skal være mindst 6 tegn' }); } // Tjek om brugernavn eller e-mail allerede findes const exists = await User.findOne({ $or: [{ brugernavn }, { e-mail }] }); if (exists) { return res.status(400).json({ fejl: 'Brugernavn eller e-mail findes allerede' }); } // Opret og gem ny bruger (adgangskoden vil blive hashet automatisk af vores pre-save middleware) const user = new User({ username, email, password }); await user.save(); res.status(201).json({ message: 'Bruger oprettet' }); } catch (err) { console.error('Registreringsfejl:', err); res.status(500).json({ error: 'Registrering mislykkedes' }); } }); // POST /api/login - Godkend bruger og returner JWT-token app.post('/api/login', async (req, res) => { try { const { brugernavn, adgangskode } = req.body; // Find bruger via brugernavn eller e-mail const bruger = await User.findOne({ $or: {[ brugernavn }, { e-mail: brugernavn }] }); // Tjek om brugeren findes, og om adgangskoden er korrekt if (!bruger || !(await user.comparePassword(adgangskode))) { return res.status(401).json({ fejl: 'Ugyldige legitimationsoplysninger' }); } // Opret JWT-token (som et midlertidigt ID-kort) const token = jwt.sign( { brugerId: bruger._id }, // Payload (det vi koder) process.env.JWT_SECRET, // Hemmelig nøgle (holder den sikker) { expiresIn: '7d' } // Token udløber om 7 dage); // Send token tilbage til klienten res.json({ token, bruger: { brugernavn: bruger.brugernavn, e-mail: bruger.e-mail, venner: bruger.venner } }); } catch (err) { console.error('Loginfejl:', err); res.status(500).json({ fejl: 'Login mislykkedes' }); } }); // GET /api/profile - Hent den nuværende brugers profil // 'auth' middleware verificerer JWT-tokenet og knytter brugeren til req.user app.get('/api/profile', auth, async (req, res) => { try { // Opdater brugerstatistik req.user.updateStats(); await req.user.save(); // Udfyld venner-array (erstat ObjectIds med faktiske brugerobjekter) await req.user.populate('venner', 'brugernavn _id'); const { brugernavn, e-mail, venner } = req.user; res.json({ _id: req.user._id, brugernavn, e-mail, venner: venner.map(f => ({ brugernavn: f.brugernavn, _id: f._id })) }); } catch (err) { console.error('Profilfejl:', err); res.status(500).json({ fejl: 'Kunne ikke indlæse profil' }); } }); // GET /api/shared-playlists - Hent playlister, som venner har delt med dig app.get('/api/shared-playlists', auth, async (req, res) => { try { // Hent de sidste 10 delte playlister, sorteret efter de seneste først const sharedPlaylists = req.user.sharedPlaylists .sort((a, b) => b.timestamp - a.timestamp) // Sorter faldende efter timestamp .slice(0, 10); // Tag de første 10 res.json({ sharedPlaylists }); } catch (err) { console.error('Fejl i delte playlister:', err); res.status(500).json({ fejl: 'Kunne ikke indlæse delte playlister' }); } }); // POST /api/add-friend - Tilføj en ven (gensidigt venskab) app.post('/api/add-friend', auth, async (req, res) => { try { const { friendUsername } = req.body; // Find vennen via brugernavn const friend = await User.findOne({ brugernavn: friendUsername }); if (!friend) { return res.status(404).json({ error: 'Bruger ikke fundet' }); } // Tjek om allerede er venner if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { return res.status(400).json({ error: 'Allerede venner med denne bruger' }); } // Tilføj hver bruger til den andens venneliste (gensidigt venskab) req.user.friends.push(friend._id); friend.friends.push(req.user._id); // Gem begge brugere await req.user.save(); await friend.save(); res.json({ message: 'Ven tilføjet', friendId: friend._id }); } catch (err) { console.error('Tilføj ven fejl:', err); console.error('Fejl stack:', err.stack); res.status(500).json({ error: 'Kunne ikke tilføje ven' }); } }); // POST /api/personalized-playlist - Generer en humørbaseret playliste 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: 'Fortæl mig venligst, hvordan du har det!' }); } // 1. Analysér humøret fra brugerens tekst const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. Generer en playliste baseret på humør const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. Gem i brugerens humørhistorik 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. Hvis deling er aktiveret, gemmes i hver vens sharedPlaylists array 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 => ({ // Del de første 5 numre name: t.name, artist: t.artist, album_image: t.album_image, id: t.id })) }; // Gennemgå alle venner og tilføj denne playliste til deres sharedPlaylists for (let friendId of req.user.friends) { const friend = await User.findById(friendId); if (friend) { friend.sharedPlaylists.push(sharedPlaylistData); await friend.save(); } } } // 5. Send svar tilbage til klienten res.json({ moodAnalysis, playlist, personalizedMessage: `Baseret på din historik, her er din perfekte ${moodAnalysis.mood} playliste!` }); } catch (err) { console.error('Personlig playlistefejl:', err); console.error('Fejl i stack:', err.stack); res.status(500).json({ error: 'Kunne ikke generere personlig playliste. Prøv igen.' }); } }); // Fallback: Vis index.html for alle ikke-API-ruter (til SPA-routing) app.use((req, res, next) => { if (req.method === 'GET' && !req.path.startsWith('/api/')) { res.sendFile(path.join(__dirname, 'public', 'index.html')); } else { next(); } }); // Global fejlhåndtering app.use((err, req, res, next) => { console.error('Global fejl:', err); res.status(500).json({ fejl: 'Intern serverfejl', detaljer: err.message }); }); // Start serveren server.listen(PORT, () => { console.log(`🚀 Server kører på http://localhost:${PORT}`); });

Forklaring af centrale serverkoncepter:

Middleware – Funktioner, der behandler anmodninger, før de når dine rutehandlere. express.json() analyserer JSON fra anmodningstekster, auth verificerer JWT-tokens.
async/await – Moderne JavaScript-syntaks til håndtering af asynkrone operationer (som databaseforespørgsler). await sætter udførelsen på pause, indtil løftet er opfyldt.
HTTP-statuskoder – Tal, der angiver resultatet: 200 = succes, 201 = oprettet, 400 = forkert anmodning, 401 = uautoriseret, 404 = ikke fundet, 500 = serverfejl.
Socket.io-hændelser – Navngivne beskeder, der går frem og tilbage mellem klient og server. socket.on() lytter efter hændelser, socket.emit() sender hændelser.
JWT (JSON Web Token) – En sikker måde at identificere brugere på. Når de logger ind, giver vi dem et token. De sender denne token med hver anmodning for at bevise, hvem de er.

Trin 5: Opdater frontend JavaScript (public/js/app.js)

Lad os til sidst tilføje det JavaScript, der gør vores frontend interaktiv. Denne kode kører i brugerens browser og håndterer ting som knapklik, API-anmodninger og opdateringer i realtid.

Hvad dette JavaScript gør:

Administrerer godkendelse – Login, registrering, logout og tokenlagring
Initialiserer Socket.io – Opretter forbindelse til serveren og lytter efter hændelser i realtid
Foretager API-anmodninger – Bruger fetch() til at kommunikere med serverens slutpunkter
Opdaterer brugergrænsefladen – Opretter dynamisk HTML-elementer baseret på data fra serveren
Håndterer brugerinteraktioner – Knapklik, formularindsendelser osv.

Erstat din public/js/app.js med den fulde kode, der er vist i vejledningen...

(App.js-kodeblokken følger præcis som før, med alle funktionerne til login, registrering, indlæsning af delte afspilningslister osv.)

Trin 6: Test din Social Music API

Nu er det tid til at teste alt! Følg disse trin omhyggeligt:

Start din server: Kør npm start i din terminal. Du bør se meddelelser som "MongoDB tilsluttet!" og "Server kører på http://localhost:3000".
Åbn to browservinduer: Åbn http://localhost:3000 i to separate browservinduer (eller et almindeligt vindue og et inkognitovindue). Dette simulerer to forskellige brugere.
Registrer bruger 1: I det første vindue skal du klikke på "Tilmeld dig" og oprette en bruger (f.eks. brugernavn: "alice").
Registrer bruger 2: I det andet vindue skal du oprette en anden bruger (f.eks. brugernavn: "bob").
Tilføj hinanden som venner: I Alices vindue skal du skrive "bob" i feltet "Tilføj en ven" og klikke på Tilføj ven. Gør det samme i Bobs vindue (skriv "alice"). I burde kunne se hinanden på jeres vennelister!
Del en playliste: I Alices vindue skal du skrive noget i retning af "Jeg føler mig super glad i dag!" i humørfeltet. Markér afkrydsningsfeltet "Del med venner", og klik derefter på "Generer afspilningsliste".
Se magien ske:
- Hvis Bob er online (vinduet stadig åbent), vil han se en notifikation glide ind fra højre!
- Bob burde også se Alices delte afspilningsliste vises i hans "Seneste aktivitet".
- Bob kan klikke på den delte afspilningsliste for at se den fulde liste over sange.
- Hvis Bob logger ud og logger ind igen senere, vil den delte afspilningsliste stadig være der!

Forståelse af, hvordan det hele fungerer sammen

Lad os se på, hvad der sker, når Alice deler en playliste med Bob:

Alice markerer "Del med venner" og klikker på "Generer playliste"
Frontend sender en POST-anmodning til /api/personalized-playlist med shareWithFriends: true
Server analyserer Alices humør og genererer en playliste ved hjælp af Spotify API
Server gemmer playlisten i Alices moodHistory array
Server gennemgår Alices venner (inklusive Bob) og tilføjer playlisten til hver vens sharedPlaylists array i MongoDB
Frontend udsender en share_playlist Socket.io-begivenhed for at underrette online venner
Serveren modtager begivenheden og tjekker, om Bob er online (ser i connectedUsers-kortet)
Hvis Bob er online, sender serveren ham en friend_shared_playlist-begivenhed med forhåndsvisningen af afspilningslisten
Bobs browser modtager begivenheden og kalder showNotification() for at vise en pop op-boks
Bobs browser kalder også loadSharedPlaylists() for at opdatere aktivitetsfeedet
Hvis Bob er offline, vil han se afspilningslisten i sit aktivitetsfeed, næste gang han logger ind (fordi den er gemt i hans sharedPlaylists-array)

Hvad du har bygget

Tillykke! Du har med succes bygget en fuldt udstyret social musikapp! Her er, hvad du har opnået:

🤝 Vennesystem – Brugere kan tilføje venner efter brugernavn. Venskaber er gensidige (begge brugere bliver venner med hinanden) og gemmes som ObjectId-referencer i MongoDB.
💾 Vedvarende deling af playlister – Delte playlister gemmes i databasen i hver vens sharedPlaylists array. Det betyder, at dataene bevares, selv efter at brugerne logger ud.
📡 Notifikationer i realtid – Ved hjælp af Socket.io får onlinebrugere øjeblikkelige notifikationer, når venner deler playlister. Ingen sideopdatering nødvendig!
📰 Aktivitetsfeed – Brugere kan se de seneste delte playlister fra alle deres venner, sorteret efter nyeste først. Hvis du klikker på en playliste, vises den fulde liste over sange.
🔐 Sikker godkendelse – Adgangskoder hashes med bcrypt (gemmes aldrig som almindelig tekst), og JWT-tokens bruges til at godkende API-anmodninger.
⏱️ Offlinevenlig – Venner kan se delte playlister, selvom de ikke var online, da playlisten blev delt. Alt gemmes i databasen!

Nøglebegreber, du har lært

Kommunikation i realtid med Socket.io (WebSockets)
Databaserelationer ved hjælp af MongoDB ObjectId-referencer
Denormalisering for ydeevne (lagring af både ObjectId og brugernavn)
RESTful API-design (GET, POST-slutpunkter med korrekte HTTP-statuskoder)
Middleware-mønster til godkendelse og anmodningsbehandling
Async/await til håndtering af asynkrone operationer
DOM-manipulation til dynamisk opdatering af brugergrænsefladen
Hændelsesdrevet arkitektur med Socket.io-hændelser

Fejlfinding af almindelige problemer

"Kan ikke "opret forbindelse til MongoDB" – Sørg for, at din MongoDB-server kører, og at din MONGODB_URI i .env er korrekt.
"Ugyldige legitimationsoplysninger" ved login – Dobbelttjek dit brugernavn og din adgangskode. Husk, at de skelner mellem store og små bogstaver!
"Bruger ikke fundet" ved tilføjelse af ven – Sørg for, at du skriver det nøjagtige brugernavn (der skelner mellem store og små bogstaver). De skal have registreret sig først.
Delte afspilningslister vises ikke – Tjek din browsers konsol (F12) for fejl. Sørg for, at begge brugere er venner, og at afkrydsningsfeltet "Del med venner" er markeret.
Notifikationer i realtid virker ikke – Sørg for, at Socket.io er forbundet. Tjek browserkonsollen for "🔗 Forbundet til server".

Næste trin og idéer til udvidelse

Nu hvor du har en fungerende social musikapp, er her nogle idéer til at tage det videre:

Venneforespørgsler – I stedet for øjeblikkeligt venskab, kræves det, at brugerne sender anmodninger, der kan accepteres eller afvises
Privat besked – Tilføj et chatsystem ved hjælp af Socket.io, så venner kan sende beskeder til hinanden
Kommentarer til afspilningslister – Lad brugerne kommentere på delte afspilningslister
Synes godt om/synes ikke godt om numre – Tilføj tommelfinger op/ned-knapper til hvert nummer i en afspilningsliste
Kompatibilitet med musiksmag – Beregn en procentdel baseret på, hvor ens to brugeres musikpræferencer er
Søg efter brugere – Tilføj en søgefunktion for at finde brugere efter brugernavn
Slet/fjern venneskab – Tilføj muligheden for at fjerne venner eller slette delte afspilningslister
Profilsider – Vis brugerstatistikker, yndlingsstemninger og seneste afspilningslister
Samarbejdsafspilningslister – Lad flere venner tilføje numre til en delt afspilningsliste
Afspilningslistehistorik – Se alle dine tidligere genererede afspilningslister

Du har bygget en komplet social musikapp med realtidsfunktioner og vedvarende datalagring! Dette er et solidt fundament for at forstå moderne webudvikling. Fortsæt med at eksperimentere og bygge!🎵✨