Legg til venner i ditt Mind-Reading Music API: Deling i sanntid på sosiale medier

Klar til å gjøre ditt Mind-Reading Music API virkelig sosialt? I denne veiledningen legger du til et robust vennesystem og deling av spillelister som lagres i databasen, slik at brukere kan se vennenes delte spillelister selv når de ikke er online. Vi bruker Socket.io for oppdateringer i sanntid og MongoDB for permanent lagring.

Hva du skal bygge

Vennesystem – Legg til og administrer venner etter brukernavn med gjensidig vennskap ved hjelp av ObjectIds
Vedvarende deling av spillelister – Delte spillelister lagres i databasen og kan vises når som helst
Varsler i sanntid – Få øyeblikkelige varsler når venner deler (hvis du er online)
Aktivitetsfeed – Se nylige vennedelinger med klikkbare forhåndsvisninger av spillelister
Forbedret humøranalyse – Smart generering av spillelister med søkealternativer

Forutsetninger

Ditt fullførte Mind-Reading Music API fra Del 2
MongoDB, Node.js og npm installert
Spotify API-legitimasjon (klient-ID og hemmelighet)
30–45 minutter med kodetid

I del 2 bygde du brukerkontoer med humørhistorikk og smarte preferanser. Nå skal vi gjøre det sosialt! Du lærer hvordan du kobler sammen brukere, deler spillelister både i sanntid og permanent, og ser hva vennene dine lytter til basert på humøret deres.

Forstå nøkkelbegrepene

Før vi dykker ned i kode, la oss forstå hva vi bygger:

Socket.io – Et bibliotek som muliggjør toveiskommunikasjon i sanntid mellom serveren og nettleseren din. Tenk på det som en telefonsamtale i stedet for tekstmeldinger – du kan sende og motta informasjon umiddelbart uten å oppdatere siden.
Vedvarende lagring – Lagrer data i MongoDB-databasen din, slik at de forblir der selv når brukere logger ut. Dette er som å lagre en fil på harddisken din i stedet for bare å holde den i minnet.
ObjectId-referanser – MongoDBs måte å opprette relasjoner mellom data på. I stedet for å kopiere all vennens informasjon til profilen din, lagrer du bare en referanse (som en peker) til profilen deres.
Skjemaer – Tenk på disse som blåkopier som definerer strukturen til dataene dine. De forteller MongoDB hvilke felt hvert dokument skal ha og hvilken type data som skal i hvert felt.

Trinn 1: Installer nødvendige avhengigheter

Åpne terminalen i prosjektkatalogen din og installer Socket.io for sanntidsfunksjoner:

npm install socket.io

Hva dette gjør: Denne kommandoen laster ned og installerer Socket.io-biblioteket i prosjektet ditt. Kommandoen npm install henter pakker fra npm-registeret (et stort bibliotek med JavaScript-kode) og legger dem til i node_modules-mappen din.

De andre avhengighetene (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) skal allerede være installert fra del 2.

Trinn 2: Oppdater brukermodellen din med sosiale funksjoner

Siden du allerede opprettet en brukermodell i del 2, oppdaterer vi den for å legge til sosiale funksjoner. Brukermodellen er som en mal som definerer hvilken informasjon vi lagrer om hver bruker i databasen vår.

Hva vi legger til:

friends array – En liste over ObjectId-referanser til andre brukere. I stedet for å lagre full brukerinformasjon, lagrer vi bare ID-er som peker til andre brukerdokumenter i databasen.
sharedWith og isShared feltene – Disse sporer hvilke stemningsoppføringer som har blitt delt og hvem de ble delt med.
sharedPlaylistSchema – Et nytt skjema (blåkopi) som definerer hvordan en delt spilleliste ser ut: hvem som delte den, hvilken stemning den var for, sporene og når den ble delt.
sharedPlaylists array – En liste som lagrer alle spillelistene vennene dine har delt med deg.

Erstatt models/User.js med:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // Skjema for individuelle stemningsoppføringer (hver gang brukeren genererer en spilleliste) const moodEntrySchema = new mongoose.Schema({ text: String, // Hva brukeren skrev (f.eks. "føler meg glad i dag") detectedMood: String, // Stemningen analysatoren vår oppdaget (f.eks. "glad") confidence: Number, // Hvor sikre vi er (0-10) playlistGenerated: [{ // Matrise med spor vi anbefalte trackName: String, artist: String, spotifyId: String, likte: { type: Boolean, default: null } // null = ikke vurdert, true = likte, false = mislikte }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'Bruker' }], // Hvem delte vi dette med? isShared: { type: Boolean, default: false }, // Ble dette delt? timestamp: { type: Date, default: Date.now } // Når ble dette opprettet? }); // Skjema for brukerpreferanser (favorittsjangere, osv.) const userPreferencesSchema = new mongoose.Schema({ favorittSjangere: [String], foretrukketEnerginivå: { type: Nummer, min: 0, maks: 1 }, mislikteArtister: [String], moodMusicMapping: { happy: [String], sad: [String], energetic: [String], chill: [String], angry: [String], romantic: [String], nostalgic: [String] } }); // NYTT: Skjema for spillelister som venner deler med deg const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // ObjectId-referanse til vennen som delte sharedByUsername: String, // Brukernavn for enkel visning (denormalisert for fremføring) mood: String, // Hvilken mood var denne spillelisten for? playlist: [{ // Navnet på det faktiske sporet: String, artist: String, album_image: String, id: String }], timestamp: { type: Date, default: Date.now } // Når ble dette delt? }); // Hovedbrukerskjema - definerer strukturen til et brukerdokument 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' }], // Matrise med ObjectId-referanser til venner moodHistory: [moodEntrySchema], // Alle spillelistene denne brukeren har generert sharedPlaylists: [sharedPlaylistSchema], // Spillelister som venner har delt med denne brukeren preferences: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Number, default: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, default: Date.now } } }, { timestamps: true }); // Legg automatisk til createdAt- og updatedAt-feltene // Mellomvare: Kjør denne funksjonen før du lagrer en bruker (for å hashe passordet deres) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // Hash bare hvis passordet ble endret this.password = await bcrypt.hash(this.password, 12); // Hash med 12 runder med salt next(); }); // Metode: Sjekk om et passord samsvarer med det hashede passordet userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // Metode: Oppdater brukerstatistikk basert på humørhistorikken deres 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) { // Tell hvor mange ganger hvert humør vises const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // Finn humøret med høyest antall this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'nøytral'); } else { this.stats.mostCommonMood = 'nøytral'; } // Beregn favoritttidspunkt på dagen basert på når de genererer spillelister 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 slik at vi kan bruke den i andre filer module.exports = mongoose.model('User', userSchema);

Nøkkelbegreper forklart:

ObjectId-referanser – friends-arrayet lagrer ikke hele brukerobjekter. I stedet lagrer den ObjectIds (unike identifikatorer) som peker til andre brukere. Dette er effektivt fordi hvis en venn endrer brukernavnet sitt, trenger vi ikke å oppdatere det overalt – vi følger bare referansen.
Denormalisering – Merk at vi lagrer både sharedBy (ObjectId) og sharedByUsername (String). Dette kalles denormalisering – lagring av de samme dataene flere steder for ytelse. Vi lagrer brukernavnet slik at vi ikke trenger å slå opp brukeren hver gang vi viser delte spillelister.
Middleware (.pre()) – Dette kjører automatisk før visse operasjoner. Her hashes passord før de lagres i databasen av sikkerhetshensyn.
Instansmetoder (.methods) – Dette er funksjoner du kan kalle på individuelle brukerdokumenter, som user.comparePassword() eller user.updateStats().

Trinn 3: Oppdater HTML-grensesnittet ditt med sosiale funksjoner

La oss nå oppdatere brukergrensesnittet for å inkludere venneadministrasjon og en aktivitetsfeed. HTML-koden definerer strukturen til nettsiden din – hvilke elementer som vises og hvor de er plassert.

Hva vi legger til i brukergrensesnittet:

Vennelisteseksjon – Viser dine nåværende venner
Legg til venn-inndata – Tekstfelt for å skrive inn en venns brukernavn
Feed for nylig aktivitet – Viser spillelister vennene dine har delt (klikkbar for å se hele spillelisten)
Avmerkingsboks for del – Mulighet for å dele den genererte spillelisten med venner
Varslingsområde – Popup-varsler for oppdateringer i sanntid

Erstatt 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 - Sosial <div id="authSection"> <!-- Innloggingsskjema --> <div class="login-section"> <h2>🧠🎵 Velkommen tilbake!</h2> <input type="text" id="loginUsername" placeholder="Brukernavn"/> <input type="password" id="loginPassword" placeholder="Passord"/> <button onclick="login()">Logg inn</button> <p><a href="#" onclick="showRegister()">Har du ikke en konto? Registrer deg</a></p> </div> <!-- Registreringsskjema (skjult som standard) --> <div id="registerSection" class="register-section" style="display:none"> <h2>🎵 Opprett din musikkprofil</h2> <input type="text" id="regUsername" placeholder="Brukernavn"/> <input type="email" id="regEmail" placeholder="E-post"/> <input type="password" id="regPassword" placeholder="Passord"/> <button onclick="register()">Opprett konto</button> <p><a href="#" onclick="showLogin()">Har du allerede en konto? Logg inn</a></p> </div> </div> <!-- Hoveddashbordseksjon (vises etter innlogging) --> <div id="dashboardSection" style="display:none"> <!-- Topptekst med brukernavn og utloggingsknapp --> <div class="header"> <h1>🧠🎵 Din personlige musikk-tankeleser</h1> <p>Velkommen, <span id="brukernavn"></span>!</p> <button onclick="logout()" style="width:auto; margin-top:10px">Logg ut</button> </div> <!-- Oppsett med to kolonner: Spillelisteseksjon til venstre, Venneseksjon til høyre --> <div class="main-content"> <!-- Venstre kolonne: Spillelistegenerering --> <div class="playlist-section"> <h2>💭 Hvordan føler du deg?</h2> <textarea id="moodText" placeholder="Beskriv humøret ditt..."></textarea> <div class="share-controls"> <label><input type="checkbox" id="shareWithFriends"/>Del med venner</label> </div> <button onclick="generatePlaylist()">🎧 Generer spilleliste</button> <!-- Resultatene vises her etter at spillelisten er generert --> <div id="result" style="display:none"></div> </div> <!-- Høyre kolonne: Venner og aktivitet --> <div class="friends-section"> <h3>👥 Mine venner</h3> <div id="friendsList"></div> <h4>Legg til en venn</h4> <input type="text" id="friendUsername" placeholder="Vennens brukernavn"/> <button onclick="addFriend()">Legg til venn</button> <h4>Nylig aktivitet</h4> <!-- Venners delte spillelister vises her --> <div id="friendActivity">Venneaktivitet vises her...</div> </div> </div> </div> </div> <!-- Beholder for varslingspopup-vinduer --> <div id="notificationArea"></div> <!-- Inkluder Socket.io-biblioteket (automatisk betjent av serveren vår) --> <script src="/socket.io/socket.io.js"></script> <!-- Inkluder vår tilpassede JavaScript-kode --> <script src="./js/app.js"></script> </body> </html>

Forstå HTML-strukturen:

To hovedseksjoner: authSection (pålogging/registrering) og dashboardSection (hovedapper). Bare én er synlig om gangen.
Rutenettoppsett: .main-content bruker CSS Grid til å opprette to kolonner (2fr for spillelister, 1fr for venner). Dette betyr at spillelistedelen er dobbelt så bred.
Hendelsesbehandlere: onclick="functionName()" forteller nettleseren at den skal kalle en JavaScript-funksjon når elementet klikkes på.
ID-er: Elementer har unike ID-er (som id="friendsList") slik at JavaScript-koden vår kan finne og endre dem senere.

Trinn 4: Oppdater server.js med Socket.io, vennesluttpunkter og vedvarende deling

Nå skal vi oppdatere serveren vår for å håndtere venneforespørsler, deling av spillelister og kommunikasjon i sanntid. Serveren er «hjernen» i appen din – den behandler forespørsler, kommuniserer med databasen og sender svar tilbake til brukerne.

Hva vi legger til serveren:

Socket.io-server – Muliggjør sanntids, toveis kommunikasjon mellom server og klienter
/api/add-friend endepunkt – Håndterer venneforespørsler (gjensidig vennskap)
/api/shared-playlists endepunkt – Returnerer spillelister som venner har delt med deg
Forbedret /api/personalized-playlist – Lagrer nå delte spillelister i venners databaser
Socket-hendelsesbehandlere – Lytt etter og send sanntidshendelser (autentisering, deling)

Erstatt server.js med:

// Last inn miljøvariabler fra .env-filen 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 spillelistegenerator const playlistGen = new PlaylistGenerator(); const PORT = process.env.PORT || 3000; // Koble til MongoDB-database async function connectDB() { try { console.log('🔗 Kobler til MongoDB…'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }); console.log('✅ MongoDB tilkoblet!'); } catch (err) { console.error('❌ MongoDB-tilkobling mislyktes:', err.message); process.exit(1); // Avslutt hvis databasetilkoblingen mislykkes } } connectDB(); // Opprett Express-app og HTTP-server const app = express(); const server = http.createServer(app); // Initialiser Socket.io oppå HTTP-serveren const io = socketIo(server); // Kart for å spore brukere som er tilkoblet: userId => socketId // Dette lar oss sende meldinger til bestemte brukere som for øyeblikket er tilkoblet const connectedUsers = new Map(); // Socket.io tilkoblingshåndterer - kjører når en klient kobler til io.on('connection', socket => { console.log('🔗 Socket connected:', socket.id); // Håndterer 'authenticate' hendelse - klienten forteller oss hvem de er socket.on('authenticate', ({ userId, username }) => { // Lagrer denne brukerens socket-ID slik at vi kan sende dem meldinger senere connectedUsers.set(userId, socket.id); socket.userId = userId; // Legg ved brukerId til denne socketen socket.username = username; // Legg ved brukernavn til denne socketen console.log(`✅ Autentisert bruker: ${username}`); }); // Håndterer 'share_playlist' hendelse - brukeren ønsker å dele med venner socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // Går gjennom alle venn-ID-er for (let friendId of friendIds) { // Henter socket-ID-en for denne vennen (hvis de er online) const sid = connectedUsers.get(friendId.toString()); if (sid) { // Vennen er online! Send dem et varsel i sanntid io.to(sid).emit('friend_shared_playlist', { friendName, mood, playlist }); } // Hvis vennen er offline, vil de se spillelisten i aktivitetsfeeden sin når de logger inn } } catch (err) { console.error('Feil ved deling av spilleliste:', err); } }); // Håndter frakobling - fjern bruker fra online-kart socket.on('disconnect', () => { if (socket.userId) { connectedUsers.delete(socket.userId); console.log(`👋 Frakoblet: ${socket.username}`); } }); }); // Mellomvare for å analysere JSON-forespørsler app.use(express.json()); // Server statiske filer fra 'public'-mappen (HTML, CSS, bilder) app.use(express.static(path.join(__dirname, 'public'))); // ===== API-ENDEPUNKTER ===== // POST /api/register - Opprett en ny brukerkonto app.post('/api/register', async (req, res) => { try { const { brukernavn, e-post, passord } = req.body; // Valider input if (! brukernavn || !e-post || !passord) { return res.status(400).json({ feil: 'Alle felt er obligatoriske' }); } if (password.length < 6) { return res.status(400).json({ feil: 'Passordet må være minst 6 tegn' }); } // Sjekk om brukernavn eller e-post allerede finnes const exists = await User.findOne({ $or: [{ brukernavn }, { e-post }] }); if (exists) { return res.status(400).json({ feil: 'Brukernavn eller e-post finnes allerede' }); } // Opprett og lagre ny bruker (passordet blir hashet automatisk av vår mellomvare før lagring) const bruker = ny bruker({ brukernavn, e-post, passord }); await bruker.save(); res.status(201).json({ melding: 'Bruker opprettet' }); } catch (err) { console.error('Registreringsfeil:', err); res.status(500).json({ feil: 'Registrering mislyktes' }); } }); // POST /api/login - Autentiserer bruker og returnerer JWT-token app.post('/api/login', async (req, res) => { try { const { brukernavn, passord } = req.body; // Finn bruker etter brukernavn eller e-post const bruker = await Bruker.findOne({ $or: {[ brukernavn }, { e-post: brukernavn }] }); // Sjekk om brukeren finnes og passordet er riktig if (!bruker || !(await bruker.comparePassword(passord))) { return res.status(401).json({ feil: 'Ugyldig legitimasjon' }); } // Oppretter JWT-token (som et midlertidig ID-kort) const token = jwt.sign( { brukerId: bruker._id }, // Nyttelast (det vi koder) process.env.JWT_SECRET, // Hemmelig nøkkel (holder den sikker) { expiresIn: '7d' } // Token utløper om 7 dager); // Send token tilbake til klienten res.json({ token, bruker: { brukernavn: bruker.brukernavn, e-post: bruker.e-post, venner: bruker.venner } }); } catch (err) { console.error('Innloggingsfeil:', err); res.status(500).json({ feil: 'Innlogging mislyktes' }); } }); // GET /api/profile - Hent gjeldende brukers profil // Mellomvaren 'auth' verifiserer JWT-tokenet og knytter brukeren til req.user app.get('/api/profile', auth, async (req, res) => { try { // Oppdater brukerstatistikk req.user.updateStats(); await req.user.save(); // Fyll ut venner-array (erstatt objekt-ID-er med faktiske brukerobjekter) await req.user.populate('venner', 'brukernavn _id'); const { brukernavn, e-post, venner } = req.user; res.json({ _id: req.user._id, brukernavn, e-post, venner: venner.map(f => ({ brukernavn: f.brukernavn, _id: f._id })) }); } catch (err) { console.error('Profilfeil:', err); res.status(500).json({ feil: 'Klarte ikke å laste inn profil' }); } }); // GET /api/shared-playlists - Hent spillelister som venner har delt med deg app.get('/api/shared-playlists', auth, async (req, res) => { try { // Hent de 10 siste delte spillelistene, sortert etter nyeste først const sharedPlaylists = req.user.sharedPlaylists .sort((a, b) => b.timestamp - a.timestamp) // Sorter synkende etter timestamp .slice(0, 10); // Ta de første 10 res.json({ sharedPlaylists }); } catch (err) { console.error('Feil i delte spillelister:', err); res.status(500).json({ feil: 'Klarte ikke å laste inn delte spillelister' }); } }); // POST /api/add-friend - Legg til en venn (gjensidig vennskap) app.post('/api/add-friend', auth, async (req, res) => { try { const { friendUsername } = req.body; // Finn vennen etter brukernavn const friend = await User.findOne({ brukernavn: friendUsername }); if (!friend) { return res.status(404).json({ error: 'Bruker ikke funnet' }); } // Sjekk 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 brukeren' }); } // Legg til hver bruker i den andres venneliste (gjensidig vennskap) req.user.friends.push(friend._id); friend.friends.push(req.user._id); // Lagre begge brukerne await req.user.save(); await friend.save(); res.json({ message: 'Venn lagt til', friendId: friend._id }); } catch (err) { console.error('Legg til venn-feil:', err); console.error('Feil stack:', err.stack); res.status(500).json({ error: 'Klarte ikke å legge til venn' }); } }); // POST /api/personalized-playlist - Generer en humørbasert spilleliste 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: 'Fortell meg hvordan du føler deg!' }); } // 1. Analyser humøret fra brukerens tekst const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. Generer spilleliste basert på humør const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. Lagre i brukerens humørhistorikk 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 aktivert, lagre i hver venns 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 sporene name: t.name, artist: t.artist, album_image: t.album_image, id: t.id })) }; // Gå gjennom alle vennene og legg denne spillelisten til i deres delte spillelister 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 tilbake til klienten res.json({ moodAnalysis, playlist, personalizedMessage: `Basert på historikken din, her er din perfekte ${moodAnalysis.mood} spilleliste!` }); } catch (err) { console.error('Feil i personlig spilleliste:', err); console.error('Feil i stack:', err.stack); res.status(500).json({ error: 'Kunne ikke generere personlig spilleliste. Prøv igjen.' }); } }); // Fallback: Server index.html for alle ikke-API-ruter (for SPA-ruting) app.use((req, res, next) => { if (req.method === 'GET' && !req.path.startsWith('/api/')) { res.sendFile(path.join(__dirname, 'public', 'index.html')); } else { next(); } }); // Global feilbehandler app.use((err, req, res, next) => { console.error('Global feil:', err); res.status(500).json({ error: 'Intern serverfeil', details: err.message }); }); // Start serveren server.listen(PORT, () => { console.log(`🚀 Server kjører på http://localhost:${PORT}`); });

Viktige serverkonsepter forklart:

Mellomvare – Funksjoner som behandler forespørsler før de når rutebehandlerne dine. express.json() analyserer JSON fra forespørselsinnhold, auth verifiserer JWT-tokens.
async/await – Moderne JavaScript-syntaks for håndtering av asynkrone operasjoner (som databasespørringer). await pauser kjøringen til løftet er løst.
HTTP-statuskoder – Tall som indikerer resultatet: 200 = suksess, 201 = opprettet, 400 = ugyldig forespørsel, 401 = uautorisert, 404 = ikke funnet, 500 = serverfeil.
Socket.io-hendelser – Navngitte meldinger som går frem og tilbake mellom klient og server. socket.on() lytter etter hendelser, socket.emit() sender hendelser.
JWT (JSON Web Token) – En sikker måte å identifisere brukere på. Når de logger inn, gir vi dem et token. De sender denne tokenen med hver forespørsel for å bevise hvem de er.

Trinn 5: Oppdater JavaScript-koden for frontend (public/js/app.js)

Til slutt legger vi til JavaScript-koden som gjør frontend-en vår interaktiv. Denne koden kjører i brukerens nettleser og håndterer ting som knappeklikk, API-forespørsler og sanntidsoppdateringer.

Hva dette JavaScript-koden gjør:

Administrerer autentisering – Logg inn, registrering, utlogging og tokenlagring
Initialiserer Socket.io – Kobler til serveren og lytter etter sanntidshendelser
Foretar API-forespørsler – Bruker fetch() til å kommunisere med serverens endepunkter
Oppdaterer brukergrensesnittet – Oppretter HTML-elementer dynamisk basert på data fra serveren
Håndterer brukerinteraksjoner – Knappeklikk, skjemainnsendinger osv.

Erstatt public/js/app.js med hele koden som vises i veiledningen...

(App.js-kodeblokken følger nøyaktig som før, med alle funksjonene for innlogging, registrering, lasting av delte spillelister osv.)

Trinn 6: Test ditt sosiale musikk-API

Nå er det på tide å teste alt! Følg disse trinnene nøye:

Start serveren din: Kjør npm start i terminalen din. Du bør se meldinger som "MongoDB tilkoblet!" og "Server kjører på http://localhost:3000".
Åpne to nettleservinduer: Åpne http://localhost:3000 i to separate nettleservinduer (eller ett vanlig vindu og ett inkognitovindu). Dette simulerer to forskjellige brukere.
Registrer bruker 1: I det første vinduet klikker du på «Registrer deg» og oppretter en bruker (f.eks. brukernavn: «alice»).
Registrer bruker 2: I det andre vinduet oppretter du en annen bruker (f.eks. brukernavn: «bob»).
Legg til hverandre som venner: I Alice sitt vindu skriver du «bob» i feltet «Legg til en venn» og klikker på Legg til venn. Gjør det samme i Bobs vindu (skriv «alice»). Dere skal se hverandre i vennelistene deres!
Del en spilleliste: I Alice sitt vindu skriver du noe sånt som «Jeg føler meg superglad i dag!» i tekstboksen for humør. Kryss av i boksen «Del med venner», og klikk deretter på «Generer spilleliste».
Se magien skje:
- Hvis Bob er online (vinduet fortsatt åpent), vil han se et varsel som glir inn fra høyre!
- Bob skal også se Alices delte spilleliste vises i delen «Nylig aktivitet».
- Bob kan klikke på den delte spillelisten for å se hele listen over sanger.
- Hvis Bob logger ut og logger inn igjen senere, vil den delte spillelisten fortsatt være der!

Forstå hvordan alt fungerer sammen

La oss spore hva som skjer når Alice deler en spilleliste med Bob:

Alice krysser av for "Del med venner" og klikker på "Generer spilleliste"
Frontend sender en POST-forespørsel til /api/personalized-playlist med shareWithFriends: true
Server analyserer Alices humør og genererer en spilleliste ved hjelp av Spotify API
Server lagrer spillelisten i Alices moodHistory array
Server går gjennom Alices venner (inkludert Bob) i løkker og legger til spillelisten i hver venns sharedPlaylists array i MongoDB
Frontend sender ut en share_playlist Socket.io-hendelse for å varsle venner som er pålogget
Serveren mottar hendelsen og sjekker om Bob er pålogget (ser i connectedUsers-kartet)
Hvis Bob er pålogget, sender serveren ham en friend_shared_playlist-hendelse med forhåndsvisningen av spillelisten
Bobs nettleser mottar hendelsen og kaller showNotification() for å vise en popup
Bobs nettleser kaller også loadSharedPlaylists() for å oppdatere aktivitetsfeeden
Hvis Bob er frakoblet, vil han se spillelisten i aktivitetsfeeden sin neste gang han logger seg inn (fordi den er lagret i sharedPlaylists-arrayet hans)

Det du har bygget

Gratulerer! Du har bygget en fullfunksjonell sosial musikkapp! Her er hva du har oppnådd:

🤝 Vennesystem – Brukere kan legge til venner etter brukernavn. Vennskap er gjensidig (begge brukerne blir venner av hverandre) og lagres som ObjectId-referanser i MongoDB.
💾 Vedvarende spillelistedeling – Delte spillelister lagres i databasen i hver venns sharedPlaylists-array. Dette betyr at dataene vedvarer selv etter at brukerne logger ut.
📡 Sanntidsvarsler – Ved hjelp av Socket.io får brukere som er pålogget øyeblikkelige varsler når venner deler spillelister. Ingen sideoppdatering nødvendig!
📰 Aktivitetsfeed – Brukere kan se nylig delte spillelister fra alle vennene sine, sortert etter nyeste først. Hvis du klikker på en spilleliste, vises hele sporlisten.
🔐 Sikker autentisering – Passord hashes med bcrypt (lagres aldri som ren tekst), og JWT-tokener brukes til å autentisere API-forespørsler.
⏱️ Frakoblet-vennlig – Venner kan se delte spillelister selv om de ikke var online da spillelisten ble delt. Alt lagres i databasen!

Nøkkelkonsepter du har lært

Sanntidskommunikasjon med Socket.io (WebSockets)
Databaserelasjoner ved bruk av MongoDB ObjectId-referanser
Denormalisering for ytelse (lagring av både ObjectId og brukernavn)
RESTful API-design (GET, POST-endepunkter med riktige HTTP-statuskoder)
Mellomvaremønster for autentisering og forespørselsbehandling
Async/await for håndtering av asynkrone operasjoner
DOM-manipulasjon for dynamisk å oppdatere brukergrensesnittet
Hendelsesdrevet arkitektur med Socket.io-hendelser

Feilsøking av vanlige problemer

"Kan ikke "koble til MongoDB" – Sørg for at MongoDB-serveren din kjører og at MONGODB_URI i .env er riktig.
"Ugyldig legitimasjon" ved innlogging – Dobbeltsjekk brukernavn og passord. Husk at de skiller mellom store og små bokstaver!
"Bruker ikke funnet" når du legger til venn – Sørg for at du skriver inn nøyaktig brukernavn (skiller mellom store og små bokstaver). De må ha registrert seg først.
Delte spillelister vises ikke – Sjekk nettleserens konsoll (F12) for feil. Sørg for at begge brukerne er venner og at det er merket av for "Del med venner".
Sanntidsvarsler fungerer ikke – Sørg for at Socket.io er tilkoblet. Sjekk nettleserkonsollen for "🔗 Koblet til server".

Neste trinn og ideer for å utvide

Nå som du har en fungerende sosial musikkapp, er det noen ideer for å ta det videre:

Venneforespørsler – I stedet for øyeblikkelig vennskap, krev at brukere sender forespørsler som kan godtas eller avvises
Private meldinger – Legg til et chat-system ved hjelp av Socket.io slik at venner kan sende meldinger til hverandre
Kommentarer til spillelister – La brukere kommentere delte spillelister
Liker/liker ikke spor – Legg til tommel opp/ned-knapper for hvert spor i en spilleliste
Kompatibilitet med musikksmak – Beregn en prosentandel basert på hvor like to brukeres musikkpreferanser er
Søk etter brukere – Legg til en søkefunksjon for å finne brukere etter brukernavn
Slett/fjern vennskap – Legg til muligheten til å fjerne venner eller slette delte spillelister
Profilsider – Vis brukerstatistikk, favorittstemninger og nylige spillelister
Samarbeidsspillelister – La flere venner legge til spor i en delt spilleliste
Spillelistehistorikk – Se alle dine tidligere genererte spillelister

Du har bygget en komplett sosial musikkapp med sanntidsfunksjoner og vedvarende datalagring! Dette er et solid grunnlag for å forstå moderne webutvikling. Fortsett å eksperimentere og bygge!🎵✨