Додавання друзів до вашого API читання думок: обмін у соціальних мережах у реальному часі

Готові зробити ваш API читання думок справді соціальним? У цьому посібнику ви додасте надійну систему друзів та обмін списками відтворення, які зберігатимуться в базі даних, щоб користувачі могли переглядати спільні списки відтворення своїх друзів, навіть коли вони не в мережі. Ми використовуватимемо Socket.io для оновлень у режимі реального часу та MongoDB для постійного зберігання.

Що ви створите

Система друзів – Додавання та керування друзями за іменем користувача з взаємною дружбою за допомогою ObjectId
Постійний обмін списками відтворення – Спільні списки відтворення зберігаються в базі даних і можуть бути переглянуті будь-коли
Сповіщення в режимі реального часу – Отримуйте миттєві сповіщення, коли друзі діляться (якщо онлайн)
Стрічка активності – Переглядайте нещодавні спільні публікації друзів за допомогою клікабельних попередніх переглядів списків відтворення
Покращений аналіз настрою – Розумне створення списків відтворення з резервними варіантами пошуку

Передумови

Ваш завершений API читання думок від Частина 2
Встановлено MongoDB, Node.js та npm
Облікові дані Spotify API (ідентифікатор клієнта та секретний ключ)
30–45 хвилин кодування

У частині 2 ви створили облікові записи користувачів з історією настрою та розумними налаштуваннями. Тепер ми зробимо її соціальною! Ви дізнаєтеся, як підключати користувачів, ділитися списками відтворення як у режимі реального часу, так і постійно, а також бачити, що слухають ваші друзі на основі їхнього настрою.

Розуміння ключових концепцій

Перш ніж ми заглибимося в код, давайте розберемося, що ми створюємо:

Socket.io – бібліотека, яка забезпечує двосторонній зв’язок між вашим сервером та браузером у режимі реального часу. Уявіть собі це як телефонний дзвінок, а не текстове повідомлення – ви можете надсилати та отримувати інформацію миттєво, не оновлюючи сторінку.
Постійне сховище – Зберігання даних у вашій базі даних MongoDB, щоб вони залишалися там навіть після виходу користувачів із системи. Це як збереження файлу на жорсткому диску, а не просто його зберігання в пам’яті.
Посилання на ObjectId – Спосіб MongoDB створювати зв’язки між даними. Замість копіювання всієї інформації вашого друга у ваш профіль, ви просто зберігаєте посилання (наприклад, вказівник) на його профіль.
Схеми – Уявіть їх як креслення, що визначають структуру ваших даних. Вони повідомляють MongoDB, які поля має містити кожен документ і який тип даних міститься в кожному полі.

Крок 1: Встановлення необхідних залежностей

Відкрийте термінал у каталозі вашого проекту та встановіть Socket.io для функцій реального часу:

npm install socket.io

Що це робить: Ця команда завантажує та встановлює бібліотеку Socket.io у ваш проект. Команда npm install вибирає пакети з реєстру npm (величезної бібліотеки коду JavaScript) та додає їх до вашої папки node_modules.

Інші залежності (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) вже мають бути встановлені з Частини 2.

Крок 2: Оновіть свою модель користувача соціальними функціями

Оскільки ви вже створили модель користувача в Частині 2, ми оновимо її, щоб додати соціальні функції. Модель користувача схожа на шаблон, який визначає, яку інформацію ми зберігаємо про кожного користувача в нашій базі даних.

Що ми додаємо:

friends – Список посилань ObjectId на інших користувачів. Замість того, щоб зберігати повну інформацію про користувача, ми просто зберігаємо ідентифікатори, які вказують на інші документи користувача в базі даних.
sharedWith та isShared – Вони відстежують, якими записами настрою було поділено та з ким.

sharedPlaylistSchema – Нова схема (план), яка визначає, як виглядає спільний список відтворення: хто ним поділився, для якого настрою він був, треки та коли ним було поділено.

sharedPlaylists масив – Список, який зберігає всі списки відтворення, якими ваші друзі поділилися з вами.

Замініть ваш models/User.js на:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // Схема для окремих записів настрою (щоразу, коли користувач генерує список відтворення) const moodEntrySchema = new mongoose.Schema({ text: String, // Що ввів користувач (наприклад, "почуваюся щасливим сьогодні") detectedMood: String, // Настрій, який виявив наш аналізатор (наприклад, "щасливий") confidence: Number, // Наскільки ми впевнені (0-10) playlistGenerated: [{ // Масив треків, які ми рекомендували trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } // null = не оцінено, true = сподобалося, false = не сподобалося }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // З ким ми поділилися цим? isShared: { type: Boolean, default: false }, // Чи було цим поділено? timestamp: { type: Date, default: Date.now } // Коли це було створено? }); // Схема для налаштувань користувача (улюблені жанри тощо) 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] } }); // НОВЕ: Схема для списків відтворення, якими друзі діляться з вами const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // Посилання ObjectId на друга, який поділився sharedByUsername: String, // Ім'я користувача для зручного відображення (денормалізовано для виконання) mood: String, // Для якого настрою був цей список відтворення? playlist: [{ // Фактична назва треку: String, виконавець: String, album_image: String, id: String }], timestamp: { type: Date, default: Date.now } // Коли це було опубліковано? }); // Основна схема користувача - визначає структуру документа користувача 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' }], // Масив посилань ObjectId на друзів moodHistory: [moodEntrySchema], // Всі списки відтворення, згенеровані цим користувачем sharedPlaylists: [sharedPlaylistSchema], // Списки відтворення, якими друзі поділилися з цим користувачем preferences: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Number, default: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, default: Date.now } } }, { timestamps: true }); // Автоматично додавати поля createdAt та updatedAt // Проміжне програмне забезпечення: Запустити цю функцію перед збереженням користувача (для хешування його пароля) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // Хешувати лише якщо пароль було змінено this.password = await bcrypt.hash(this.password, 12); // Хешувати з 12 раундами солі next(); }); // Метод: Перевірити, чи пароль відповідає хешованому паролю userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // Метод: Оновлення статистики користувача на основі історії його настрою userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // Отримання всіх непорожніх настроїв this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // Порахування кількості разів появи кожного настрою const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // Знаходження настрою з найбільшою кількістю this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // Обчислюємо улюблений час доби на основі часу створення плейлистів 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'; } }; // Експортуємо модель, щоб ми могли використовувати її в інших файлах module.exports = mongoose.model('User', userSchema);

Пояснення ключових концепцій:

Посилання на ObjectId – Масив friends не зберігає цілі об'єкти користувача. Натомість він зберігає ObjectId (унікальні ідентифікатори), які вказують на інших користувачів. Це ефективно, тому що якщо друг змінює своє ім'я користувача, нам не потрібно оновлювати його всюди – ми просто слідуємо за посиланням.

Денормалізація – Зверніть увагу, що ми зберігаємо як sharedBy (ObjectId), так і sharedByUsername (String). Це називається денормалізацією – зберігання тих самих даних у кількох місцях для підвищення продуктивності. Ми зберігаємо ім'я користувача, щоб нам не доводилося шукати його щоразу, коли ми відображаємо спільні списки відтворення.

Проміжне програмне забезпечення (.pre()) – воно запускається автоматично перед певними операціями. Тут воно хешує паролі перед збереженням у базі даних для безпеки.

Методи екземпляра (.methods) – це функції, які можна викликати для окремих документів користувача, такі як user.comparePassword() або user.updateStats().

Крок 3: Оновіть свій HTML-інтерфейс за допомогою соціальних функцій

Тепер давайте оновимо інтерфейс користувача, щоб включити керування друзями та стрічку активності. HTML визначає структуру вашої веб-сторінки – які елементи відображаються та де вони розташовані.

Що ми додаємо до інтерфейсу користувача:

Розділ списку друзів – Показує ваших поточних друзів

Додати поле для введення імені друга – Текстове поле для введення імені користувача друга

Стрічка останньої активності – Показує списки відтворення, якими поділилися ваші друзі (можна натиснути, щоб переглянути повний список відтворення)

Прапорець «Поділитися» – Можливість поділитися згенерованим списком відтворення з друзями

Область сповіщень – Спливаючі сповіщення про оновлення в режимі реального часу

Замініть ваш public/index.html на:

<!DOCTYPE html> <html lang="en"> <head> API музики для читання думок - Соціальні мережі </head> <body> <div class="dashboard">  <div id="authSection">  <div class="login-section"> <h2>🧠🎵 Ласкаво просимо назад!</h2> <input type="text" id="loginUsername" placeholder="Username"/> <input type="password" id="loginPassword" placeholder="Password"/> <button onclick="login()">Увійти</button> <p><a href="#" onclick="showRegister()">Немає облікового запису? Зареєструйтесь</a></p> </div>  <div id="registerSection" class="register-section" style="display:none"> <h2>🎵 Створіть свій музичний профіль</h2> <input type="text" id="regUsername" placeholder="Ім'я користувача"/> <input type="email" id="regEmail" placeholder="Email"/> <input type="password" id="regPassword" placeholder="Password"/> <button onclick="register()">Створити обліковий запис</button> <p><a href="#" onclick="showLogin()">Вже маєте обліковий запис? Увійдіть</a></p> </div> </div>  <div id="dashboardSection" style="display:none">  <div class="header"> <h1>🧠🎵 Ваш особистий читач музичних думок</h1> <p>Ласкаво просимо, <span id="ім'я користувача"></span>!</p> <button onclick="logout()" style="width:auto; margin-top:10px">Вийти</button> </div>  <div class="main-content">  <div class="playlist-section"> <h2>💭 Як ви себе почуваєте?</h2> </textarea><div class="share-controls"><label><input type="checkbox" id="shareWithFriends"/>Поділитися з друзями</label></div><button onclick="generatePlaylist()">🎧 Згенерувати список відтворення</button><div id="result" style="display:none"></div></div><div class="friends-section"><h3>👥 Мої друзі</h3> <div id="friendsList"></div> <h4>Додати друга</h4> <input type="text" id="friendUsername" placeholder="Ім'я користувача друга"/> <button onclick="addFriend()">Додати друга</button> <h4>Нещодавня активність</h4>  <div id="friendActivity">Тут відображатиметься активність друзів...</div> </div> </div> </div>  <div id="notificationArea"></div> <lt;!-- Включити бібліотеку Socket.io (автоматично обслуговується нашим сервером) --> <script src="/socket.io/socket.io.js"></script>  <script src="./js/app.js"></script> </body> </html></code></pre> <h3>Розуміння структури HTML:</h3> <ul> <li><strong>Два основні розділи</strong>: <code>authSection</code> (вхід/реєстрація) та <code>dashboardSection</code> (головний додаток). Одночасно видно лише один.</li> <li><strong>Сітчастий макет</strong>: <code>.main-content</code> використовує CSS Grid для створення двох стовпців (2fr для списку відтворення, 1fr для друзів). Це означає, що розділ списку відтворення вдвічі ширший.</li> <li><strong>Обробники подій</strong>: <code>onclick="functionName()"</code> повідомляє браузеру про виклик функції JavaScript під час натискання на елемент.</li> <li><strong>Ідентифікатори</strong>: Елементи мають унікальні ідентифікатори (наприклад, <code>id="friendsList"</code>), тому наш JavaScript може знайти та змінити їх пізніше.</li> </ul> <h2>Крок 4: Оновіть server.js за допомогою Socket.io, кінцевих точок друзів та постійного спільного доступу</h2> <p>Тепер ми оновимо наш сервер для обробки запитів на дружбу, спільного доступу до списків відтворення та спілкування в режимі реального часу. Сервер – це «мозок» вашої програми – він обробляє запити, взаємодіє з базою даних і надсилає відповіді користувачам.</p> <h3>Що ми додаємо до сервера:</h3> <ul> <li><strong>Сервер Socket.io</strong> – Забезпечує двонаправлений зв’язок у режимі реального часу між сервером і клієнтами</li> <li><strong><code>/api/add-friend</code> кінцева точка</strong> – Обробляє запити на дружбу (взаємна дружба)</li> <li><strong><code>/api/shared-playlists</code> кінцева точка</strong> – Повертає списки відтворення, якими друзі поділилися з вами</li> <li><strong>Покращений <code>/api/personalized-playlist</code></strong> – Тепер зберігає спільні списки відтворення в базах даних друзів</li> <li><strong>Обробники подій Socket</strong> – Прослуховують та генерують події в режимі реального часу (автентифікація, спільний доступ)</li> </ul> <p><strong>Замініть ваш <code>server.js</code> з:</strong></p> <pre><code>// Завантаження змінних середовища з файлу .env require('dotenv').config(); // Імпорт обов'язкових модулів 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'); // Ініціалізація генератора списків відтворення const playlistGen = new PlaylistGenerator(); const PORT = process.env.PORT || 3000; // Підключення до бази даних MongoDB async function connectDB() { try { console.log('🔗 Підключення до MongoDB…'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }); console.log('✅ Підключення до MongoDB успішно встановлено!'); } catch (err) { console.error('❌ Помилка підключення до MongoDB:', err.message); process.exit(1); // Вихід, якщо підключення до бази даних не вдається } } connectDB(); // Створення програми Express та HTTP-сервера const app = express(); const server = http.createServer(app); // Ініціалізація Socket.io поверх HTTP-сервера const io = socketIo(server); // Карта для відстеження онлайн-користувачів: userId => socketId // Це дозволяє нам надсилати повідомлення певним користувачам, які наразі підключені const connectedUsers = new Map(); // Обробник з'єднань Socket.io - запускається, коли клієнт підключається io.on('connection', socket => { console.log('🔗 Socket connected:', socket.id); // Обробляє подію 'authenticate' - клієнт повідомляє нам, хто він socket.on('authenticate', ({ userId, username }) => { // Зберігає ідентифікатор сокета цього користувача, щоб ми могли надсилати йому повідомлення пізніше connectedUsers.set(userId, socket.id); socket.userId = userId; // Приєднує userId до цього сокета socket.username = username; // Приєднує ім'я користувача до цього сокета console.log(`✅ Автентифікований користувач: ${username}`); }); // Обробляє подію 'share_playlist' - користувач хоче поділитися з друзями socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // Перебирає всі ідентифікатори друзів for (let friendId of friendIds) { // Отримує Ідентифікатор сокета для цього друга (якщо він онлайн) const sid = connectedUsers.get(friendId.toString()); if (sid) { // Друг онлайн! Надішліть йому сповіщення в режимі реального часу io.to(sid).emit('friend_shared_playlist', { friendName, mood, playlist }); } // Якщо друг офлайн, він побачить список відтворення у своїй стрічці активності, коли ввійде в систему } } catch (err) { console.error('Помилка спільного доступу до списку відтворення:', err); } }); // Обробка відключення - видалення користувача з онлайн-карти socket.on('disconnect', () => { if (socket.userId) { connectedUsers.delete(socket.userId); console.log(`👋 Disconnected: ${socket.username}`); } }); }); // Проміжне програмне забезпечення для розбору тіл JSON-запитів app.use(express.json()); // Обслуговувати статичні файли з папки 'public' (HTML, CSS, зображення) app.use(express.static(path.join(__dirname, 'public'))); // ===== КІНЦЕВІ ТОЧКИ API ===== // POST /api/register - Створення нового облікового запису користувача app.post('/api/register', async (req, res) => { try { const { ім'я користувача, email, пароль } = req.body; // Перевірка введених даних if (!ім'я користувача || !email || !password) { return res.status(400).json({ помилка: 'Усі поля обов'язкові' }); } if (password.length < 6) { return res.status(400).json({ помилка: 'Пароль має містити щонайменше 6 символів' }); } // Перевірка, чи ім'я користувача або електронна пошта вже існують const exists = await User.findOne({ $or: [{ ім'я користувача }, { email }] }); if (exists) { return res.status(400).json({ помилка: 'Ім'я користувача або електронна пошта вже існує' }); } // Створити та зберегти нового користувача (пароль буде автоматично хешовано нашим проміжним програмним забезпеченням попереднього збереження) const user = new User({ ім'я користувача, email, пароль }); await user.save(); res.status(201).json({ повідомлення: 'Користувач створено успішно' }); } catch (err) { console.error('Помилка реєстрації:', err); res.status(500).json({ помилка: 'Реєстрація не вдалася' }); } }); // POST /api/login - Автентифікувати користувача та повернути JWT-токен app.post('/api/login', async (req, res) => { try { const { username, password } = req.body; // Пошук користувача за іменем користувача або електронною поштою const user = await User.findOne({ $or: {[ username }, { email: username }] }); // Перевірити, чи існує користувач і чи правильний пароль if (!user || !(await user.comparePassword(password))) { return res.status(401).json({ error: 'Недійсні облікові дані' }); } // Створити JWT-токен (наприклад, тимчасову посвідчення особи) const token = jwt.sign( { userId: user._id }, // Корисне навантаження (те, що ми кодуємо) process.env.JWT_SECRET, // Секретний ключ (забезпечує безпеку) { expiresIn: '7d' } // Термін дії токена закінчується через 7 днів ); // Надіслати токен назад клієнту res.json({ token, user: { username: user.username, email: user.email, friends: user.friends } }); } catch (err) { console.error('Помилка входу:', err); res.status(500).json({ error: 'Помилка входу' }); } }); // GET /api/profile - Отримати профіль поточного користувача // Проміжне програмне забезпечення 'auth' перевіряє токен JWT та приєднує користувача до req.user app.get('/api/profile', auth, async (req, res) => { try { // Оновлення статистики користувача req.user.updateStats(); await req.user.save(); // Заповнення масиву друзів (заміна ObjectIds фактичними об'єктами користувача) await req.user.populate('friends', 'username _id'); const { username, email, friends } = req.user; res.json({ _id: req.user._id, username, email, friends: friends.map(f => ({ username: f.username, _id: f._id })) }); } catch (err) { console.error('Помилка профілю:', err); res.status(500).json({ помилка: 'Не вдалося завантажити профіль' }); } }); // GET /api/shared-playlists - Отримати списки відтворення, якими друзі поділилися з вами app.get('/api/shared-playlists', auth, async (req, res) => { try { // Отримати останні 10 спільних списків відтворення, відсортованих за датою найновішого const sharedPlaylists = req.user.sharedPlaylists .sort((a, b) => b.timestamp - a.timestamp) // Сортувати за спаданням за міткою часу .slice(0, 10); // Взяти перші 10 res.json({ sharedPlaylists }); } catch (err) { console.error('Помилка спільних списків відтворення:', err); res.status(500).json({ помилка: 'Не вдалося завантажити спільні списки відтворення' }); } }); // POST /api/add-friend - Додати друга (взаємна дружба) app.post('/api/add-friend', auth, async (req, res) => { try { const { friendUsername } = req.body; // Знайти друга за іменем користувача const friend = await User.findOne({ username: friendUsername }); if (!friend) { return res.status(404).json({ error: 'Користувач не знайдено' }); } // Перевірити, чи вже є друзі if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { return res.status(400).json({ error: 'Цей користувач вже дружить з ним' }); } // Додати кожного користувача до списку друзів іншого (взаємна дружба) req.user.friends.push(friend._id); friend.friends.push(req.user._id); // Зберегти обох користувачів await req.user.save(); await friend.save(); res.json({ message: 'Друга успішно додано', friendId: friend._id }); } catch (err) { console.error('Помилка додавання друга:', err); console.error('Стек помилок:', err.stack); res.status(500).json({ помилка: 'Не вдалося додати друга' }); } }); // POST /api/personalized-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: 'Будь ласка, скажіть мені, як ви себе почуваєте!' }); } // 1. Проаналізувати настрій з тексту користувача const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. Створити список відтворення на основі настрою const playlist = await playlistGen.generatePlaylist(moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. Зберегти в історії настрою користувача 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. Якщо спільний доступ увімкнено, зберегти в масив sharedPlaylists кожного друга 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 => ({ // Поділитися першими 5 треками name: t.name, artist: t.artist, album_image: t.album_image, id: t.id })) }; // Перебираємо всіх друзів та додаємо цей плейлист до їхніх спільних плейлистів for (let friendId of req.user.friends) { const friend = await User.findById(friendId); if (friend) { friend.sharedPlaylists.push(sharedPlaylistData); await friend.save(); } } } // 5. Надіслати відповідь клієнту res.json({ moodAnalysis, playlist, personalizedMessage: `На основі вашої історії, ось ваш ідеальний плейлист ${moodAnalysis.mood}!` }); } catch (err) { console.error('Помилка персоналізованого плейлиста:', err); console.error('Стек помилок:', err.stack); res.status(500).json({ error: 'Не вдалося створити персоналізований плейлист. Спробуйте ще раз.' }); } }); // Резервний варіант: Обслуговувати index.html для будь-яких маршрутів, що не пов'язані з API (для маршрутизації SPA) app.use((req, res, next) => { if (req.method === 'GET' && !req.path.startsWith('/api/')) { res.sendFile(path.join(__dirname, 'public', 'index.html')); } else { next(); } }); // Обробник глобальних помилок app.use((err, req, res, next) => { console.error('Глобальна помилка:', err); res.status(500).json({ error: 'Внутрішня помилка сервера', details: err.message }); }); // Запуск сервера server.listen(PORT, () => { console.log(`🚀 Сервер працює на http://localhost:${PORT}`); });</code></pre> <h3>Пояснення ключових концепцій сервера:</h3> <ul> <li><strong>Middleware</strong> – Функції, які обробляють запити, перш ніж вони досягнуть ваших обробників маршрутів. <code>express.json()</code> аналізує JSON з тіл запитів, <code>auth</code> перевіряє токени JWT.</li> <li><strong>async/await</strong> – Сучасний синтаксис JavaScript для обробки асинхронних операцій (таких як запити до бази даних). <code>await</code> призупиняє виконання, доки обіцянка не буде виконана.</li> <li><strong>Коди стану HTTP</strong> – числа, що вказують на результат: 200 = успіх, 201 = створено, 400 = поганий запит, 401 = неавторизовано, 404 = не знайдено, 500 = помилка сервера.</li> <li><strong>Події Socket.io</strong> – іменовані повідомлення, які передаються між клієнтом і сервером. <code>socket.on()</code> прослуховує події, <code>socket.emit()</code> надсилає події.</li> <li><strong>JWT (JSON Web Token)</strong> – безпечний спосіб ідентифікації користувачів. Коли вони входять у систему, ми надаємо їм токен. Вони надсилають цей токен із кожним запитом, щоб підтвердити свою особу.</li> </ul> <h2>Крок 5: Оновіть JavaScript фронтенду (public/js/app.js)</h2> <p>Нарешті, давайте додамо JavaScript, який зробить наш фронтенд інтерактивним. Цей код виконується у браузері користувача та обробляє такі речі, як натискання кнопок, запити API та оновлення в режимі реального часу.</p> <h3>Що робить цей JavaScript:</h3> <ul> <li><strong>Керує автентифікацією</strong> – Вхід, реєстрація, вихід та зберігання токенів</li> <li><strong>Ініціалізує Socket.io</strong> – Підключається до сервера та прослуховує події в режимі реального часу</li> <li><strong>Здійснює запити API</strong> – Використовує <code>fetch()</code> для зв'язку з кінцевими точками сервера</li> <li><strong>Оновлює інтерфейс користувача</strong> – Динамічно створює елементи HTML на основі даних із сервера</li> <li><strong>Обробляє взаємодію з користувачем</strong> – Натискання кнопок, надсилання форм тощо.</li> </ul> <p><strong>Замініть ваш <code>public/js/app.js</code> повним кодом, показаним у навчальному посібнику...</strong></p> <p><em>(Блок коду app.js наведено точно так само, як і раніше, з усі функції для входу, реєстрації, завантаження спільних списків відтворення тощо)</em></p> <h2>Крок 6: Перевірте свій API соціальної музики</h2> <p>Тепер час все протестувати! Уважно виконайте ці кроки:</p> <ol> <li><strong>Запустіть свій сервер:</strong> У терміналі запустіть <code>npm start</code>. Ви повинні побачити повідомлення типу "MongoDB підключено!" та "Сервер працює на http://localhost:3000".</li> <li><strong>Відкрийте два вікна браузера:</strong> Відкрийте <code>http://localhost:3000</code> у двох окремих вікнах браузера (або в одному звичайному вікні та в одному вікні в режимі анонімного перегляду). Це імітує двох різних користувачів.</li> <li><strong>Зареєструвати користувача 1:</strong> У першому вікні натисніть «Зареєструватися» та створіть користувача (наприклад, ім’я користувача: «alice»).</li> <li><strong>Зареєструвати користувача 2:</strong> У другому вікні створіть ще одного користувача (наприклад, ім’я користувача: «bob»).</li> <li><strong>Додайте один одного до друзів:</strong> У вікні Аліси введіть «bob» у поле «Додати друга» та натисніть «Додати друга». Зробіть те саме у вікні Боба (введіть «alice»). Ви повинні побачити один одного у списках друзів!</li> <li><strong>Поділіться списком відтворення:</strong> У вікні Аліси введіть щось на кшталт «Я сьогодні почуваюся надзвичайно щасливою!» у текстовому полі настрою. Поставте прапорець «Поділитися з друзями», а потім натисніть «Створити список відтворення».</li> <li><strong>Спостерігайте за дивом:</strong> <ul> <li>Якщо Боб онлайн (вікно все ще відкрите), він побачить сповіщення, що з’явиться праворуч!</li> <li>Боб також має побачити спільний список відтворення Аліси в розділі «Остання активність».</li> <li>Боб може натиснути на спільний список відтворення, щоб переглянути повний список пісень.</li> <li>Якщо Боб вийде з системи та знову ввійде пізніше, спільний список відтворення все одно буде там!</li> </ul> </li> </ol> <h2>Розуміння того, як усе працює разом</h2> <p>Давайте простежимо, що відбувається, коли Аліса ділиться списком відтворення з Бобом:</p> <ol> <li><strong>Аліса перевіряє «Поділитися з друзями» та натискає «Створити список відтворення»</strong></li> <li><strong>Frontend</strong> надсилає POST-запит до <code>/api/personalized-playlist</code> з <code>shareWithFriends: true</code></li> <li><strong>Сервер</strong> аналізує настрій Аліси та створює список відтворення за допомогою Spotify API</li> <li><strong>Сервер</strong> зберігає список відтворення в масиві <code>moodHistory</code> Аліси</li> <li><strong>Сервер</strong> перебирає друзів Аліси (включно з Бобом) та додає список відтворення до масиву <code>sharedPlaylists</code> кожного друга в MongoDB</li> <li><strong>Frontend</strong> генерує подію <code>share_playlist</code> Socket.io для сповіщення онлайн друзі</li> <li><strong>Сервер</strong> отримує подію та перевіряє, чи Боб онлайн (шукає на карті <code>connectedUsers</code>)</li> <li><strong>Якщо Боб онлайн</strong>, сервер надсилає йому подію <code>friend_shared_playlist</code> з попереднім переглядом списку відтворення</li> <li><strong>Браузер Боба</strong> отримує подію та викликає <code>showNotification()</code> для відображення спливаючого вікна</li> <li><strong>Браузер Боба</strong> також викликає <code>loadSharedPlaylists()</code> для оновлення стрічки активності</li> <li><strong>Якщо Боб офлайн</strong>, він побачить список відтворення у своїй стрічці активності, коли наступного разу ввійде в систему (оскільки він збережений у його масиві <code>sharedPlaylists</code>)</li> </ol> <h2>Що ви створили</h2> <p>Вітаємо! Ви успішно створили повнофункціональний додаток для соціальної музики! Ось чого ви досягли:</p> <ul> <li><strong>🤝 Система друзів</strong> – Користувачі можуть додавати друзів за іменем користувача. Дружба є взаємною (обидва користувачі стають друзями один одного) та зберігається як посилання ObjectId у MongoDB.</li> <li><strong>💾 Постійний спільний доступ до списків відтворення</strong> – Спільні списки відтворення зберігаються в базі даних у масиві <code>sharedPlaylists</code> кожного друга. Це означає, що дані зберігаються навіть після виходу користувачів із системи.</li> <li><strong>📡 Сповіщення в режимі реального часу</strong> – За допомогою Socket.io онлайн-користувачі отримують миттєві сповіщення, коли друзі діляться списками відтворення. Оновлення сторінки не потрібне!</li> <li><strong>📰 Стрічка активності</strong> – Користувачі можуть переглядати нещодавно спільні списки відтворення від усіх своїх друзів, відсортовані за новими. Натискання на список відтворення показує повний список треків.</li> <li><strong>🔐 Безпечна автентифікація</strong> – Паролі хешуються за допомогою bcrypt (ніколи не зберігаються як звичайний текст), а токени JWT використовуються для автентифікації запитів API.</li> <li><strong>⏱️ Зручний для офлайн-перегляду</strong> – Друзі можуть переглядати спільні списки відтворення, навіть якщо вони не були онлайн, коли список відтворення був спільним. Все зберігається в базі даних!</li> </ul> <h2>Ключові концепції, які ви вивчили</h2> <ul> <li><strong>Зв'язок у режимі реального часу</strong> за допомогою Socket.io (WebSockets)</li> <li><strong>Зв'язки з базами даних</strong> з використанням посилань MongoDB ObjectId</li> <li><strong>Денормалізація</strong> для продуктивності (зберігання як ObjectId, так і імені користувача)</li> <li><strong>RESTful API-проектування</strong> (кінцеві точки GET, POST з відповідними кодами стану HTTP)</li> <li><strong>Шаблон проміжного програмного забезпечення</strong> для автентифікації та обробки запитів</li> <li><strong>Async/await</strong> для обробки асинхронних операцій</li> <li><strong>Маніпуляції DOM</strong> для динамічного оновлення інтерфейсу користувача</li> <li><strong>Подієва архітектура</strong> з подіями Socket.io</li> </ul> <h2>Вирішення поширених проблем</h2> <ul> <li><strong>"Не вдається підключитися до MongoDB"</strong> – Переконайтеся, що ваш сервер MongoDB працює, а ваш <code>MONGODB_URI</code> у <code>.env</code> правильний.</li> <li><strong>"Недійсні облікові дані" під час входу</strong> – Ще раз перевірте своє ім'я користувача та пароль. Пам'ятайте, що вони чутливі до регістру!</li> <li><strong>"Користувач не знайдено" під час додавання друга</strong> – Переконайтеся, що ви вводите точне ім'я користувача (з урахуванням регістру). Вони повинні були спочатку зареєструватися.</li> <li><strong>Спільні списки відтворення не відображаються</strong> – Перевірте консоль вашого браузера (F12) на наявність помилок. Переконайтеся, що обидва користувачі є друзями, і що прапорець "Поділитися з друзями" встановлено.</li> <li><strong>Сповіщення в режимі реального часу не працюють</strong> – Переконайтеся, що Socket.io підключено. Перевірте консоль браузера на наявність повідомлення "🔗 Підключено до сервера".</li> </ul> <h2>Наступні кроки та ідеї для розширення</h2> <p>Тепер, коли у вас є робочий додаток для соціальної музики, ось кілька ідей для його подальшого розвитку:</p> <ul> <li><strong>Запити до друзів</strong> – Замість миттєвої дружби вимагайте від користувачів надсилання запитів, які можна прийняти або відхилити</li> <li><strong>Приватні повідомлення</strong> – Додайте систему чату за допомогою Socket.io, щоб друзі могли надсилати один одному повідомлення</li> <li><strong>Коментарі до списків відтворення</strong> – Дозвольте користувачам коментувати спільні списки відтворення</li> <li><strong>Треки "Подобається"/"Не подобається"</strong> – Додайте кнопки "Подобається"/"Вниз" до кожного треку у списку відтворення</li> <li><strong>Сумісність музичних смаків</strong> – Обчисліть відсоток на основі схожості музичних уподобань двох користувачів</li> <li><strong>Пошук користувачів</strong> – Додайте функцію пошуку, щоб знаходити користувачів за іменем користувача</li> <li><strong>Видалити/відписатися від друзів</strong> – Додайте можливість видалення друзів або видалити спільні списки відтворення</li> <li><strong>Сторінки профілів</strong> – Показувати статистику користувача, улюблені настрої та нещодавні списки відтворення</li> <li><strong>Спільні списки відтворення</strong> – Дозвольте кільком друзям додавати треки до спільного списку відтворення</li> <li><strong>Історія списків відтворення</strong> – Переглядайте всі ваші раніше створені списки відтворення</li> </ul> <p>Ви створили повноцінний додаток для соціальної музики з функціями реального часу та постійним сховищем даних! Це міцна основа для розуміння сучасної веб-розробки. Продовжуйте експериментувати та створювати!🎵✨</p></article></body></html>