Fügen Sie Freunde zu Ihrer Mind-Reading Music API hinzu: Soziales Teilen in Echtzeit

Sind Sie bereit, Ihre Mind-Reading Music API wirklich sozial zu machen? In diesem Tutorial fügen Sie ein robustes Freundesystem und eine in der Datenbank gespeicherte Playlist-Freigabe hinzu, sodass Benutzer die freigegebenen Playlists ihrer Freunde auch dann sehen können, wenn sie nicht online sind. Wir verwenden Socket.io für Echtzeit-Updates und MongoDB für die dauerhafte Speicherung.

Was Sie erstellen werden

Freundesystem – Fügen Sie Freunde nach Benutzernamen hinzu und verwalten Sie sie mit gegenseitiger Freundschaft mithilfe von ObjectIds
Dauerhaftes Teilen von Wiedergabelisten – Geteilte Wiedergabelisten werden in der Datenbank gespeichert und können jederzeit angezeigt werden
Echtzeitbenachrichtigungen – Erhalten Sie sofortige Benachrichtigungen, wenn Freunde etwas teilen (sofern online)
Aktivitätsfeed – Sehen Sie die letzten Freigaben von Freunden mit anklickbaren Wiedergabelistenvorschauen
Verbesserte Stimmungsanalyse – Intelligente Wiedergabelistenerstellung mit Such-Fallbacks

Voraussetzungen

Ihre fertige Mind-Reading Music API von Teil 2
MongoDB, Node.js und npm installiert
Spotify API-Anmeldeinformationen (Client-ID und -Geheimnis)
30–45 Minuten Programmierzeit

In Teil 2 haben Sie Benutzerkonten mit Stimmungsverlauf und intelligenten Einstellungen erstellt. Jetzt machen wir es sozial! Sie lernen, wie Sie Benutzer verbinden, Wiedergabelisten sowohl in Echtzeit als auch dauerhaft teilen und sehen, was Ihre Freunde je nach Stimmung hören.

Die wichtigsten Konzepte verstehen

Bevor wir uns in den Code stürzen, sollten wir verstehen, was wir erstellen:

Socket.io – Eine Bibliothek, die Echtzeit-Zweiwegekommunikation zwischen Ihrem Server und Ihrem Browser ermöglicht. Stellen Sie es sich wie einen Telefonanruf statt einer Textnachricht vor – Sie können Informationen sofort senden und empfangen, ohne die Seite aktualisieren zu müssen.
Persistenter Speicher – Speichern Sie Daten in Ihrer MongoDB-Datenbank, sodass sie dort auch dann verbleiben, wenn sich Benutzer abmelden. Das ist, als würden Sie eine Datei auf Ihrer Festplatte speichern, anstatt sie nur im Speicher zu behalten.
ObjectId-Referenzen – MongoDBs Art, Beziehungen zwischen Daten herzustellen. Anstatt alle Informationen Ihrer Freunde in Ihr Profil zu kopieren, speichern Sie einfach eine Referenz (wie einen Zeiger) auf deren Profil.
Schemas – Betrachten Sie diese als Blaupausen, die die Struktur Ihrer Daten definieren. Sie teilen MongoDB mit, welche Felder jedes Dokument haben soll und welche Art von Daten in jedes Feld gehört.

Schritt 1: Erforderliche Abhängigkeiten installieren

Öffnen Sie Ihr Terminal in Ihrem Projektverzeichnis und installieren Sie Socket.io für Echtzeitfunktionen:

npm install socket.io

Was dies bewirkt: Dieser Befehl lädt die Socket.io-Bibliothek herunter und installiert sie in Ihrem Projekt. Der Befehl npm install ruft Pakete aus dem npm-Register (einer riesigen Bibliothek mit JavaScript-Code) ab und fügt sie Ihrem Ordner node_modules hinzu.

Die anderen Abhängigkeiten (Sentiment, Spotify-Web-API-Node, Bcryptjs, JsonWebToken, Mongoose, Express, Dotenv) sollten bereits aus Teil 2 installiert sein.

Schritt 2: Aktualisieren Sie Ihr Benutzermodell mit sozialen Funktionen

Da Sie in Teil 2 bereits ein Benutzermodell erstellt haben, aktualisieren wir es, um soziale Funktionen hinzuzufügen. Das Benutzermodell ist wie eine Vorlage, die definiert, welche Informationen wir über jeden Benutzer in unserer Datenbank speichern.

Was wir hinzufügen:

friends-Array – Eine Liste von ObjectId-Referenzen zu anderen Benutzern. Anstatt vollständige Benutzerinformationen zu speichern, speichern wir nur IDs, die auf andere Benutzerdokumente in der Datenbank verweisen.
sharedWith- und isShared-Felder – Diese verfolgen, welche Stimmungseinträge geteilt wurden und mit wem sie geteilt wurden.
sharedPlaylistSchema – Ein neues Schema (Blaupause), das definiert, wie eine geteilte Playlist aussieht: wer sie geteilt hat, für welche Stimmung sie war, die Titel und wann sie geteilt wurde.
sharedPlaylists-Array – Eine Liste, die alle Playlists speichert, die Ihre Freunde mit Ihnen geteilt haben.

Ersetzen Sie Ihre models/User.js durch:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // Schema für einzelne Stimmungseinträge (jedes Mal, wenn der Benutzer eine Playlist erstellt) const moodEntrySchema = new mongoose.Schema({ text: String, // Was der Benutzer eingegeben hat (z. B. „fühle mich heute glücklich“) detectedMood: String, // Die von unserem Analysator erkannte Stimmung (z. B. „glücklich“) confidence: Number, // Wie zuversichtlich wir sind (0-10) playlistGenerated: [{ // Array von Titeln, die wir empfohlen haben trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } // null = nicht bewertet, true = gefallen, false = nicht gefallen }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // Mit wem haben wir dies geteilt? isShared: { type: Boolean, default: false }, // Wurde dies geteilt? timestamp: { type: Date, default: Date.now } // Wann wurde dies erstellt? }); // Schema für Benutzereinstellungen (Lieblingsgenres usw.) 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] } }); // NEU: Schema für Wiedergabelisten, die Freunde mit Ihnen teilen const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // ObjectId-Referenz auf den Freund, der geteilt hat sharedByUsername: String, // Benutzername für einfache Anzeige (denormalisiert für Leistung) mood: String, // Für welche Stimmung war diese Wiedergabeliste? playlist: [{ // Der eigentliche Titel name: String, artist: String, album_image: String, id: String }], timestamp: { type: Date, default: Date.now } // Wann wurde dies geteilt? }); // Hauptbenutzerschema – definiert die Struktur eines Benutzerdokuments const userSchema = new mongoose.Schema({ Benutzername: { Typ: String, erforderlich: true, eindeutig: true, trim: true, Mindestlänge: 3 }, E-Mail: { Typ: String, erforderlich: true, eindeutig: true, Kleinbuchstaben: true }, Passwort: { Typ: String, erforderlich: true, Mindestlänge: 6 }, Freunde: {[ Typ: mongoose.Schema.Types.ObjectId, ref: 'User' }], // Array von ObjectId-Referenzen auf Freunde moodHistory: [moodEntrySchema], // Alle Wiedergabelisten, die dieser Benutzer generiert hat sharedPlaylists: [sharedPlaylistSchema], // Wiedergabelisten, die Freunde mit diesem Benutzer geteilt haben preferences: { Typ: userPreferencesSchema, Standard: () => ({}) }, Statistiken: { totalPlaylists: { Typ: Number, Standard: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { Typ: Datum, Standard: Date.now } } }, { Zeitstempel: true }); // Felder „createdAt“ und „updatedAt“ automatisch hinzufügen // Middleware: Führen Sie diese Funktion aus, bevor Sie einen Benutzer speichern (um sein Passwort zu hashen) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // Nur hashen, wenn das Passwort geändert wurde this.password = await bcrypt.hash(this.password, 12); // Hash mit 12 Salt-Runden next(); }); // Methode: Prüfen, ob ein Passwort mit dem gehashten Passwort übereinstimmt userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // Methode: Benutzerstatistiken basierend auf ihrem Stimmungsverlauf aktualisieren userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // Alle nicht leeren Stimmungen abrufen this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // Zählen, wie oft jede Stimmung vorkommt const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // Die Stimmung mit der höchsten Anzahl suchen this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // Lieblingstageszeit basierend auf dem Zeitpunkt der Generierung von Wiedergabelisten berechnen 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'; } }; // Modell exportieren, damit wir es in anderen Dateien verwenden können module.exports = mongoose.model('User', userSchema);

Wichtige Konzepte erklärt:

ObjectId-Referenzen – Das Array friends speichert keine vollständigen Benutzerobjekte. Stattdessen speichert es ObjectIds (eindeutige Kennungen), die auf andere Benutzer verweisen. Das ist effizient, denn wenn ein Freund seinen Benutzernamen ändert, müssen wir ihn nicht überall aktualisieren – wir folgen einfach der Referenz.
Denormalisierung – Beachten Sie, dass wir sowohl sharedBy (ObjectId) als auch sharedByUsername (String) speichern. Dies nennt man Denormalisierung – das Speichern derselben Daten an mehreren Orten aus Leistungsgründen. Wir speichern den Benutzernamen, damit wir den Benutzer nicht jedes Mal suchen müssen, wenn wir freigegebene Wiedergabelisten anzeigen.
Middleware (.pre()) – Dies wird vor bestimmten Vorgängen automatisch ausgeführt. Hier werden Passwörter aus Sicherheitsgründen gehasht, bevor sie in der Datenbank gespeichert werden.
Instanzmethoden (.methods) – Dies sind Funktionen, die Sie für einzelne Benutzerdokumente aufrufen können, wie user.comparePassword() oder user.updateStats().

Schritt 3: Aktualisieren Sie Ihr HTML-Frontend mit sozialen Funktionen

Aktualisieren wir nun die Benutzeroberfläche, um eine Freundesverwaltung und einen Aktivitäts-Feed einzuschließen. Das HTML definiert die Struktur Ihrer Webseite – welche Elemente angezeigt werden und wo sie positioniert sind.

Was wir der Benutzeroberfläche hinzufügen:

Abschnitt „Freundesliste“ – Zeigt Ihre aktuellen Freunde an
Freundeeingabe hinzufügen – Textfeld zum Eingeben des Benutzernamens eines Freundes
Feed der letzten Aktivitäten – Zeigt die von Ihren Freunden geteilten Wiedergabelisten an (anklickbar, um die vollständige Wiedergabeliste anzuzeigen)
Kontrollkästchen „Teilen“ – Option zum Teilen Ihrer erstellten Wiedergabeliste mit Freunden
Benachrichtigungsbereich – Popup-Benachrichtigungen für Echtzeit-Updates

Ersetzen Sie Ihre public/index.html durch:

<!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> /* Standardbrowserstile zurücksetzen */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Haupttextstil mit Farbverlaufshintergrund */ body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; color: #333; } /* Container für das gesamte Dashboard */ .dashboard { max-width: 1000px; margin: 0 auto; padding: 20px; } /* Kopfzeilenbereich mit Willkommensnachricht */ .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); /* Unschärfeeffekt für Glassmorphismus */ border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* Zweispaltiges Rasterlayout: Playlist-Bereich (größer) und Freunde-Bereich (kleiner) */ .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } /* Kartenstil für beide Abschnitte */ .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); } /* Stil der Formularelemente */ input, textarea, button { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } /* Button-spezifischer Stil mit Hintergrund mit Farbverlauf */ button { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; cursor: pointer; font-weight: 600; } /* Subtiler Hover-Effekt auf Schaltflächen */ button:hover { transform: translateY(-2px); } /* Individuelles Styling für Freundeselemente */ .friend-item { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 8px; border-left: 4px solid #667eea; /* Akzentfarbe links */ } /* Styling für Benachrichtigungs-Popups (standardmäßig ausgeblendet, wird von rechts eingeblendet) */ .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); /* Außerhalb des Bildschirms starten */ transition: transform .3s ease; z-index: 1000; max-width: 300px; } /* Benachrichtigung anzeigen (einblenden) */ .notification.show { transform: translateX(0); } /* Anmelde- und Registrierungsformulare */ .login-section, .register-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } /* Kontrollkästchen-Steuerelemente zum Teilen */ .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"> <!-- Authentifizierungsbereich (Anmelde-/Registrierungsformulare) --> <div id="authSection"> <!-- Anmeldeformular --> <div class="login-section"> <h2>🧠🎵 Willkommen zurück!</h2> <input type="text" id="loginUsername" placeholder="Benutzername"/> <input type="password" id="loginPassword" placeholder="Passwort"/> <button onclick="login()">Anmelden</button> <p><a href="#" onclick="showRegister()">Sie haben noch kein Konto? Registrieren</a></p> </div> <!-- Registrierungsformular (standardmäßig ausgeblendet) --> <div id="registerSection" class="register-section" style="display:none"> <h2>🎵 Erstellen Sie Ihr Musikprofil</h2> <input type="text" id="regUsername" placeholder="Benutzername"/> <input type="email" id="regEmail" placeholder="E-Mail"/> <input type="password" id="regPassword" placeholder="Passwort"/> <button onclick="register()">Konto erstellen</button> <p><a href="#" onclick="showLogin()">Sie haben bereits ein Konto? Anmelden</a></p> </div> </div> <!-- Hauptbereich des Dashboards (wird nach der Anmeldung angezeigt) --> <div id="dashboardSection" style="display:none"> <!-- Kopfzeile mit Benutzername und Abmeldeschaltfläche --> <div class="header"> <h1>🧠🎵 Ihr persönlicher Musik-Gedankenleser</h1> <p>Willkommen, <span id="username"></span>!</p> <button onclick="logout()" style="width:auto; margin-top:10px">Abmelden</button> </div> <!-- Zweispaltiges Layout: Playlist-Bereich links, Freunde-Bereich rechts --> <div class="main-content"> <!-- Linke Spalte: Playlist-Generierung --> <div class="playlist-section"> <h2>💭 Wie fühlst du dich?</h2> <textarea id="moodText" placeholder="Beschreibe deine Stimmung..."></textarea> <div class="share-controls"> <label><input type="checkbox" id="shareWithFriends"/>Mit Freunden teilen</label> </div> <button onclick="generatePlaylist()">🎧 Playlist erstellen</button> <!-- Hier werden die Ergebnisse nach dem Erstellen der Playlist angezeigt --> <div id="result" style="display:none"></div> </div> <!-- Rechte Spalte: Freunde und Aktivität --> <div class="friends-section"> <h3>👥 Meine Freunde</h3> <div id="friendsList"></div> <h4>Freund hinzufügen</h4> <input type="text" id="friendUsername" placeholder="Benutzername des Freundes"/> <button onclick="addFriend()">Freund hinzufügen</button> <h4>Letzte Aktivität</h4> <!-- Hier werden die freigegebenen Wiedergabelisten von Freunden angezeigt --> <div id="friendActivity"> Die Aktivität von Freunden wird hier angezeigt...</div> </div> </div> </div> </div> <!-- Container für Benachrichtigungs-Popups --> <div id="notificationArea"></div> <!-- Socket.io-Bibliothek einbinden (wird automatisch von unserem Server bereitgestellt) --> <script src="/socket.io/socket.io.js"></script> <!-- Unser benutzerdefiniertes JavaScript einbinden --> <script src="./js/app.js"></script> </body> </html>

Die HTML-Struktur verstehen:

Zwei Hauptabschnitte: authSection (Anmelden/Registrieren) und dashboardSection (Haupt-App). Es ist immer nur einer sichtbar.
Rasterlayout: .main-content verwendet CSS Grid, um zwei Spalten zu erstellen (2fr für Playlist, 1fr für Freunde). Das bedeutet, dass der Playlist-Bereich doppelt so breit ist.
Ereignishandler: onclick="functionName()" weist den Browser an, eine JavaScript-Funktion aufzurufen, wenn auf das Element geklickt wird.
IDs: Elemente haben eindeutige IDs (wie id="friendsList"), sodass unser JavaScript sie später finden und ändern kann.

Schritt 4: Aktualisieren Sie server.js mit Socket.io, Friend Endpoints und Persistent Sharing

Jetzt aktualisieren wir unseren Server, um Freundschaftsanfragen, Playlist-Sharing und Echtzeitkommunikation zu verarbeiten. Der Server ist das „Gehirn“ Ihrer App – er verarbeitet Anfragen, kommuniziert mit der Datenbank und sendet Antworten an die Benutzer zurück.

Was wir dem Server hinzufügen:

Socket.io-Server – Ermöglicht bidirektionale Echtzeitkommunikation zwischen Server und Clients
/api/add-friend-Endpunkt – Verarbeitet Freundschaftsanfragen (gegenseitige Freundschaft)
/api/shared-playlists-Endpunkt – Gibt Wiedergabelisten zurück, die Freunde mit Ihnen geteilt haben
Verbesserte /api/personalized-playlist – Speichert jetzt freigegebene Wiedergabelisten in den Datenbanken von Freunden
Socket-Ereignishandler – Lauschen Sie auf Echtzeitereignisse (Authentifizierung, Teilen) und geben Sie diese aus

Ersetzen Ihre server.js mit:

// Umgebungsvariablen aus der .env-Datei laden require('dotenv').config(); // Erforderliche Module importieren 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'); // Playlist-Generator initialisieren const playlistGen = new PlaylistGenerator(); const PORT = process.env.PORT || 3000; // Verbindung zur MongoDB-Datenbank herstellen async function connectDB() { try { console.log('🔗 Verbindung zu MongoDB hergestellt…'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }); console.log('✅ Verbindung zu MongoDB erfolgreich hergestellt!'); } catch (err) { console.error('❌ MongoDB-Verbindung fehlgeschlagen:', err.message); process.exit(1); // Beenden, wenn die Datenbankverbindung fehlschlägt } } connectDB(); // Express-App und HTTP-Server erstellen const app = express(); const server = http.createServer(app); // Socket.io über dem HTTP-Server initialisieren const io = socketIo(server); // Map zum Verfolgen von Online-Benutzern: userId => socketId // Dadurch können wir Nachrichten an bestimmte Benutzer senden, die derzeit verbunden sind const connectedUsers = new Map(); // Socket.io-Verbindungshandler – wird ausgeführt, wenn ein Client eine Verbindung herstellt io.on('connection', socket => { console.log('🔗 Socket connected:', socket.id); // 'authenticate'-Ereignis verarbeiten – der Client teilt uns mit, wer er ist socket.on('authenticate', ({ userId, username }) => { // Socket-ID dieses Benutzers speichern, damit wir ihm später Nachrichten senden können connectedUsers.set(userId, socket.id); socket.userId = userId; // Benutzer-ID an diesen Socket anhängen socket.username = username; // Benutzernamen an diesen Socket anhängen console.log(`✅ Authentifizierter Benutzer: ${username}`); }); // 'share_playlist'-Ereignis verarbeiten – der Benutzer möchte mit Freunden teilen socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // Alle Freunde-IDs durchlaufen for (let friendId of friendIds) { // Socket abrufen ID für diesen Freund (falls er online ist) const sid = connectedUsers.get(friendId.toString()); if (sid) { // Freund ist online! Senden Sie ihm eine Echtzeitbenachrichtigung io.to(sid).emit('friend_shared_playlist', { friendName, mood, playlist }); } // Falls der Freund offline ist, wird ihm die Playlist in seinem Aktivitätsfeed angezeigt, wenn er sich anmeldet } } catch (err) { console.error('Fehler Playlist teilen:', err); } }); // Trennung verarbeiten – Benutzer aus Online-Karte entfernen socket.on('disconnect', () => { if (socket.userId) { connectedUsers.delete(socket.userId); console.log(`👋 Getrennt: ${socket.username}`); } }); }); // Middleware zum Parsen von JSON-Anforderungstexten app.use(express.json()); // Statische Dateien aus dem Ordner „public“ bereitstellen (HTML, CSS, Bilder) app.use(express.static(path.join(__dirname, „public“))); // ===== API-ENDPUNKTE ===== // POST /api/register – Neues Benutzerkonto erstellen app.post('/api/register', async (req, res) => { try { const { Benutzername, E-Mail, Passwort } = req.body; // Eingabe validieren if (!Benutzername || !E-Mail || !Passwort) { return res.status(400).json({ Fehler: 'Alle Felder sind Pflichtfelder' }); } if (password.length < 6) { return res.status(400).json({ Fehler: 'Passwort muss mindestens 6 Zeichen lang sein' }); } // Prüfen, ob Benutzername oder E-Mail bereits vorhanden ist const exists = await User.findOne({ $or: [{ Benutzername }, { E-Mail }] }); if (exists) { return res.status(400).json({ Fehler: 'Benutzername oder E-Mail bereits vorhanden' }); } // Neuen Benutzer erstellen und speichern (das Passwort wird automatisch von unserer Pre-Save-Middleware gehasht) const user = new User({ Benutzername, E-Mail, Passwort }); await user.save(); res.status(201).json({ Nachricht: „Benutzer erfolgreich erstellt“ }); } catch (err) { console.error(„Registrierungsfehler:“, err); res.status(500).json({ Fehler: „Registrierung fehlgeschlagen“ }); } }); // POST /api/login – Benutzer authentifizieren und JWT-Token zurückgeben app.post('/api/login', async (req, res) => { try { const { username, password } = req.body; // Benutzer nach Benutzernamen oder E-Mail suchen const user = await User.findOne({ $or: {[ username }, { email: username }] }); // Prüfen, ob Benutzer existiert und Passwort richtig ist if (!user || !(await user.comparePassword(password))) { return res.status(401).json({ error: 'Invalid credentials' }); } // JWT-Token erstellen (wie einen temporären Personalausweis) const token = jwt.sign( { userId: user._id }, // Payload (was wir kodieren) process.env.JWT_SECRET, // Geheimschlüssel (sichert es) { expiresIn: '7d' } // Token läuft in 7 Tagen ab ); // Token an Client zurücksenden res.json({ Token, Benutzer: { Benutzername: Benutzer.Benutzername, E-Mail: Benutzer.E-Mail, Freunde: Benutzer.Freunde } }); } catch (err) { console.error('Anmeldefehler:', err); res.status(500).json({ Fehler: 'Anmeldung fehlgeschlagen' }); } }); // GET /api/profile – Aktuelles Benutzerprofil abrufen // Die „Auth“-Middleware überprüft das JWT-Token und hängt den Benutzer an req.user an app.get(„/api/profile“, auth, async (req, res) => { try { // Benutzerstatistiken aktualisieren req.user.updateStats(); await req.user.save(); // Freunde-Array füllen (ObjectIds durch tatsächliche Benutzerobjekte ersetzen) await req.user.populate(„Freunde“, „Benutzername _id“); const {Benutzername, E-Mail, Freunde} = req.user; res.json({ _id: req.user._id, Benutzername, E-Mail, Freunde: Freunde.map(f => ({Benutzername: f.Benutzername, _id: f._id })) }); } catch (err) { console.error(„Profilfehler:“, err); res.status(500).json({Fehler: „Profil konnte nicht geladen werden“ }); } }); // GET /api/shared-playlists – Wiedergabelisten abrufen, die Freunde mit Ihnen geteilt haben app.get(„/api/shared-playlists“, auth, async (req, res) => { try { // Die letzten 10 freigegebenen Wiedergabelisten abrufen, sortiert nach der aktuellsten zuerst const sharedPlaylists = req.user.sharedPlaylists .sort((a, b) => b.timestamp - a.timestamp) // Absteigend nach Zeitstempel sortieren .slice(0, 10); // Die ersten 10 nehmen res.json({ sharedPlaylists }); } catch (err) { console.error(„Fehler bei freigegebenen Wiedergabelisten:“, err); res.status(500).json({ error: „Freigegebene Wiedergabelisten konnten nicht geladen werden“ }); } }); // POST /api/add-friend – Einen Freund hinzufügen (gegenseitige Freundschaft) app.post('/api/add-friend', auth, async (req, res) => { try { const { friendUsername } = req.body; // Freund nach Benutzernamen suchen const friend = await User.findOne({ username: friendUsername }); if (!friend) { return res.status(404).json({ error: 'Benutzer nicht gefunden' }); } // Prüfen, ob bereits Freunde bestehen if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { return res.status(400).json({ error: 'Bereits mit diesem Benutzer befreundet' }); } // Jeden Benutzer zur Freundesliste des anderen hinzufügen (gegenseitige Freundschaft) req.user.friends.push(friend._id); friend.friends.push(req.user._id); // Beide Benutzer speichern warte auf req.user.save(); warte auf friend.save(); res.json({ Nachricht: „Freund erfolgreich hinzugefügt“, friendId: friend._id }); } catch (err) { console.error(„Fehler beim Hinzufügen eines Freundes:“, err); console.error(„Fehlerstapel:“, err.stack); res.status(500).json({ Fehler: „Freund konnte nicht hinzugefügt werden“ }); } }); // POST /api/personalized-playlist – Erstellen Sie eine stimmungsbasierte Playlist 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: 'Bitte sagen Sie mir, wie Sie sich fühlen!' }); } // 1. Analysieren Sie die Stimmung anhand des Benutzertextes const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. Erstellen Sie eine Playlist basierend auf der Stimmung const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. Speichern Sie im Stimmungsverlauf des Benutzers 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. Wenn Teilen aktiviert ist, im sharedPlaylists-Array jedes Freundes speichern 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 => ({ // Erste 5 Titel teilen name: t.name, artist: t.artist, album_image: t.album_image, id: t.id })) }; // Durchlaufe alle Freunde und füge diese Playlist zu ihren sharedPlaylists hinzu for (let friendId of req.user.friends) { const friend = await User.findById(friendId); if (friend) { friend.sharedPlaylists.push(sharedPlaylistData); await friend.save(); } } } // 5. Sende die Antwort zurück an den Client res.json({ moodAnalysis, playlist, personalizedMessage: `Basierend auf deinem Verlauf ist hier deine perfekte ${moodAnalysis.mood} Playlist!` }); } catch (err) { console.error('Fehler bei personalisierter Playlist:', err); console.error('Fehlerstapel:', err.stack); res.status(500).json({ error: 'Die Erstellung der personalisierten Playlist ist fehlgeschlagen. Bitte versuche es erneut erneut.' }); } }); // Fallback: Index.html für alle Nicht-API-Routen bereitstellen (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(); } }); // Globaler Fehlerhandler app.use((err, req, res, next) => { console.error('Globaler Fehler:', err); res.status(500).json({ error: 'Interner Serverfehler', details: err.message }); }); // Starten Sie den Server server.listen(PORT, () => { console.log(`🚀 Server läuft auf http://localhost:${PORT}`); });

Wichtige Serverkonzepte erklärt:

Middleware – Funktionen, die Anfragen verarbeiten, bevor sie Ihre Routenhandler erreichen. express.json() analysiert JSON aus Anfragetexten, auth überprüft JWT-Token.
async/await – Moderne JavaScript-Syntax zur Verarbeitung asynchroner Vorgänge (wie Datenbankabfragen). await pausiert die Ausführung, bis das Versprechen eingelöst wird.
HTTP-Statuscodes – Zahlen, die das Ergebnis angeben: 200 = Erfolg, 201 = erstellt, 400 = fehlerhafte Anfrage, 401 = nicht autorisiert, 404 = nicht gefunden, 500 = Serverfehler.
Socket.io-Ereignisse – Benannte Nachrichten, die zwischen Client und Server hin- und hergeschickt werden. socket.on() lauscht auf Ereignisse, socket.emit() sendet Ereignisse.
JWT (JSON Web Token) – Eine sichere Möglichkeit, Benutzer zu identifizieren. Wenn sie sich anmelden, geben wir ihnen ein Token. Sie senden dieses Token mit jeder Anfrage, um zu beweisen, wer sie sind.

Schritt 5: Frontend-JavaScript aktualisieren (public/js/app.js)

Fügen wir abschließend das JavaScript hinzu, das unser Frontend interaktiv macht. Dieser Code wird im Browser des Benutzers ausgeführt und verarbeitet Dinge wie Schaltflächenklicks, API-Anfragen und Echtzeit-Updates.

Was dieses JavaScript macht:

Verwaltet die Authentifizierung – Anmelden, Registrieren, Abmelden und Token-Speicherung
Initialisiert Socket.io – Stellt eine Verbindung zum Server her und wartet auf Echtzeit-Ereignisse
Stellt API-Anfragen – Verwendet fetch() zur Kommunikation mit Server-Endpunkten
Aktualisiert die Benutzeroberfläche – Erstellt dynamisch HTML-Elemente basierend auf Daten vom Server
Verarbeitet Benutzerinteraktionen – Schaltflächenklicks, Formularübermittlungen usw.

Ersetzen Sie Ihre public/js/app.js durch den vollständigen Code, der im Tutorial gezeigt wird...

(Der Codeblock app.js folgt genau wie zuvor, mit allen Funktionen für Anmelden, Registrieren, Laden gemeinsam genutzter Playlists usw.)

Schritt 6: Testen Sie Ihre Social Music API

Jetzt ist es Zeit, alles zu testen! Befolgen Sie diese Schritte sorgfältig:

Starten Sie Ihren Server: Führen Sie in Ihrem Terminal npm start aus. Sie sollten Meldungen wie „MongoDB verbunden!“ und „Server läuft auf http://localhost:3000“ sehen.
Öffnen Sie zwei Browserfenster: Öffnen Sie http://localhost:3000 in zwei separaten Browserfenstern (oder einem normalen Fenster und einem Inkognito-Fenster). Dies simuliert zwei verschiedene Benutzer.
Benutzer 1 registrieren: Klicken Sie im ersten Fenster auf „Anmelden“ und erstellen Sie einen Benutzer (z. B. Benutzername: „alice“).
Benutzer 2 registrieren: Erstellen Sie im zweiten Fenster einen weiteren Benutzer (z. B. Benutzername: „bob“).
Gegenseitig als Freunde hinzufügen: Geben Sie in Alices Fenster „bob“ in das Feld „Freund hinzufügen“ ein und klicken Sie auf „Freund hinzufügen“. Machen Sie dasselbe in Bobs Fenster (geben Sie „alice“ ein). Sie sollten sich in Ihren Freundeslisten sehen!
Eine Playlist teilen: Geben Sie in Alices Fenster etwas wie „Ich fühle mich heute super glücklich!“ in das Stimmungstextfeld ein. Aktivieren Sie das Kontrollkästchen „Mit Freunden teilen“ und klicken Sie dann auf „Wiedergabeliste erstellen“.
Sehen Sie zu, wie die Magie geschieht:
- Wenn Bob online ist (Fenster noch geöffnet), wird ihm von rechts eine Benachrichtigung eingeblendet!
- Bob sollte außerdem Alices freigegebene Wiedergabeliste in seinem Abschnitt „Letzte Aktivitäten“ sehen.
- Bob kann auf die freigegebene Wiedergabeliste klicken, um die vollständige Liste der Songs anzuzeigen.
- Wenn Bob sich ab- und später wieder anmeldet, ist die freigegebene Wiedergabeliste immer noch da!

Verstehen, wie alles zusammenarbeitet

Verfolgen wir, was passiert, wenn Alice eine Playlist mit Bob teilt:

Alice aktiviert "Mit Freunden teilen" und klickt auf "Playlist erstellen"
Frontend sendet eine POST-Anfrage an /api/personalized-playlist mit shareWithFriends: true
Server analysiert Alices Stimmung und erstellt eine Playlist mithilfe der Spotify-API
Server speichert die Playlist in Alices moodHistory-Array
Server durchläuft Alices Freunde (einschließlich Bob) und fügt die Playlist zum sharedPlaylists-Array jedes Freundes in MongoDB hinzu
Frontend gibt eine share_playlist Socket.io-Ereignis zum Benachrichtigen von Online-Freunden
Server empfängt das Ereignis und prüft, ob Bob online ist (sieht in der connectedUsers-Karte nach)
Wenn Bob online ist, sendet ihm der Server ein friend_shared_playlist-Ereignis mit der Playlist-Vorschau
Bobs Browser empfängt das Ereignis und ruft showNotification() auf, um ein Popup anzuzeigen
Bobs Browser ruft außerdem loadSharedPlaylists() auf, um den Aktivitäts-Feed zu aktualisieren
Wenn Bob offline ist, sieht er die Playlist in seinem Aktivitäts-Feed, wenn er sich das nächste Mal anmeldet (weil sie in seinem sharedPlaylists-Array gespeichert ist)

Was Sie erstellt haben

Herzlichen Glückwunsch! Sie haben erfolgreich eine voll funktionsfähige soziale Musik-App erstellt! Folgendes haben Sie erreicht:

🤝 Freundesystem – Benutzer können Freunde per Benutzernamen hinzufügen. Freundschaften sind gegenseitig (beide Benutzer werden Freunde voneinander) und werden als ObjectId-Referenzen in MongoDB gespeichert.
💾 Dauerhaftes Teilen von Wiedergabelisten – Geteilte Wiedergabelisten werden in der Datenbank im Array sharedPlaylists jedes Freundes gespeichert. Das bedeutet, dass die Daten auch nach dem Abmelden des Benutzers bestehen bleiben.
📡 Echtzeitbenachrichtigungen – Mit Socket.io erhalten Online-Benutzer sofort Benachrichtigungen, wenn Freunde Wiedergabelisten teilen. Kein Seiten-Neuladen erforderlich!
📰 Aktivitätsfeed – Benutzer können die zuletzt geteilten Wiedergabelisten aller ihrer Freunde sehen, sortiert nach den neuesten zuerst. Wenn Sie auf eine Playlist klicken, wird die vollständige Titelliste angezeigt.
🔐 Sichere Authentifizierung – Passwörter werden mit bcrypt gehasht (niemals als Klartext gespeichert) und JWT-Token werden zur Authentifizierung von API-Anfragen verwendet.
⏱️ Offline-freundlich – Freunde können geteilte Playlists anzeigen, auch wenn sie zum Zeitpunkt der Freigabe der Playlist nicht online waren. Alles wird in der Datenbank gespeichert!

Wichtige Konzepte, die Sie gelernt haben

Echtzeitkommunikation mit Socket.io (WebSockets)
Datenbankbeziehungen mithilfe von MongoDB ObjectId-Referenzen
Denormalisierung für Leistung (Speichern von ObjectId und Benutzername)
RESTful-API-Design (GET-, POST-Endpunkte mit entsprechenden HTTP-Statuscodes)
Middleware-Muster für Authentifizierung und Anforderungsverarbeitung
Async/await zur Handhabung asynchroner Vorgänge
DOM-Manipulation zur dynamischen Aktualisierung der Benutzeroberfläche
Ereignisgesteuerte Architektur mit Socket.io-Ereignissen

Fehlerbehebung bei häufigen Problemen

„Verbindung zu MongoDB nicht möglich“ – Stellen Sie sicher, dass Ihr MongoDB-Server läuft und Ihr MONGODB_URI in .env korrekt ist.
„Ungültige Anmeldedaten“ beim Anmelden – Überprüfen Sie Ihren Benutzernamen und Ihr Passwort. Beachten Sie die Groß- und Kleinschreibung!
„Benutzer nicht gefunden“ beim Hinzufügen eines Freundes – Stellen Sie sicher, dass Sie den genauen Benutzernamen eingeben (Groß- und Kleinschreibung beachten). Der Benutzer muss sich zuerst registriert haben.
Geteilte Wiedergabelisten werden nicht angezeigt – Überprüfen Sie die Konsole Ihres Browsers (F12) auf Fehler. Stellen Sie sicher, dass beide Benutzer Freunde sind und das Kontrollkästchen „Mit Freunden teilen“ aktiviert ist.
Echtzeitbenachrichtigungen funktionieren nicht – Stellen Sie sicher, dass Socket.io verbunden ist. Suchen Sie in der Browserkonsole nach „🔗 Mit Server verbunden“.

Nächste Schritte und Ideen zur Erweiterung

Da Sie nun eine funktionierende soziale Musik-App haben, hier einige Ideen zur Weiterentwicklung:

Freundschaftsanfragen – Anstatt sofortige Freundschaften zu schließen, sollten Benutzer Anfragen senden, die angenommen oder abgelehnt werden können.
Private Nachrichten – Fügen Sie ein Chatsystem mit Socket.io hinzu, damit Freunde sich gegenseitig Nachrichten senden können.
Playlist-Kommentare – Lassen Sie Benutzer geteilte Playlists kommentieren.
Titel mögen/nicht mögen – Fügen Sie jedem Titel in einer Playlist Schaltflächen mit Daumen hoch/runter hinzu.
Kompatibilität des Musikgeschmacks – Berechnen Sie einen Prozentsatz basierend darauf, wie ähnlich die Musikvorlieben zweier Benutzer sind.
Benutzer suchen – Fügen Sie eine Suchfunktion hinzu, um Benutzer nach Benutzernamen zu finden.
Löschen/Freundschaft aufheben – Möglichkeit zum Entfernen von Freunden oder Löschen freigegebener Wiedergabelisten hinzufügen
Profilseiten – Benutzerstatistiken, Lieblingsstimmungen und aktuelle Wiedergabelisten anzeigen
Gemeinsame Wiedergabelisten – Mehrere Freunde können Titel zu einer freigegebenen Wiedergabeliste hinzufügen
Wiedergabelistenverlauf – Alle Ihre zuvor erstellten Wiedergabelisten anzeigen

Sie haben eine umfassende soziale Musik-App mit Echtzeitfunktionen und persistentem Datenspeicher erstellt! Dies ist eine solide Grundlage für das Verständnis moderner Webentwicklung. Experimentieren und entwickeln Sie weiter!🎵✨