Dodaj znajomych do swojego API do czytania w myślach: udostępnianie społecznościowe w czasie rzeczywistym

Chcesz, aby Twoje API do czytania w myślach stało się naprawdę społecznościowe? W tym samouczku dodasz rozbudowany system znajomych i udostępniania playlist, które będą przechowywane w bazie danych, dzięki czemu użytkownicy będą mogli przeglądać udostępnione playlisty swoich znajomych, nawet gdy nie są online. Będziemy używać Socket.io do aktualizacji w czasie rzeczywistym i MongoDB do trwałego przechowywania.

Co zbudujesz

System znajomych – dodawaj i zarządzaj znajomymi według nazwy użytkownika za pomocą ObjectIds
Trwałe udostępnianie playlist – udostępnione playlisty są zapisywane w bazie danych i można je przeglądać w dowolnym momencie
Powiadomienia w czasie rzeczywistym – otrzymuj natychmiastowe powiadomienia, gdy znajomi udostępniają (jeśli są online)
Kanał aktywności – zobacz ostatnie udostępnienia znajomych z klikalnymi podglądami playlist
Ulepszona analiza nastroju – inteligentne generowanie playlist z zapasowymi opcjami wyszukiwania

Wymagania wstępne

Ukończony interfejs API Mind-Reading Music od Część 2
MongoDB, Node.js i npm zainstalowane
Dane uwierzytelniające API Spotify (identyfikator klienta i sekret)
30–45 minut kodowania

W części 2 utworzyłeś konta użytkowników z historią nastroju i inteligentnymi preferencjami. Teraz zajmiemy się nimi w sposób społecznościowy! Dowiesz się, jak łączyć użytkowników, udostępniać playlisty w czasie rzeczywistym i na bieżąco oraz sprawdzać, czego słuchają Twoi znajomi na podstawie ich nastroju.

Zrozumienie kluczowych koncepcji

Zanim zagłębimy się w kod, zrozumiemy, co tworzymy:

Socket.io – biblioteka umożliwiająca dwukierunkową komunikację w czasie rzeczywistym między serwerem a przeglądarką. Wyobraź to sobie jak rozmowę telefoniczną zamiast wiadomości tekstowych – możesz wysyłać i odbierać informacje natychmiast, bez odświeżania strony.
Pamięć trwała – zapisywanie danych w bazie danych MongoDB, dzięki czemu pozostają tam nawet po wylogowaniu użytkownika. To jak zapisywanie pliku na dysku twardym, a nie tylko w pamięci.
Referencje ObjectId – sposób MongoDB na tworzenie relacji między danymi. Zamiast kopiować wszystkie informacje o znajomych do swojego profilu, po prostu przechowujesz referencję (jak wskaźnik) do ich profilu.
Schematy – traktuj je jak plany definiujące strukturę danych. Informują one MongoDB, jakie pola powinien zawierać każdy dokument i jaki typ danych powinien się w nim znaleźć.

Krok 1: Zainstaluj wymagane zależności

Otwórz terminal w katalogu projektu i zainstaluj Socket.io, aby korzystać z funkcji w czasie rzeczywistym:

npm install socket.io

Co to robi: To polecenie pobiera i instaluje bibliotekę Socket.io w projekcie. Polecenie npm install pobiera pakiety z rejestru npm (ogromnej biblioteki kodu JavaScript) i dodaje je do folderu node_modules.

Pozostałe zależności (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) powinny być już zainstalowane w Części 2.

Krok 2: Zaktualizuj swój model użytkownika o funkcje społecznościowe

Ponieważ w Części 2 utworzyłeś już model użytkownika, zaktualizujemy go, dodając funkcje społecznościowe. Model użytkownika jest jak szablon, który definiuje, jakie informacje przechowujemy o każdym użytkowniku w naszej bazie danych.

Co dodajemy:

friends array – lista odwołań do ObjectId innych użytkowników. Zamiast przechowywać pełne informacje o użytkowniku, przechowujemy jedynie identyfikatory wskazujące na inne dokumenty użytkownika w bazie danych.
sharedWith i isShared – Śledzą one, które wpisy dotyczące nastroju zostały udostępnione i komu.
sharedPlaylistSchema – Nowy schemat (plan), który definiuje wygląd udostępnionej playlisty: kto ją udostępnił, jaki nastrój jej dotyczył, jakie utwory zostały udostępnione i kiedy.
sharedPlaylists tablica – Lista, która przechowuje wszystkie playlisty udostępnione Ci przez znajomych.

Zastąp plik models/User.js poleceniem:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // Schemat dla indywidualnych wpisów nastroju (za każdym razem, gdy użytkownik generuje listę odtwarzania) const moodEntrySchema = new mongoose.Schema({ text: String, // To, co wpisał użytkownik (np. „dzisiaj czuję się szczęśliwy”) detectorMood: String, // Nastrój wykryty przez nasz analizator (np. „szczęśliwy”) confidence: Number, // Jak pewni jesteśmy (0–10) playlistGenerated: [{ // Tablica polecanych przez nas utworów trackName: String, artist: String, spotifyId: String, like: { type: Boolean, default: null } // null = nieocenione, true = polubione, false = nielubiane }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // Z kim się tym podzieliliśmy? isShared: { type: Boolean, default: false }, // Czy to było udostępnione? timestamp: { type: Date, default: Date.now } // Kiedy to zostało utworzone? }); // Schemat preferencji użytkownika (ulubione gatunki itp.) 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] } }); // NOWOŚĆ: Schemat playlist, które udostępniają Ci znajomi const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // Odwołanie do ObjectId znajomego, który udostępnił sharedByUsername: String, // Nazwa użytkownika ułatwiająca wyświetlanie (zdenormalizowana ze względu na wydajność) mood: String, // Jaki nastrój miała ta playlista? playlist: [{ // Nazwa rzeczywistego utworu: String, artysta: String, obraz_albumu: String, id: String }], znacznik czasu: { type: Date, default: Date.now } // Kiedy to zostało udostępnione? }); // Główny schemat użytkownika — definiuje strukturę dokumentu użytkownika 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' }], // Tablica odniesień do ObjectId znajomych moodHistory: [moodEntrySchema], // Wszystkie listy odtwarzania wygenerowane przez tego użytkownika sharedPlaylists: [sharedPlaylistSchema], // Listy odtwarzania udostępnione przez znajomych temu użytkownikowi preferencje: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { typ: Number, wartość domyślna: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { typ: Date, wartość domyślna: Date.now } } }, { znaczniki czasu: true }); // Automatyczne dodawanie pól createdAt i updatedAt // Middleware: Uruchom tę funkcję przed zapisaniem użytkownika (aby zahaszować jego hasło) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // Hasz tylko jeśli hasło zostało zmienione this.password = wait bcrypt.hash(this.password, 12); // Hasz z 12 rundami soli next(); }); // Metoda: Sprawdzanie, czy hasło pasuje do zahaszowanego hasła userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // Metoda: Aktualizuj statystyki użytkownika na podstawie historii jego nastroju userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // Pobierz wszystkie niepuste nastroje this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // Policz, ile razy wystąpił każdy nastrój const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // Znajdź nastrój o największej liczbie wystąpień this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // Oblicz ulubioną porę dnia na podstawie tego, kiedy generowane są playlisty 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 ? 'noc' : avg < 12 ? 'rano' : avg < 18 ? 'popołudnie' : 'wieczór'; } }; // Eksport modelu, abyśmy mogli go używać w innych plikach module.exports = mongoose.model('User', userSchema);

Wyjaśnienie kluczowych pojęć:

Odniesienia do ObjectId – Tablica friends nie przechowuje całych obiektów użytkownika. Zamiast tego przechowuje ObjectId (unikalne identyfikatory) wskazujące na innych użytkowników. Jest to wydajne, ponieważ jeśli znajomy zmieni swoją nazwę użytkownika, nie musimy jej wszędzie aktualizować – po prostu podążamy za odniesieniem.
Denormalizacja – Zauważ, że przechowujemy zarówno sharedBy (ObjectId), jak i sharedByUsername (String). Nazywa się to denormalizacją – przechowywaniem tych samych danych w wielu miejscach w celu zwiększenia wydajności. Przechowujemy nazwę użytkownika, aby nie musieć go wyszukiwać za każdym razem, gdy wyświetlamy udostępnione listy odtwarzania.
Middleware (.pre()) – uruchamia się automatycznie przed niektórymi operacjami. W tym przypadku haszuje hasła przed zapisaniem ich w bazie danych ze względów bezpieczeństwa.
Instancje Methods (.methods) – są to funkcje, które można wywołać w poszczególnych dokumentach użytkownika, takie jak user.comparePassword() lub user.updateStats().

Krok 3: Zaktualizuj swój interfejs HTML o funkcje społecznościowe

Teraz zaktualizujmy interfejs użytkownika, dodając zarządzanie znajomymi i kanał aktywności. Kod HTML definiuje strukturę Twojej strony internetowej — jakie elementy się pojawiają i gdzie są rozmieszczone.

Co dodajemy do interfejsu użytkownika:

Sekcja listy znajomych — wyświetla aktualnych znajomych
Dodaj pole wyboru znajomego — pole tekstowe do wpisania nazwy użytkownika znajomego
Ostatni kanał aktywności — wyświetla playlisty udostępnione przez znajomych (klikalne, aby wyświetlić całą playlistę)
Pole wyboru Udostępnij — opcja udostępniania wygenerowanej playlisty znajomym
Obszar powiadomień — wyskakujące powiadomienia o aktualizacjach w czasie rzeczywistym

Zastąp plik public/index.html następującym kodem:

<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Interfejs API do czytania w myślach — społecznościowy</title> <style> /* Przywróć domyślne style przeglądarki */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Stylizacja głównego korpusu z tłem gradientowym */ body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; color: #333; } /* Kontener dla całego panelu */ .dashboard { max-width: 1000px; margin: 0 auto; padding: 20px; } /* Sekcja nagłówka z wiadomością powitalną */ .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); /* Efekt rozmycia dla glassmorphizmu */ border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* Układ siatki dwukolumnowej: sekcja listy odtwarzania (większa) i sekcja znajomych (mniejsza) */ .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } /* Stylizacja kart dla obu sekcji */ .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); } /* Stylizacja elementów formularza */ input, textarea, button { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } /* Stylizacja przycisku z gradientowym tłem */ button { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; cursor: pointer; font-weight: 600; } /* Subtelny efekt najechania kursorem na przyciski */ button:hover { transform: translateY(-2px); } /* Stylizacja pojedynczego znajomego przedmiotu */ .friend-item { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 8px; border-left: 4px solid #667eea; /* Kolor akcentu po lewej */ } /* Stylizacja wyskakującego okienka powiadomień (domyślnie ukryte, wysuwa się od prawej) */ .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); /* Rozpocznij poza ekranem */ transition: transform .3s ease; z-index: 1000; max-width: 300px; } /* Pokaż powiadomienie (wsuń) */ .notification.show { transform: translateX(0); } /* Formularze logowania i rejestracji */ .login-section, .register-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } /* Kontrolki pól wyboru do udostępniania */ .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"> <!-- Sekcja uwierzytelniania (formularze logowania/rejestracji) --> <div id="authSection"> <!-- Formularz logowania --> <div class="login-section"> <h2>🧠🎵 Witamy ponownie!</h2> <input type="text" id="loginUsername" placeholder="Nazwa użytkownika"/> <input type="password" id="loginPassword" placeholder="Hasło"/> <button onclick="login()">Logowanie</button> <p><a href="#" onclick="showRegister()">Nie masz konta? Zarejestruj się</a></p> </div> <!-- Formularz rejestracyjny (domyślnie ukryty) --> <div id="registerSection" class="register-section" style="display:none"> <h2>🎵 Utwórz swój profil muzyczny</h2> <input type="text" id="regUsername" placeholder="Nazwa użytkownika"/> <input type="email" id="regEmail" placeholder="E-mail"/> <input type="password" id="regPassword" placeholder="Hasło"/> <button onclick="register()">Utwórz konto</button> <p><a href="#" onclick="showLogin()">Masz już konto? Zaloguj się</a></p> </div> </div> <!-- Główna sekcja pulpitu nawigacyjnego (wyświetlana po zalogowaniu) --> <div id="dashboardSection" style="display:none"> <!-- Nagłówek z nazwą użytkownika i przyciskiem wylogowania --> <div class="header"> <h1>🧠🎵 Twój osobisty czytnik myśli muzycznych</h1> <p>Witaj, <span id="username"></span>!</p> <button onclick="logout()" style="width:auto; margin-top:10px">Wyloguj</button> </div> <!-- Układ dwukolumnowy: Sekcja playlisty po lewej, sekcja znajomych po prawej --> <div class="main-content"> <!-- Lewa kolumna: Generowanie playlisty --> <div class="playlist-section"> <h2>💭 Jak się czujesz?</h2> <textarea id="moodText" placeholder="Opisz swój nastrój..."></textarea> <div class="share-controls"> <label><input type="checkbox" id="shareWithFriends"/>Udostępnij znajomym</label> </div> <button onclick="generatePlaylist()">🎧 Wygeneruj playlistę</button> <!-- Tutaj pojawiają się wyniki po wygenerowaniu playlisty --> <div id="result" style="display:none"></div> </div> <!-- Prawa kolumna: Znajomi i aktywność --> <div class="friends-section"> <h3>👥 Moi znajomi</h3> <div id="friendsList"></div> <h4>Dodaj znajomego</h4> <input type="text" id="friendUsername" placeholder="Nazwa użytkownika znajomego"/> <button onclick="addFriend()">Dodaj znajomego</button> <h4>Ostatnia aktywność</h4> <!-- Tutaj pojawiają się udostępnione playlisty znajomych --> <div id="friendActivity">Tutaj pojawi się aktywność znajomych...</div> </div> </div> </div> </div> </div> <!-- Kontener na wyskakujące okienka powiadomień --> <div id="notificationArea"></div> <!-- Dołącz bibliotekę Socket.io (automatycznie obsługiwaną przez nasz serwer) --> <script src="/socket.io/socket.io.js"></script> <!-- Dołącz nasz niestandardowy kod JavaScript --> <script src="./js/app.js"></script> </body> </html>

Zrozumienie struktury HTML:

Dwie główne sekcje: authSection (logowanie/rejestracja) i dashboardSection (główna aplikacja). W danym momencie widoczny jest tylko jeden element.
Układ siatki: Element .main-content używa siatki CSS do tworzenia dwóch kolumn (2fr dla listy odtwarzania, 1fr dla znajomych). Oznacza to, że sekcja listy odtwarzania jest dwa razy szersza.
Obsługa zdarzeń: onclick="functionName()" informuje przeglądarkę o wywołaniu funkcji JavaScript po kliknięciu elementu.
Identyfikatory: Elementy mają unikalne identyfikatory (takie jak id="friendsList"), dzięki czemu nasz kod JavaScript może je później znaleźć i zmodyfikować.

Krok 4: Zaktualizuj server.js o Socket.io, punkty końcowe znajomych i trwałe udostępnianie

Teraz zaktualizujemy nasz serwer, aby obsługiwał prośby o dodanie do znajomych, udostępnianie list odtwarzania i komunikację w czasie rzeczywistym. Serwer to „mózg” Twojej aplikacji — przetwarza żądania, komunikuje się z bazą danych i wysyła odpowiedzi użytkownikom.

Co dodajemy do serwera:

Serwer Socket.io — umożliwia dwukierunkową komunikację w czasie rzeczywistym między serwerem a klientami
/api/add-friend punkt końcowy — obsługuje prośby o dodanie do znajomych (wzajemna przyjaźń)
/api/shared-playlists punkt końcowy — zwraca listy odtwarzania udostępnione przez znajomych
Ulepszone /api/personalized-playlist — teraz zapisuje udostępnione listy odtwarzania w bazach danych znajomych
Obsługa zdarzeń gniazda — nasłuchuje i emituje zdarzenia w czasie rzeczywistym (uwierzytelnianie, udostępnianie)

Zastąp swój plik server.js następującym kodem:

// Załaduj zmienne środowiskowe z pliku .env require('dotenv').config(); // Importuj wymagane moduły 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'); // Zainicjuj generator playlist const playlistGen = new PlaylistGenerator(); const PORT = process.env.PORT || 3000; // Połącz się z bazą danych MongoDB asynchronicznie funkcja connectDB() { try { console.log('🔗 Łączenie z MongoDB…'); wait mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }); console.log('✅ Połączenie z MongoDB powiodło się!'); } catch (err) { console.error('❌ Połączenie z MongoDB nie powiodło się:', err.message); process.exit(1); // Wyjdź, jeśli połączenie z bazą danych się nie powiedzie } } connectDB(); // Utwórz aplikację Express i serwer HTTP const app = express(); const server = http.createServer(app); // Zainicjuj Socket.io na serwerze HTTP const io = socketIo(server); // Mapa do śledzenia użytkowników online: userId => socketId // Pozwala nam to wysyłać wiadomości do konkretnych użytkowników, którzy są aktualnie połączeni const connectedUsers = new Map(); // Obsługa połączenia Socket.io — uruchamia się, gdy klient nawiązuje połączenie io.on('connection', socket => { console.log('🔗 Socket connected:', socket.id); // Obsługa zdarzenia 'authenticate' — klient informuje nas, kim jest socket.on('authenticate', ({ userId, username }) => { // Przechowywanie identyfikatora gniazda tego użytkownika, abyśmy mogli później wysłać mu wiadomości connectedUsers.set(userId, socket.id); socket.userId = userId; // Dołącz identyfikator użytkownika do tego gniazda socket.username = username; // Dołącz nazwę użytkownika do tego gniazda console.log(`✅ Uwierzytelniony użytkownik: ${username}`); }); // Obsługa zdarzenia 'share_playlist' — użytkownik chce udostępnić coś znajomym socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // Przejrzyj wszystkie identyfikatory znajomych for (let friendId of friendIds) { // Pobierz identyfikator gniazda dla tego znajomego (jeśli jest online) const sid = connectedUsers.get(friendId.toString()); if (sid) { // Znajomy jest online! Wyślij mu powiadomienie w czasie rzeczywistym io.to(sid).emit('friend_shared_playlist', { friendName, mood, playlist }); } // Jeśli znajomy jest offline, zobaczy listę odtwarzania w swoim kanale aktywności po zalogowaniu } } catch (err) { console.error('Błąd udostępniania listy odtwarzania:', err); } }); // Obsługuj rozłączenie — usuń użytkownika z mapy online socket.on('disconnect', () => { if (socket.userId) { connectedUsers.delete(socket.userId); console.log(`👋 Rozłączono: ${socket.username}`); } }); }); // Oprogramowanie pośredniczące do analizowania treści żądań JSON app.use(express.json()); // Udostępnianie plików statycznych z folderu „public” (HTML, CSS, obrazy) app.use(express.static(path.join(__dirname, 'public'))); // ===== PUNKTY KOŃCOWE API ===== // POST /api/register - Utwórz nowe konto użytkownika app.post('/api/register', async (req, res) => { try { const { username, email, password } = req.body; // Sprawdź poprawność danych wejściowych if (!username || !email || !password) { return res.status(400).json({ error: 'Wszystkie pola są wymagane' }); } if (password.length < 6) { return res.status(400).json({ error: 'Hasło musi mieć co najmniej 6 znaków' }); } // Sprawdź, czy nazwa użytkownika lub adres e-mail już istnieje const exists = wait User.findOne({ $or: [{ username }, { email }] }); if (exists) { return res.status(400).json({ błąd: 'Nazwa użytkownika lub adres e-mail już istnieje' }); } // Utwórz i zapisz nowego użytkownika (hasło zostanie automatycznie zahaszowane przez nasze oprogramowanie pośredniczące przed zapisem) const user = new User({ nazwa użytkownika, adres e-mail, hasło }); wait user.save(); res.status(201).json({ komunikat: 'Użytkownik został pomyślnie utworzony' }); } catch (err) { console.error('Błąd rejestracji:', err); res.status(500).json({ błąd: 'Rejestracja nie powiodła się' }); } }); // POST /api/login — uwierzytelnianie użytkownika i zwracanie tokenu JWT app.post('/api/login', async (req, res) => { try { const { username, password } = req.body; // wyszukiwanie użytkownika po nazwie użytkownika lub adresie e-mail const user = wait User.findOne({ $or: {[ username }, { email: username }] }); // sprawdzanie, czy użytkownik istnieje i czy hasło jest poprawne if (!user || !(await user.comparePassword(password))) { return res.status(401).json({ error: 'Invalid credentials' }); } // tworzenie tokenu JWT (np. tymczasowego dowodu osobistego) const token = jwt.sign( { userId: user._id }, // dane (co kodujemy) process.env.JWT_SECRET, // Klucz tajny (zapewnia bezpieczeństwo) { expiresIn: '7d' } // Token wygasa za 7 dni ); // Odeślij token do klienta res.json({ token, user: { username: user.username, email: user.email, friends: user.friends } }); } catch (err) { console.error('Błąd logowania:', err); res.status(500).json({ error: 'Logowanie nieudane' }); } }); // GET /api/profile — pobierz profil bieżącego użytkownika // Oprogramowanie pośredniczące „auth” weryfikuje token JWT i dołącza użytkownika do req.user app.get('/api/profile', auth, async (req, res) => { try { // Aktualizacja statystyk użytkownika req.user.updateStats(); wait req.user.save(); // Wypełnij tablicę friends (zamień ObjectIds na rzeczywiste obiekty użytkownika) wait 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('Błąd profilu:', err); res.status(500).json({ błąd: 'Nie udało się załadować profilu' }); } }); // GET /api/shared-playlists — pobierz listy odtwarzania, którymi podzielili się z Tobą znajomi app.get('/api/shared-playlists', auth, async (req, res) => { try { // Pobierz 10 ostatnich udostępnionych list odtwarzania, posortowanych od najnowszej do pierwszej const sharedPlaylists = req.user.sharedPlaylists .sort((a, b) => b.timestamp - a.timestamp) // Sortuj malejąco według znacznika czasu .slice(0, 10); // Pobierz pierwsze 10 res.json({ sharedPlaylists }); } catch (err) { console.error('Błąd udostępnionych list odtwarzania:', err); res.status(500).json({ error: 'Nie udało się załadować udostępnionych list odtwarzania' }); } }); // POST /api/add-friend — Dodaj znajomego (wzajemna przyjaźń) app.post('/api/add-friend', auth, async (req, res) => { try { const { friendUsername } = req.body; // Znajdź znajomego po nazwie użytkownika const friend = wait User.findOne({ username: friendUsername }); if (!friend) { return res.status(404).json({ error: 'Użytkownik nie został znaleziony' }); } // Sprawdź, czy masz już znajomych if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { return res.status(400).json({ error: 'Ten użytkownik ma już znajomych' }); } // Dodaj każdego użytkownika do listy znajomych drugiego użytkownika (wzajemna przyjaźń) req.user.friends.push(friend._id); friend.friends.push(req.user._id); // Zapisz obu użytkowników wait req.user.save(); wait friend.save(); res.json({ message: 'Dodanie znajomego powiodło się', friendId: friend._id }); } catch (err) { console.error('Błąd dodawania znajomego:', err); console.error('Stos błędów:', err.stack); res.status(500).json({ error: 'Nie udało się dodać znajomego' }); } }); // POST /api/personalized-playlist — Generowanie listy odtwarzania opartej na nastroju 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: 'Powiedz mi, jak się czujesz!' }); } // 1. Analiza nastroju na podstawie tekstu użytkownika const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. Generowanie listy odtwarzania na podstawie nastroju const playlist = wait playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. Zapis w historii nastroju użytkownika const entry = { text, detectorMood: 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(); wait req.user.save(); // 4. Jeśli udostępnianie jest włączone, zapisz w tablicy sharedPlaylists każdego znajomego 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 => ({ // Udostępnij pierwsze 5 utworów name: t.name, artist: t.artist, album_image: t.album_image, id: t.id })) }; // Przejdź przez wszystkich znajomych i dodaj tę playlistę do ich sharedPlaylists for (let friendId of req.user.friends) { const friend = wait User.findById(friendId); if (friend) { friend.sharedPlaylists.push(sharedPlaylistData); wait friend.save(); } } } // 5. Wyślij odpowiedź z powrotem do klienta res.json({ moodAnalysis, playlist, personalizedMessage: `Na podstawie Twojej historii, oto Twoja idealna playlista ${moodAnalysis.mood}!` }); } catch (err) { console.error('Błąd spersonalizowanej playlisty:', err); console.error('Stos błędów:', err.stack); res.status(500).json({ błąd: 'Nie udało się wygenerować spersonalizowanej listy odtwarzania. Spróbuj ponownie.' }); } }); // Awaria: Podaj plik index.html dla wszystkich tras spoza API (dla routingu SPA) app.use((req, res, next) => { if (req.method === 'GET' && !req.path.startsWith('/api/')) { res.sendFile(path.join(__dirname, 'public', 'index.html')); } else { next(); } }); // Globalny program obsługi błędów app.use((err, req, res, next) => { console.error('Błąd globalny:', err); res.status(500).json({ błąd: 'Wewnętrzny błąd serwera', szczegóły: err.message }); }); // Uruchom serwer server.listen(PORT, () => { console.log(`🚀 Serwer działający na http://localhost:${PORT}`); });

Wyjaśnienie najważniejszych pojęć dotyczących serwera:

Middleware – Funkcje przetwarzające żądania przed dotarciem ich do procedur obsługi tras. express.json() analizuje dane JSON z treści żądań, auth weryfikuje tokeny JWT.
async/await – Nowoczesna składnia JavaScript do obsługi operacji asynchronicznych (takich jak zapytania do bazy danych). await wstrzymuje wykonywanie do momentu rozwiązania obietnicy.
Kody stanu HTTP – liczby wskazujące wynik: 200 = sukces, 201 = utworzono, 400 = nieprawidłowe żądanie, 401 = nieautoryzowane, 404 = nie znaleziono, 500 = błąd serwera.
Zdarzenia Socket.io – nazwane komunikaty przesyłane między klientem a serwerem. socket.on() nasłuchuje zdarzeń, socket.emit() wysyła zdarzenia.
JWT (JSON Web Token) – bezpieczny sposób identyfikacji użytkowników. Po zalogowaniu dajemy im token. Wysyłają ten token z każdym żądaniem, aby udowodnić swoją tożsamość.

Krok 5: Zaktualizuj JavaScript front-endu (public/js/app.js)

Na koniec dodajmy JavaScript, który sprawi, że nasz front-end będzie interaktywny. Ten kod działa w przeglądarce użytkownika i obsługuje takie rzeczy, jak kliknięcia przycisków, żądania API i aktualizacje w czasie rzeczywistym.

Co robi ten JavaScript:

Zarządza uwierzytelnianiem – logowanie, rejestracja, wylogowywanie i przechowywanie tokenów
Inicjuje Socket.io – łączy się z serwerem i nasłuchuje zdarzeń w czasie rzeczywistym
Wysyła żądania API – używa fetch() do komunikacji z punktami końcowymi serwera
Aktualizuje interfejs użytkownika – dynamicznie tworzy elementy HTML na podstawie danych z serwera
Obsługuje interakcje użytkownika – kliknięcia przycisków, przesyłanie formularzy itp.

Zastąp plik public/js/app.js pełnym kodem pokazanym w samouczku...

(Blok kodu app.js wygląda dokładnie tak samo jak poprzednio, z wszystkimi funkcjami logowania, rejestracji, ładowania udostępnianych list odtwarzania itd.)

Krok 6: Przetestuj API społecznościowej muzyki

Czas wszystko przetestować! Wykonaj poniższe kroki ostrożnie:

Uruchom serwer: W terminalu uruchom polecenie npm start. Powinny pojawić się komunikaty takie jak „MongoDB connected!” (Połączono z MongoDB!) i „Serwer uruchomiony na http://localhost:3000”.
Otwórz dwa okna przeglądarki: Otwórz http://localhost:3000 w dwóch oddzielnych oknach przeglądarki (lub jednym zwykłym i jednym incognito). Symuluje to dwóch różnych użytkowników.
Zarejestruj użytkownika 1: W pierwszym oknie kliknij „Zarejestruj się” i utwórz użytkownika (np. nazwa użytkownika: „Alicja”).
Zarejestruj użytkownika 2: W drugim oknie utwórz kolejnego użytkownika (np. nazwa użytkownika: „Bob”).
Dodajcie się nawzajem jako znajomi: W oknie Alicji wpisz „Bob” w polu „Dodaj znajomego” i kliknij „Dodaj znajomego”. Zrób to samo w oknie Boba (wpisz „Alicja”). Powinniście się widzieć na swoich listach znajomych!
Udostępnij playlistę: W oknie Alicji wpisz w polu „Czuję się dziś bardzo dobrze!”. Zaznacz pole wyboru „Udostępnij znajomym”, a następnie kliknij „Wygeneruj playlistę”.
Zobacz, co się dzieje:
- Jeśli Bob jest online (okno jest nadal otwarte), zobaczy powiadomienie wysuwające się z prawej strony!
- Bob powinien również zobaczyć udostępnioną playlistę Alicji w sekcji „Ostatnia aktywność”.
- Bob może kliknąć udostępnioną playlistę, aby wyświetlić pełną listę utworów.
- Jeśli Bob się wyloguje i zaloguje ponownie później, udostępniona playlista nadal będzie tam!

Zrozumienie, jak to wszystko działa

Prześledźmy, co się dzieje, gdy Alicja udostępnia listę odtwarzania Bobowi:

Alicja zaznacza opcję „Udostępnij znajomym” i klika „Generuj listę odtwarzania”
Frontend wysyła żądanie POST do /api/personalized-playlist z wartością shareWithFriends: true
Serwer analizuje nastrój Alicji i generuje listę odtwarzania za pomocą interfejsu API Spotify
Serwer zapisuje listę odtwarzania w tablicy moodHistory Alicji
Serwer przegląda listę odtwarzania znajomych Alicji (w tym Boba) i dodaje listę odtwarzania do tablicy sharedPlaylists każdego ze znajomych w MongoDB
Frontend emituje zdarzenie share_playlist Socket.io, aby powiadomić znajomych online
Serwer odbiera zdarzenie i sprawdza, czy Bob jest online (sprawdza mapę connectedUsers)
Jeśli Bob jest online, serwer wysyła mu zdarzenie friend_shared_playlist z podglądem listy odtwarzania
Przeglądarka Boba odbiera zdarzenie i wywołuje showNotification(), aby wyświetlić wyskakujące okienko
Przeglądarka Boba wywołuje również loadSharedPlaylists(), aby odświeżyć kanał aktywności
Jeśli Bob jest offline, zobaczy listę odtwarzania w swoim kanale aktywności po następnym zalogowaniu (ponieważ jest ona zapisana w jego sharedPlaylists tablica)

Co stworzyłeś

Gratulacje! Udało Ci się stworzyć w pełni funkcjonalną aplikację społecznościową do słuchania muzyki! Oto, co udało Ci się osiągnąć:

🤝 System znajomych – Użytkownicy mogą dodawać znajomych według nazwy użytkownika. Przyjaźnie są wzajemne (obaj użytkownicy stają się znajomymi) i przechowywane jako odniesienia ObjectId w MongoDB.
💾 Trwałe udostępnianie playlist – Udostępnione playlisty są zapisywane w bazie danych w tablicy sharedPlaylists każdego znajomego. Oznacza to, że dane są przechowywane nawet po wylogowaniu użytkownika.
📡 Powiadomienia w czasie rzeczywistym – Korzystając z Socket.io, użytkownicy online otrzymują natychmiastowe powiadomienia, gdy znajomi udostępniają playlisty. Nie trzeba odświeżać strony!
📰 Kanał aktywności – Użytkownicy mogą przeglądać ostatnio udostępnione playlisty wszystkich znajomych, posortowane od najnowszych. Kliknięcie playlisty wyświetla pełną listę utworów.
🔐 Bezpieczne uwierzytelnianie – Hasła są hashowane za pomocą bcrypt (nigdy nie są przechowywane jako zwykły tekst), a tokeny JWT służą do uwierzytelniania żądań API.
⏱️ Przyjazne dla trybu offline – Znajomi mogą przeglądać udostępnione playlisty, nawet jeśli nie byli online w momencie ich udostępniania. Wszystko jest zapisywane w bazie danych!

Kluczowe pojęcia, których się nauczyłeś

Komunikacja w czasie rzeczywistym z Socket.io (WebSockets)
Relacje w bazie danych z wykorzystaniem odniesień do MongoDB ObjectId
Denormalizacja dla zwiększenia wydajności (przechowywanie zarówno ObjectId, jak i nazwy użytkownika)
Projekt API RESTful (punkty końcowe GET, POST z odpowiednimi kodami stanu HTTP)
Wzorzec oprogramowania pośredniczącego do uwierzytelniania i przetwarzania żądań
Async/await do obsługi operacji asynchronicznych
Manipulacja DOM w celu dynamicznej aktualizacji interfejsu użytkownika
Architektura oparta na zdarzeniach z wykorzystaniem zdarzeń Socket.io

Rozwiązywanie typowych problemów

„Nie można połączyć się z MongoDB” – Upewnij się, że serwer MongoDB działa, a MONGODB_URI w pliku .env jest poprawny.
„Nieprawidłowe dane logowania” podczas logowania – Sprawdź dokładnie swoją nazwę użytkownika i hasło. Pamiętaj, że rozróżniają wielkość liter!
„Nie znaleziono użytkownika” podczas dodawania znajomego – Upewnij się, że wpisujesz dokładną nazwę użytkownika (rozróżniają wielkość liter). Musieli się oni wcześniej zarejestrować.
Udostępnione playlisty nie wyświetlają się – Sprawdź konsolę przeglądarki (F12) pod kątem błędów. Upewnij się, że obaj użytkownicy są znajomymi i zaznaczono pole wyboru „Udostępnij znajomym”.
Powiadomienia w czasie rzeczywistym nie działają – Upewnij się, że aplikacja Socket.io jest połączona. Sprawdź w konsoli przeglądarki, czy jest opcja „🔗 Połączono z serwerem”.

Kolejne kroki i pomysły na rozbudowę

Masz już działającą aplikację społecznościową do muzyki, więc oto kilka pomysłów na jej dalszy rozwój:

Prośby o dodanie do znajomych – Zamiast natychmiastowego nawiązywania przyjaźni, wymagaj od użytkowników wysyłania próśb, które można zaakceptować lub odrzucić.
Prywatne wiadomości – Dodaj system czatu za pomocą Socket.io, aby znajomi mogli wysyłać do siebie wiadomości.
Komentarze do playlist – Pozwól użytkownikom komentować udostępnione playlisty.
Polub/niepolub utwory – Dodaj przyciski kciuka w górę/w dół do każdego utworu na playliście.
Zgodność gustów muzycznych – Oblicz procent na podstawie podobieństwa preferencji muzycznych dwóch użytkowników.
Wyszukaj użytkowników – Dodaj funkcję wyszukiwania, aby znaleźć użytkowników według nazwy użytkownika.
Usuń/usuń ze znajomych – Dodaj możliwość usuwania znajomych lub usuwania udostępnionych playlist
Strony profilowe – Pokaż statystyki użytkownika, ulubione nastroje i ostatnie playlisty
Wspólne playlisty – Pozwól wielu znajomym dodawać utwory do wspólnej playlisty
Historia playlist – Przeglądaj wszystkie wcześniej wygenerowane playlisty

Stworzyłeś kompleksową aplikację społecznościową do muzyki z funkcjami w czasie rzeczywistym i trwałym przechowywaniem danych! To solidny fundament do zrozumienia nowoczesnego rozwoju sieci. Eksperymentuj i buduj dalej!🎵✨