将好友添加到您的“读心音乐 API”：实时社交共享

准备好让您的“读心音乐 API”真正具备社交功能了吗？在本教程中，您将添加一个强大的好友系统和持久保存在数据库中的播放列表共享功能，以便用户即使不在线也可以查看好友共享的播放列表。我们将使用 Socket.io 进行实时更新，并使用 MongoDB 进行持久存储。

您将构建的内容

好友系统 – 使用 ObjectIds 通过相互友谊的用户名添加和管理好友
持久播放列表共享 – 共享的播放列表保存到数据库并可随时查看
实时通知 – 当好友共享时（如果在线）获取即时通知
活动提要 – 通过可点击的播放列表预览查看最近好友的共享
增强的情绪分析 – 通过搜索回退生成智能播放列表

先决条件

您已完成的 Mind-Reading Music API 来自第 2 部分
已安装 MongoDB、Node.js 和 npm
Spotify API 凭据（客户端 ID 和密钥）
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 引用列表。我们不会存储完整的用户信息，而只是存储指向数据库中其他用户文档的 ID。
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, artist: 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], // 朋友与此用户共享的播放列表 preference: { 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 ? '夜晚' : avg < 12 ? '早晨' : avg < 18 ? '下午' : '晚上'; } }; // 导出模型以便在其他文件中使用它 module.exports = mongoose.model('User', userSchema);

关键概念解释：

ObjectId 引用 – friends 数组不存储整个用户对象。相反，它存储指向其他用户的 ObjectId（唯一标识符）。这很高效，因为如果朋友更改了用户名，我们不需要在所有地方更新它 – 我们只需遵循引用即可。
非规范化 – 请注意，我们同时存储了 sharedBy（ObjectId）和 sharedByUsername（字符串）。这称为非规范化 – 将相同的数据存储在多个位置以提高性能。我们存储用户名，这样就不必在每次显示共享播放列表时都查找用户。
中间件 (.pre()) – 它会在某些操作之前自动运行。在这里，它会在将密码保存到数据库之前对其进行哈希处理，以确保安全。
实例方法 (.methods) – 您可以在单个用户文档上调用这些函数，例如 user.comparePassword() 或 user.updateStats()。

步骤 3：使用社交功能更新您的 HTML 前端

现在，让我们更新用户界面，以包含好友管理和活动提要。 HTML 定义了网页的结构 – 出现哪些元素以及它们的位置。

我们将向 UI 添加的内容：

好友列表部分 – 显示您当前的好友
添加好友输入 – 用于输入好友用户名的文本字段
最近活动提要 – 显示您的好友分享的播放列表（可点击查看完整播放列表）
分享复选框 – 用于与好友分享您生成的播放列表的选项
通知区域 – 用于实时更新的弹出通知

将您的 public/index.html 替换为：

<!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> /* 重置默认浏览器样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 主体样式采用渐变背景 */ body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; color: #333; } /* 整个仪表板的容器 */ .dashboard { max-width: 1000px; margin: 0 auto; padding: 20px; } /* 包含欢迎消息的标题部分 */ .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); /* 玻璃态的模糊效果 */ border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* 两列网格布局：播放列表部分（较大）和朋友部分（较小） */ .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } /* 两个部分的卡片样式 */ .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); } /* 表单元素样式 */ input, textarea, button { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } /* 按钮特定样式，带有渐变背景 */ button { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; cursor: pointer; font-weight: 600; } /* 按钮上的微妙悬停效果 */ button:hover { transform: translateY(-2px); } /* 单个好友项目样式 */ .friend-item { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 8px; border-left: 4px solid #667eea; /* 左侧强调色 */} /* 通知弹出样式（默认隐藏，从右侧滑入） */ .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); /* 从屏幕外开始 */ transition: transform .3s ease; z-index: 1000; max-width: 300px; } /* 显示通知（滑入） */ .notification.show { transform: translateX(0); } /* 登录和注册表单 */ .login-section, .register-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } /* 用于共享的复选框控件 */ .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"> <!-- 身份验证部分（登录/注册表单）--> <div id="authSection"> <!-- 登录表单--> <div class="login-section"> <h2>🧠🎵 欢迎回来！</h2> <input type="text" id="loginUsername" placeholder="用户名"/> <input type="password" id="loginPassword" placeholder="密码"/> <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="电子邮件"/> <input type="password" id="regPassword" placeholder="密码"/> <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="username"></span>！</p> <button onclick="logout()" style="width:auto; margin-top:10px">注销</button> </div> <!-- 两列布局：左侧为播放列表部分，右侧为好友部分--> <div class="main-content"> <!-- 左侧栏：播放列表生成 -> <div class="playlist-section"> <h2>💭 你感觉如何？</h2> <textarea id="moodText" placeholder="描述你的心情..."></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> <!-- 通知弹出窗口的容器 --> <div id="notificationArea"></div><!-- 包含 Socket.io 库（由我们的服务器自动提供）--> <script src="/socket.io/socket.io.js"></script> <!-- 包含我们自定义的 JavaScript--> <script src="./js/app.js"></script> </body> </html>

了解 HTML 结构：

两个主要部分：authSection（登录/注册）和 dashboardSection（主应用程序）。一次只能看到一个。
网格布局：.main-content 使用 CSS 网格创建两列（2fr 用于播放列表，1fr 用于好友）。这意味着播放列表部分的宽度是原来的两倍。
事件处理程序：onclick="functionName()" 告诉浏览器在单击元素时调用 JavaScript 函数。
ID：元素具有唯一 ID（如 id="friendsList"），因此我们的 JavaScript 可以在以后找到并修改它们。

步骤 4：使用 Socket.io、Friend Endpoints 和持久共享更新 server.js

现在我们将更新我们的服务器以处理好友请求、播放列表共享和实时通信。服务器是您应用的“大脑”——它处理请求、与数据库通信，并将响应发送回用户。

我们要添加到服务器的内容：

Socket.io 服务器——支持服务器和客户端之间的实时双向通信
/api/add-friend 端点——处理好友请求（相互好友关系）
/api/shared-playlists 端点——返回好友与您分享的播放列表
增强的 /api/personalized-playlist——现在将共享的播放列表保存到好友的数据库中
Socket 事件处理程序——监听并发出实时事件（身份验证、共享）

替换您的 server.js with:

// 从 .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); // 在 HTTP 服务器之上初始化 Socket.io const io = socketIo(server); // 用于跟踪在线用户的映射：userId => socketId // 这让我们可以向当前连接的特定用户发送消息 const connectedUsers = new Map(); // Socket.io 连接处理程序 - 在客户端连接时运行 io.on('connection', socket => { console.log('🔗 Socket 已连接：', socket.id); // 处理 'authenticate' 事件 - 客户端告诉我们他们是谁 socket.on('authenticate', ({ userId, username }) => { // 存储此用户的套接字 ID，以便我们稍后可以向他们发送消息 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 { // 循环遍历所有朋友 ID for (let friendId of friendIds) { // 获取此好友的套接字 ID（如果他们在线） 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(`👋 已断开连接：${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 { username, email, password } = req.body; // 验证输入 if (!username || !email || !password) { return res.status(400).json({ error: '所有字段都是必填项' }); } if (password.length < 6) { return res.status(400).json({ error: '密码必须至少为 6 个字符' }); } // 检查用户名或电子邮件是否已存在 const exist = await User.findOne({ $or: [{ username }, { email }] }); if (exists) { return res.status(400).json({ error: '用户名或电子邮件已存在' }); } //创建并保存新用户（密码将由我们的预保存中间件自动散列） const user = new User({ username, email, password }); await user.save(); res.status(201).json({ message: '用户创建成功' }); } catch (err) { console.error('注册错误：', err); res.status(500).json({ error: '注册失败' }); } }); // 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: 'Invalid credentials' }); } // 创建 JWT 令牌（类似临时身份证） const token = jwt.sign( { userId: user._id }, // Payload（我们正在编码的内容） 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('Profile error:', err); res.status(500).json({ error: '加载配置文件失败' }); } }); // 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({ error: '加载共享播放列表失败' }); } }); // 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: 'User not found' }); } // 检查是否已经是好友 if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { return res.status(400).json({ error: 'Already friends with this user' }); } // 将每个用户添加到对方的好友列表中（相互建立友谊） 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({ error: '添加好友失败' }); } }); // 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 })) }; // 循环遍历所有好友并将此播放列表添加到他们的 sharedPlaylists 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: '无法生成个性化播放列表。请重试。' }); } }); // 后备：为任何非 API 路由提供 index.html（用于 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} 上运行`); });

关键服务器概念解释：

中间件 – 在请求到达路由处理程序之前处理请求的函数。 express.json() 从请求主体解析 JSON，auth 验证 JWT 令牌。
async/await – 用于处理异步操作（如数据库查询）的现代 JavaScript 语法。 await 暂停执行，直到承诺完成。
HTTP 状态代码 – 指示结果的数字：200 = 成功，201 = 创建，400 = 错误请求，401 = 未授权，404 = 未找到，500 = 服务器错误。
Socket.io 事件 – 在客户端和服务器之间来回传递的命名消息。socket.on() 监听事件，socket.emit() 发送事件。
JWT（JSON Web 令牌） – 一种安全的用户身份识别方式。当用户登录时，我们会向他们提供令牌。他们在每个请求中发送此令牌来证明他们的身份。

步骤 5：更新前端 JavaScript (public/js/app.js)

最后，让我们添加使前端可交互的 JavaScript。此代码在用户的浏览器中运行，并处理按钮点击、API 请求和实时更新等操作。

此 JavaScript 的作用：

管理身份验证 – 登录、注册、注销和令牌存储
初始化 Socket.io – 连接到服务器并监听实时事件
发出 API 请求 – 使用 fetch() 与服务器端点通信
更新 UI – 根据来自服务器的数据动态创建 HTML 元素
处理用户交互 – 按钮点击、表单提交等

将您的 public/js/app.js 替换为教程中显示的完整代码...

（app.js 代码块与之前完全相同， （例如登录、注册、loadSharedPlaylists 等功能）

第 6 步：测试您的社交音乐 API

现在是时候测试所有内容了！请仔细按照以下步骤操作：

启动服务器：在终端中，运行 npm start。您应该会看到类似“MongoDB 已连接！”和“服务器正在 http://localhost:3000 上运行”的消息。

打开两个浏览器窗口：在两个单独的浏览器窗口（或一个常规窗口和一个隐身窗口）中打开 http://localhost:3000。这模拟了两个不同的用户。

注册用户 1： 在第一个窗口中，点击“注册”并创建一个用户（例如，用户名：“alice”）。

注册用户 2： 在第二个窗口中，创建另一个用户（例如，用户名：“bob”）。

互相添加为好友： 在 Alice 的窗口中，在“添加好友”字段中输入“bob”，然后点击“添加好友”。在 Bob 的窗口中执行相同操作（输入“alice”）。您应该会在好友列表中看到彼此！

分享播放列表： 在 Alice 的窗口中，在心情文本框中输入类似“我今天感觉超级开心！”的内容。选中“与好友分享”复选框，然后点击“生成播放列表”。

观看神奇的发生：

如果 Bob 在线（窗口仍然打开），他会看到一条通知从右侧滑入！

Bob 还应该看到 Alice 的共享播放列表出现在他的“最近活动”部分。

Bob 可以点击共享播放列表来查看完整的歌曲列表。

如果 Bob 注销并稍后重新登录，共享播放列表仍会在那里！

了解所有组件如何协同工作

让我们来追踪一下当 Alice 与 Bob 分享播放列表时会发生什么：

Alice 勾选“与好友分享”并点击“生成播放列表”

前端向 /api/personalized-playlist 发送一个 POST 请求，其中设置了 shareWithFriends: true

服务器 分析 Alice 的心情并使用 Spotify API 生成播放列表

服务器 将播放列表保存到 Alice 的 moodHistory 数组中

服务器 循环遍历 Alice 的好友（包括 Bob），并将播放列表添加到 MongoDB 中每个好友的 sharedPlaylists 数组中

前端发出share_playlist Socket.io 事件通知在线好友

服务器接收事件并检查 Bob 是否在线（查看 connectedUsers Map）

如果 Bob 在线，服务器向他发送一个带有播放列表预览的 friend_shared_playlist 事件

Bob 的浏览器接收事件并调用 showNotification() 显示弹出窗口

Bob 的浏览器还调用 loadSharedPlaylists() 刷新活动 feed

如果 Bob 处于离线状态，当他下次登录时，他会在他的活动 feed 中看到播放列表（因为它保存在他的 sharedPlaylists 数组中）

您构建的内容

恭喜！您已成功构建功能齐全的社交音乐应用！以下是您的成果：

🤝 好友系统 – 用户可以通过用户名添加好友。好友关系是相互的（两个用户互为好友），并以 ObjectId 引用的形式存储在 MongoDB 中。

💾 持久播放列表共享 – 共享的播放列表将保存到每个好友的 sharedPlaylists 数组的数据库中。这意味着即使用户注销，数据也会保留。

📡 实时通知 – 使用 Socket.io，在线用户在好友共享播放列表时会立即收到通知。无需刷新页面！

📰 活动动态 – 用户可以看到所有好友最近共享的播放列表，并按最新排序。单击播放列表可显示完整的曲目列表。

🔐 安全身份验证 – 密码使用 bcrypt 进行哈希处理（从不存储为纯文本），并使用 JWT 令牌对 API 请求进行身份验证。

⏱️ 离线友好 – 即使好友在共享播放列表时不在线，他们也可以查看共享的播放列表。所有内容都保存到数据库中！

您学到的关键概念

使用 Socket.io (WebSockets) 进行实时通信

使用 MongoDB ObjectId 引用的数据库关系

非规范化以提高性能（同时存储 ObjectId 和用户名）

RESTful API 设计（带有适当 HTTP 状态代码的 GET、POST 端点）

用于身份验证和请求处理的中间件模式

用于处理异步操作的 Async/await

DOM 操作以动态更新 UI

使用 Socket.io 事件的事件驱动架构

常见问题故障排除

“无法连接到 MongoDB” – 确保您的 MongoDB 服务器正在运行，并且 .env 中的 MONGODB_URI 是正确的。

登录时出现“凭据无效” – 仔细检查您的用户名和密码。请记住，它们区分大小写！

添加好友时出现“未找到用户” – 确保您输入的用户名准确无误（区分大小写）。他们必须先注册。

共享的播放列表未出现 – 检查浏览器控制台 (F12) 是否有错误。确保两个用户都是好友，并且已选中“与好友共享”复选框。

实时通知不起作用 – 确保 Socket.io 已连接。检查浏览器控制台中的“🔗 已连接到服务器”。

后续步骤和扩展想法

现在您已经有了一个可以运行的社交音乐应用，以下是一些进一步发展的想法：

好友请求 – 不是即时好友，而是要求用户发送可以接受或拒绝的请求

私人消息 – 使用 Socket.io 添加聊天系统，以便好友可以互相发送消息

播放列表评论 – 允许用户对共享的播放列表发表评论

喜欢/不喜欢曲目 – 为播放列表中的每个曲目添加竖起大拇指/向下按钮

音乐品味兼容性 – 根据两个用户的音乐偏好相似程度计算百分比

搜索用户 – 添加搜索功能以按用户名查找用户

删除/取消好友 – 添加移除好友或删除共享播放列表的功能

个人资料页面 – 显示用户统计数据、收藏心情和最近的播放列表

协作播放列表 – 允许多个好友将曲目添加到共享播放列表

播放列表历史记录 – 查看您之前生成的所有播放列表

您已经构建了一个具有实时功能和持久数据存储的全栈社交音乐应用！这是理解现代 Web 开发的坚实基础。继续尝试和构建！🎵✨