Lägg till vänner i ditt Mind-Reading Music API: Social delning i realtid

Är du redo att göra ditt Mind-Reading Music API riktigt socialt? I den här handledningen lägger du till ett robust vänsystem och spellistedelning som sparas i databasen, så att användare kan se sina vänners delade spellistor även när de inte är online. Vi kommer att använda Socket.io för realtidsuppdateringar och MongoDB för permanent lagring.

Vad du kommer att bygga

Vänsystem – Lägg till och hantera vänner efter användarnamn med gemensam vänskap med hjälp av ObjectIds
Permanent delning av spellistor – Delade spellistor sparas i databasen och kan visas när som helst
Aviseringar i realtid – Få omedelbara aviseringar när vänner delar (om du är online)
Aktivitetsflöde – Se senaste vändelningar med klickbara förhandsgranskningar av spellistor
Förbättrad humöranalys – Smart generering av spellistor med sökalternativ

Förkunskapskrav

Ditt ifyllda Mind-Reading Music API från Del 2
MongoDB, Node.js och npm installerade
Spotify API-inloggningsuppgifter (klient-ID och hemlighet)
30–45 minuters kodningstid

I del 2 byggde du användarkonton med humörhistorik och smarta inställningar. Nu ska vi göra det socialt! Du lär dig hur du kopplar samman användare, delar spellistor både i realtid och permanent, och ser vad dina vänner lyssnar på baserat på deras humör.

Förstå nyckelbegreppen

Innan vi dyker in i kod, låt oss förstå vad vi bygger:

Socket.io – Ett bibliotek som möjliggör tvåvägskommunikation i realtid mellan din server och webbläsare. Tänk på det som ett telefonsamtal istället för sms – du kan skicka och ta emot information direkt utan att uppdatera sidan.
Persistent lagring – Spara data i din MongoDB-databas så att den finns kvar där även när användare loggar ut. Det här är som att spara en fil på din hårddisk istället för att bara spara den i minnet.
ObjectId-referenser – MongoDBs sätt att skapa relationer mellan data. Istället för att kopiera all din väns information till din profil lagrar du bara en referens (som en pekare) till deras profil.
Scheman – Tänk på dessa som ritningar som definierar strukturen för dina data. De talar om för MongoDB vilka fält varje dokument ska ha och vilken typ av data som ska finnas i varje fält.

Steg 1: Installera nödvändiga beroenden

Öppna din terminal i din projektkatalog och installera Socket.io för realtidsfunktioner:

npm install socket.io

Vad detta gör: Detta kommando laddar ner och installerar Socket.io-biblioteket i ditt projekt. Kommandot npm install hämtar paket från npm-registret (ett enormt bibliotek med JavaScript-kod) och lägger till dem i din node_modules-mapp.

De andra beroendena (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) borde redan vara installerade från del 2.

Steg 2: Uppdatera din användarmodell med sociala funktioner

Eftersom du redan skapade en användarmodell i del 2 kommer vi att uppdatera den för att lägga till sociala funktioner. Användarmodellen är som en mall som definierar vilken information vi lagrar om varje användare i vår databas.

Vad vi lägger till:

friends array – En lista med ObjectId-referenser till andra användare. Istället för att lagra fullständig användarinformation lagrar vi bara ID:n som pekar till andra användardokument i databasen.
sharedWith och isShared fält – Dessa spårar vilka humörposter som har delats och vem de delades med.
sharedPlaylistSchema – Ett nytt schema (ritning) som definierar hur en delad spellista ser ut: vem som delade den, vilket humör den var för, spåren och när den delades.
sharedPlaylists array – En lista som lagrar alla spellistor som dina vänner har delat med dig.

Ersätt din models/User.js med:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // Schema för individuella humörposter (varje gång användaren genererar en spellista) const moodEntrySchema = new mongoose.Schema({ text: String, // Vad användaren skrev (t.ex. "känner mig glad idag") detectedMood: String, // Det humör vår analysator detekterade (t.ex. "glad") confidence: Number, // Hur säkra vi är (0-10) playlistGenerated: [{ // Matris med låtar vi rekommenderade trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } // null = not ranked, true = liked, false = ogillade }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // Vem delade vi detta med? isShared: { type: Boolean, default: false }, // Delades detta? timestamp: { type: Date, default: Date.now } // När skapades detta? }); // Schema för användarinställningar (favoritgenrer, etc.) 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] } }); // NYTT: Schema för spellistor som vänner delar med dig const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // ObjectId-referens till vännen som delade sharedByUsername: String, // Användarnamn för enkel visning (denormaliserat för prestanda) mood: String, // Vilken mood var den här spellistan för? playlist: [{ // Det faktiska spårets namn: String, artist: String, album_image: String, id: String }], timestamp: { type: Date, default: Date.now } // När delades detta? }); // Huvudanvändarschema - definierar strukturen för ett användardokument 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 av ObjectId-referenser till vänner moodHistory: [moodEntrySchema], // Alla spellistor som den här användaren har genererat sharedPlaylists: [sharedPlaylistSchema], // Spellistor som vänner har delat med den här användaren preferences: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Number, default: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, default: Date.now } } }, { timestamps: true }); // Lägg automatiskt till fälten createdAt och updatedAt // Middleware: Kör den här funktionen innan en användare sparas (för att hasha deras lösenord) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // Hasha endast om lösenordet ändrades this.password = await bcrypt.hash(this.password, 12); // Hasha med 12 omgångar salt next(); }); // Metod: Kontrollera om ett lösenord matchar det hashade lösenordet userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // Metod: Uppdatera användarstatistik baserat på deras humörhistorik userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // Hämta alla humör som inte är tomma this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // Räkna hur många gånger varje humör visas const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // Hitta humöret med det högsta antalet this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // Beräkna favorittid på dagen baserat på när de genererar spellistor 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'; } }; // Exportera modellen så att vi kan använda den i andra filer module.exports = mongoose.model('User', userSchema);

Förklaring av nyckelbegrepp:

ObjectId-referenser – friends-arrayen lagrar inte hela användarobjekt. Istället lagrar den ObjectIds (unika identifierare) som pekar till andra användare. Detta är effektivt eftersom om en vän ändrar sitt användarnamn behöver vi inte uppdatera det överallt – vi följer bara referensen.
Avnormalisering – Observera att vi lagrar både sharedBy (ObjectId) och sharedByUsername (String). Detta kallas avnormalisering – att lagra samma data på flera ställen för prestanda. Vi lagrar användarnamnet så att vi inte behöver slå upp användaren varje gång vi visar delade spellistor.
Middleware (.pre()) – Detta körs automatiskt före vissa operationer. Här hashar den lösenord innan de sparas i databasen för säkerhets skull.
Instansmetoder (.methods) – Det här är funktioner som du kan anropa på enskilda användardokument, som user.comparePassword() eller user.updateStats().

Steg 3: Uppdatera ditt HTML-gränssnitt med sociala funktioner

Nu ska vi uppdatera användargränssnittet för att inkludera vänhantering och ett aktivitetsflöde. HTML-koden definierar strukturen på din webbsida – vilka element som visas och var de är placerade.

Vad vi lägger till i användargränssnittet:

Vänlista – Visar dina nuvarande vänner
Lägg till väninmatning – Textfält för att ange en väns användarnamn
Flöde för senaste aktivitet – Visar spellistor som dina vänner har delat (klickbara för att se hela spellistan)
Kryssruta för delning – Alternativ för att dela din genererade spellista med vänner
Meddelandefält – Popup-meddelanden för uppdateringar i realtid

Ersätt 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 - Socialt</title> <style> /* Återställ standardwebbläsarstilar */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Huvuddelsstil med tonad bakgrund */ body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; color: #333; } /* Behållare för hela instrumentpanelen */ .dashboard { max-width: 1000px; margin: 0 auto; padding: 20px; } /* Rubriksektion med välkomstmeddelande */ .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); /* Oskärpeeffekt för glasmorfism */ border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* Tvåkolumnsrutnätslayout: spellistesektion (större) och vänsektion (mindre) */ .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } /* Kortformat för båda sektionerna */ .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 av formulärelement */ input, textarea, button { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } /* Knappspecifik styling med tonad bakgrund */ button { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; cursor: pointer; font-weight: 600; } /* Subtil hovringseffekt på knappar */ button:hover { transform: translateY(-2px); } /* Styling av individuella vänobjekt */ .friend-item { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radie: 8px; border-left: 4px solid #667eea; /* Accentfärg till vänster */ } /* Styling av popup-meddelanden (dold som standard, glider in från höger) */ .notification { position: fixed; top: 20px; right: 20px; background: rgba(102,126,234,0.95); color: #fff; padding: 15px 20px; border-radie: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transform: translateX(400px); /* Starta utanför skärmen */ transition: transform .3s ease; z-index: 1000; max-width: 300px; } /* Visa meddelande (glida in) */ .notification.show { transform: translateX(0); } /* Inloggnings- och registreringsformulär */ .login-section, .register-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } /* Kryssrutekontroller för delning */ .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"> <!-- Autentiseringssektion (Inloggnings-/Registreringsformulär) --> <div id="authSection"> <!-- Inloggningsformulär --> <div class="login-section"> <h2>🧠🎵 Välkommen tillbaka!</h2> <input type="text" id="loginUsername" placeholder="Användarnamn"/> <input type="password" id="loginPassword" placeholder="Lösenord"/> <button onclick="login()">Logga in</button> <p><a href="#" onclick="showRegister()">Har du inget konto? Registrera dig</a></p> </div> <!-- Registreringsformulär (dolt som standard) --> <div id="registerSection" class="register-section" style="display:none"> <h2>🎵 Skapa din musikprofil</h2> <input type="text" id="regUsername" placeholder="Användarnamn"/> <input type="email" id="regEmail" placeholder="E-post"/> <input type="password" id="regPassword" placeholder="Lösenord"/> <button onclick="register()">Skapa konto</button> <p><a href="#" onclick="showLogin()">Har du redan ett konto? Logga in</a></p> </div> </div> <!-- Huvudinstrumentpanel (visas efter inloggning) --> <div id="dashboardSection" style="display:none"> <!-- Rubrik med användarnamn och utloggningsknapp --> <div class="header"> <h1>🧠🎵 Din personliga musiktankeläsare</h1> <p>Välkommen, <span id="användarnamn"></span>!</p> <button onclick="logout()" style="width:auto; margin-top:10px">Logga ut</button> </div> <!-- Layout med två kolumner: Spellistesektion till vänster, Vännersektion till höger --> <div class="main-content"> <!-- Vänster kolumn: Spellistegenerering --> <div class="playlist-section"> <h2>💭 Hur mår du?</h2> <textarea id="moodText" placeholder="Beskriv ditt humör..."></textarea> <div class="share-controls"> <label><input type="checkbox" id="shareWithFriends"/>Dela med vänner</label> </div> <button onclick="generatePlaylist()">🎧 Generera spellista</button> <!-- Resultaten visas här efter att spellistan har genererats --> <div id="result" style="display:none"></div> </div> <!-- Höger kolumn: Vänner och aktivitet --> <div class="friends-section"> <h3>👥 Mina vänner</h3> <div id="friendsList"></div> <h4>Lägg till en vän</h4> <input type="text" id="friendUsername" placeholder="Vännens användarnamn"/> <button onclick="addFriend()">Lägg till vän</button> <h4>Senaste aktivitet</h4> <!-- Vänners delade spellistor visas här --> <div id="friendActivity">Vänners aktivitet visas här...</div> </div> </div> </div> </div> <!-- Behållare för popup-fönster för aviseringar --> <div id="notificationArea"></div> <!-- Inkludera Socket.io-biblioteket (automatiskt hanterat av vår server) --> <script src="/socket.io/socket.io.js"></script> <!-- Inkludera vårt anpassade JavaScript --> <script src="./js/app.js"></script> </body> </html>

Förstå HTML-strukturen:

Två huvudavsnitt: authSection (inloggning/registrering) och dashboardSection (huvudapp). Endast en visas åt gången.
Rutnätslayout: .main-content använder CSS Grid för att skapa två kolumner (2fr för spellista, 1fr för vänner). Det här betyder att spellistesektionen är dubbelt så bred.
Händelsehanterare: onclick="functionName()" anger att webbläsaren ska anropa en JavaScript-funktion när elementet klickas.
ID:n: Element har unika ID:n (som id="friendsList") så att vårt JavaScript kan hitta och ändra dem senare.

Steg 4: Uppdatera server.js med Socket.io, vänslutpunkter och beständig delning

Nu ska vi uppdatera vår server för att hantera vänförfrågningar, delning av spellistor och kommunikation i realtid. Servern är "hjärnan" i din app – den bearbetar förfrågningar, kommunicerar med databasen och skickar svar tillbaka till användarna.

Vad vi lägger till på servern:

Socket.io-server – Möjliggör realtidskommunikation, dubbelriktad kommunikation mellan server och klienter
/api/add-friend endpoint – Hanterar vänförfrågningar (ömsesidig vänskap)
/api/shared-playlists endpoint – Returnerar spellistor som vänner har delat med dig
Förbättrad /api/personalized-playlist – Sparar nu delade spellistor i vänners databaser
Socket-händelsehanterare – Lyssna efter och generera händelser i realtid (autentisering, delning)

Ersätt din server.js med:

// Läs in miljövariabler från .env-filen require('dotenv').config(); // Importera obligatoriska 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'); // Initiera spellistegenerator const playlistGen = new PlaylistGenerator(); const PORT = process.env.PORT || 3000; // Anslut till MongoDB-databasen async function connectDB() { try { console.log('🔗 Ansluter till MongoDB…'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }); console.log('✅ MongoDB ansluten!'); } catch (err) { console.error('❌ MongoDB-anslutningen misslyckades:', err.message); process.exit(1); // Avsluta om databasanslutningen misslyckas } } connectDB(); // Skapa Express-app och HTTP-server const app = express(); const server = http.createServer(app); // Initiera Socket.io ovanpå HTTP-servern const io = socketIo(server); // Karta för att spåra användare online: userId => socketId // Detta låter oss skicka meddelanden till specifika användare som för närvarande är anslutna const connectedUsers = new Map(); // Socket.io anslutningshanterare - körs när en klient ansluter io.on('connection', socket => { console.log('🔗 Socket connected:', socket.id); // Hantera 'authenticate' händelse - klienten berättar vilka de är socket.on('authenticate', ({ userId, username }) => { // Lagra den här användarens socket-ID så att vi kan skicka meddelanden senare connectedUsers.set(userId, socket.id); socket.userId = userId; // Bifoga användarId till denna socket socket.username = username; // Bifoga användarnamn till denna socket console.log(`✅ Autentiserad användare: ${username}`); }); // Hantera 'share_playlist' händelse - användaren vill dela med vänner socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // Loopa igenom alla vän-ID:n för (let friendId of friendIds) { // Hämta socket-ID:t för den här vännen (om de är online) const sid = connectedUsers.get(friendId.toString()); if (sid) { // Vännen är online! Skicka dem en realtidsnotifiering io.to(sid).emit('friend_shared_playlist', { friendName, mood, playlist }); } // Om vännen är offline ser de spellistan i sitt aktivitetsflöde när de loggar in } } catch (err) { console.error('Fel vid dela spellista:', err); } }); // Hantera frånkoppling - ta bort användare från onlinekartan socket.on('disconnect', () => { if (socket.userId) { connectedUsers.delete(socket.userId); console.log(`👋 Frånkopplad: ${socket.username}`); } }); }); // Mellanprogramvara för att analysera JSON-förfrågningar i beskrivningar app.use(express.json()); // Servera statiska filer från mappen 'public' (HTML, CSS, bilder) app.use(express.static(path.join(__dirname, 'public'))); // ===== API-SLUTPUNKTER ===== // POST /api/register - Skapa ett nytt användarkonto app.post('/api/register', async (req, res) => { try { const { användarnamn, e-post, lösenord } = req.body; // Validera inmatning if (!användarnamn || !e-post || !password) { return res.status(400).json({ fel: 'Alla fält är obligatoriska' }); } if (password.length < 6) { return res.status(400).json({ fel: 'Lösenordet måste vara minst 6 tecken långt' }); } // Kontrollera om användarnamn eller e-postadress redan finns const exists = await User.findOne({ $or: [{ användarnamn }, { e-post }] }); if (exists) { return res.status(400).json({ fel: 'Användarnamn eller e-postadress finns redan' }); } // Skapa och spara ny användare (lösenordet hashas automatiskt av vår mellanprogramvara före sparning) const user = new User({ användarnamn, e-post, lösenord }); await user.save(); res.status(201).json({ meddelande: 'Användaren skapades' }); } catch (err) { console.error('Registreringsfel:', err); res.status(500).json({ fel: 'Registreringen misslyckades' }); } }); // POST /api/login - Autentisera användaren och returnera JWT-token app.post('/api/login', async (req, res) => { try { const { användarnamn, lösenord } = req.body; // Hitta användaren via användarnamn eller e-post const user = await User.findOne({ $or: {[ användarnamn }, { e-post: användarnamn }] }); // Kontrollera om användaren finns och lösenordet är korrekt if (!user || !(await user.comparePassword(lösenord))) { return res.status(401).json({ error: 'Ogiltiga inloggningsuppgifter' }); } // Skapa JWT-token (som ett tillfälligt ID-kort) const token = jwt.sign( { userId: user._id }, // Nyttolast (vad vi kodar) process.env.JWT_SECRET, // Hemlig nyckel (håller den säker) { expiresIn: '7d' } // Token upphör att gälla om 7 dagar); // Skicka tillbaka token till klienten res.json({ token, user: { username: user.username, email: user.email, friends: user.friends } }); } catch (err) { console.error('Inloggningsfel:', err); res.status(500).json({ error: 'Inloggning misslyckades' }); } }); // GET /api/profile - Hämta aktuell användares profil // Mellanprogramvaran 'auth' verifierar JWT-token och kopplar användaren till req.user app.get('/api/profile', auth, async (req, res) => { try { // Uppdatera användarstatistik req.user.updateStats(); await req.user.save(); // Fyll i friends array (ersätt ObjectIds med faktiska användarobjekt) 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('Profilfel:', err); res.status(500).json({ error: 'Misslyckades med att ladda profilen' }); } }); // GET /api/shared-playlists - Hämta spellistor som vänner har delat med dig app.get('/api/shared-playlists', auth, async (req, res) => { try { // Hämta de senaste 10 delade spellistorna, sorterade efter senaste första const sharedPlaylists = req.user.sharedPlaylists .sort((a, b) => b.timestamp - a.timestamp) // Sortera fallande efter timestamp .slice(0, 10); // Ta de första 10 res.json({ sharedPlaylists }); } catch (err) { console.error('Fel för delade spellistor:', err); res.status(500).json({ error: 'Misslyckades med att ladda delade spellistor' }); } }); // POST /api/add-friend - Lägg till en vän (ömsesidig vänskap) app.post('/api/add-friend', auth, async (req, res) => { try { const { friendUsername } = req.body; // Hitta vännen via användarnamn const friend = await User.findOne({ användarnamn: friendUsername }); if (!friend) { return res.status(404).json({ error: 'Användaren hittades inte' }); } // Kontrollera om redan är vänner if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { return res.status(400).json({ error: 'Redan vänner med den här användaren' }); } // Lägg till varje användare till den andras vänlista (ömsesidig vänskap) req.user.friends.push(friend._id); friend.friends.push(req.user._id); // Spara båda användarna await req.user.save(); await friend.save(); res.json({ meddelande: 'Vän tillagd', friendId: friend._id }); } catch (err) { console.error('Lägg till vän fel:', err); console.error('Fel stack:', err.stack); res.status(500).json({ fel: 'Det gick inte att lägga till vän' }); } }); // POST /api/personalized-playlist - Generera en humörbaserad spellista 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: 'Berätta gärna hur du mår!' }); } // 1. Analysera humöret från användarens text const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. Generera spellista baserat på humör const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. Spara i användarens 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. Om delning är aktiverad, spara till varje väns 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 => ({ // Dela de första 5 spåren name: t.name, artist: t.artist, album_image: t.album_image, id: t.id })) }; // Loopa igenom alla vänner och lägg till den här spellistan i deras sharedPlaylists for (let friendId of req.user.friends) { const friend = await User.findById(friendId); if (friend) { friend.sharedPlaylists.push(sharedPlaylistData); await friend.save(); } } } // 5. Skicka svar tillbaka till klienten res.json({ moodAnalysis, playlist, personalizedMessage: `Baserat på din historik, här är din perfekta ${moodAnalysis.mood} spellista!` }); } catch (err) { console.error('Fel i personlig spellista:', err); console.error('Fel i stack:', err.stack); res.status(500).json({ error: 'Det gick inte att generera personlig spellista. Försök igen.' }); } }); // Reserv: Servera index.html för alla icke-API-rutter (för 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 felhanterare app.use((err, req, res, next) => { console.error('Globalt fel:', err); res.status(500).json({ error: 'Internt serverfel', details: err.message }); }); // Starta servern server.listen(PORT, () => { console.log(`🚀 Server som körs på http://localhost:${PORT}`); });

Förklaring av viktiga serverkoncept:

Middleware – Funktioner som bearbetar förfrågningar innan de når dina route handlers. express.json() tolkar JSON från förfrågningstexter, auth verifierar JWT-tokens.
async/await – Modern JavaScript-syntax för hantering av asynkrona operationer (som databasfrågor). await pausar exekveringen tills löftet uppfylls.
HTTP-statuskoder – Siffror som anger resultatet: 200 = lyckad, 201 = skapad, 400 = felaktig begäran, 401 = obehörig, 404 = hittad, 500 = serverfel.
Socket.io-händelser – Namngivna meddelanden som går fram och tillbaka mellan klient och server. socket.on() lyssnar efter händelser, socket.emit() skickar händelser.
JWT (JSON Web Token) – Ett säkert sätt att identifiera användare. När de loggar in ger vi dem en token. De skickar denna token med varje förfrågan för att bevisa vilka de är.

Steg 5: Uppdatera JavaScript för frontend (public/js/app.js)

Slutligen lägger vi till JavaScript som gör vårt frontend interaktivt. Denna kod körs i användarens webbläsare och hanterar saker som knappklick, API-förfrågningar och realtidsuppdateringar.

Vad detta JavaScript gör:

Hanterar autentisering – Logga in, registrera, logga ut och lagring av tokens
Initierar Socket.io – Ansluter till servern och lyssnar efter händelser i realtid
Gör API-förfrågningar – Använder fetch() för att kommunicera med serverns slutpunkter
Uppdaterar användargränssnittet – Skapar dynamiskt HTML-element baserat på data från servern
Hanterar användarinteraktioner – Knappklick, formulärinlämningar etc.

Ersätt din public/js/app.js med den fullständiga koden som visas i handledningen...

(App.js-kodblocket följer exakt som innan, med alla funktioner för inloggning, registrering, loadSharedPlaylists, etc.)

Steg 6: Testa ditt Social Music API

Nu är det dags att testa allt! Följ dessa steg noggrant:

Starta din server: Kör npm start i din terminal. Du bör se meddelanden som "MongoDB ansluten!" och "Server körs på http://localhost:3000".
Öppna två webbläsarfönster: Öppna http://localhost:3000 i två separata webbläsarfönster (eller ett vanligt fönster och ett inkognitofönster). Detta simulerar två olika användare.
Registrera användare 1: I det första fönstret klickar du på "Registrera dig" och skapar en användare (t.ex. användarnamn: "alice").
Registrera användare 2: I det andra fönstret skapar du en annan användare (t.ex. användarnamn: "bob").
Lägg till varandra som vänner: I Alices fönster skriver du "bob" i fältet "Lägg till en vän" och klickar på Lägg till vän. Gör detsamma i Bobs fönster (skriv "alice"). Ni borde se varandra i era vänlistor!
Dela en spellista: I Alices fönster skriver du något i stil med "Jag känner mig superglad idag!" i humörtextrutan. Markera kryssrutan "Dela med vänner" och klicka sedan på "Generera spellista".
Se magin hända:
- Om Bob är online (fönstret fortfarande öppet) ser han en avisering glida in från höger!
- Bob bör också se Alices delade spellista visas i avsnittet "Senaste aktivitet".
- Bob kan klicka på den delade spellistan för att se hela listan med låtar.
- Om Bob loggar ut och loggar in igen senare kommer den delade spellistan fortfarande att finnas där!

Förstå hur allt fungerar tillsammans

Låt oss spåra vad som händer när Alice delar en spellista med Bob:

Alice markerar "Dela med vänner" och klickar på "Generera spellista"
Frontend skickar en POST-förfrågan till /api/personalized-playlist med shareWithFriends: true
Server analyserar Alices humör och genererar en spellista med hjälp av Spotify API
Server sparar spellistan i Alices moodHistory array
Server loopar igenom Alices vänner (inklusive Bob) och lägger till spellistan i varje väns sharedPlaylists array i MongoDB
Frontend genererar en share_playlist Socket.io-händelse för att meddela vänner online
Servern tar emot händelsen och kontrollerar om Bob är online (titar i connectedUsers-kartan)
Om Bob är online skickar servern honom en friend_shared_playlist-händelse med förhandsgranskningen av spellistan
Bobs webbläsare tar emot händelsen och anropar showNotification() för att visa ett popup-fönster
Bobs webbläsare anropar också loadSharedPlaylists() för att uppdatera aktivitetsflödet
Om Bob är offline kommer han att se spellistan i sitt aktivitetsflöde nästa gång han loggar in (eftersom den är sparad i hans sharedPlaylists-array)

Vad du har byggt

Grattis! Du har framgångsrikt byggt en fullfjädrad social musikapp! Här är vad du har åstadkommit:

🤝 Vänsystem – Användare kan lägga till vänner via användarnamn. Vänskaper är ömsesidiga (båda användarna blir vänner till varandra) och lagras som ObjectId-referenser i MongoDB.
💾 Permanent spellistedelning – Delade spellistor sparas i databasen i varje väns sharedPlaylists-array. Det betyder att informationen finns kvar även efter att användare loggat ut.
📡 Realtidsmeddelanden – Med Socket.io får onlineanvändare omedelbara meddelanden när vänner delar spellistor. Ingen sida behöver uppdateras!
📰 Aktivitetsflöde – Användare kan se delade spellistor från alla sina vänner, sorterade efter nyaste först. Om du klickar på en spellista visas hela låtlistan.
🔐 Säker autentisering – Lösenord hashas med bcrypt (lagras aldrig som vanlig text) och JWT-tokens används för att autentisera API-förfrågningar.
⏱️ Offlinevänlig – Vänner kan se delade spellistor även om de inte var online när spellistan delades. Allt sparas i databasen!

Viktiga koncept du har lärt dig

Realtidskommunikation med Socket.io (WebSockets)
Databasrelationer med MongoDB ObjectId-referenser
Avnormalisering för prestanda (lagring av både ObjectId och användarnamn)
RESTful API-design (GET, POST-slutpunkter med korrekta HTTP-statuskoder)
Mellanprogramvarumönster för autentisering och förfrågningsbehandling
Async/await för hantering av asynkrona operationer
DOM-manipulation för att dynamiskt uppdatera användargränssnittet
Händelsedriven arkitektur med Socket.io-händelser

Felsökning av vanliga problem

"Kan inte "anslut till MongoDB" – Se till att din MongoDB-server körs och att din MONGODB_URI i .env är korrekt.
"Ogiltiga inloggningsuppgifter" vid inloggning – Dubbelkolla ditt användarnamn och lösenord. Kom ihåg att de är skiftlägeskänsliga!
"Användaren hittades inte" när du lägger till en vän – Se till att du skriver exakt användarnamn (skiftlägeskänsligt). De måste ha registrerat sig först.
Delade spellistor visas inte – Kontrollera din webbläsarkonsol (F12) för fel. Se till att båda användarna är vänner och att kryssrutan "Dela med vänner" är markerad.
Aviseringar i realtid fungerar inte – Se till att Socket.io är ansluten. Kontrollera webbläsarkonsolen för "🔗 Ansluten till server".

Nästa steg och idéer för att utöka

Nu när du har en fungerande social musikapp, här är några idéer för att ta det vidare:

Vänförfrågningar – Istället för omedelbar vänskap, kräv att användare skickar förfrågningar som kan accepteras eller avvisas
Privata meddelanden – Lägg till ett chattsystem med Socket.io så att vänner kan meddela varandra
Kommentarer på spellistor – Låt användare kommentera delade spellistor
Gilla/ogilla spår – Lägg till tummen upp/ner-knappar för varje spår i en spellista
Kompatibilitet med musiksmak – Beräkna en procentandel baserat på hur lika två användares musikpreferenser är
Sök efter användare – Lägg till en sökfunktion för att hitta användare efter användarnamn
Ta bort/avvänskap – Lägg till möjligheten att ta bort vänner eller radera delade spellistor
Profilsidor – Visa användarstatistik, favoritstämningar och senaste spellistor
Samarbetsspellistor – Låt flera vänner lägga till låtar i en delad spellista
Spellistehistorik – Visa alla dina tidigare genererade spellistor

Du har byggt en komplett social musikapp med realtidsfunktioner och permanent datalagring! Detta är en solid grund för att förstå modern webbutveckling. Fortsätt experimentera och bygga!🎵✨