Thêm bạn bè vào API Âm nhạc Đọc Tâm của bạn: Chia sẻ xã hội theo thời gian thực

Bạn đã sẵn sàng để biến API Âm nhạc Đọc Tâm của mình thành một mạng xã hội đích thực chưa? Trong hướng dẫn này, bạn sẽ thêm một hệ thống bạn bè mạnh mẽ và tính năng chia sẻ danh sách phát được lưu trữ trong cơ sở dữ liệu, để người dùng có thể xem danh sách phát được chia sẻ của bạn bè ngay cả khi họ không trực tuyến. Chúng tôi sẽ sử dụng Socket.io để cập nhật theo thời gian thực và MongoDB để lưu trữ liên tục.

Những gì bạn sẽ xây dựng

Hệ thống bạn bè – Thêm và quản lý bạn bè theo tên người dùng với tình bạn chung bằng cách sử dụng ObjectId
Chia sẻ danh sách phát liên tục – Danh sách phát được chia sẻ sẽ được lưu vào cơ sở dữ liệu và có thể xem bất cứ lúc nào
Thông báo theo thời gian thực – Nhận thông báo tức thì khi bạn bè chia sẻ (nếu trực tuyến)
Nguồn cấp dữ liệu hoạt động – Xem các lượt chia sẻ gần đây của bạn bè với bản xem trước danh sách phát có thể nhấp vào
Phân tích tâm trạng nâng cao – Tạo danh sách phát thông minh với các phương án tìm kiếm dự phòng

Điều kiện tiên quyết

API Âm nhạc Đọc Tâm trí của bạn đã hoàn thành từ Phần 2
MongoDB, Node.js và npm đã được cài đặt
Thông tin đăng nhập Spotify API (Client ID và Secret)
Thời gian viết mã 30–45 phút

Trong Phần 2, bạn đã xây dựng tài khoản người dùng với lịch sử tâm trạng và tùy chọn thông minh. Bây giờ chúng ta sẽ biến nó thành mạng xã hội! Bạn sẽ học cách kết nối người dùng, chia sẻ danh sách phát theo thời gian thực và liên tục, đồng thời xem bạn bè đang nghe gì dựa trên tâm trạng của họ.

Hiểu các Khái niệm Chính

Trước khi đi sâu vào mã, hãy cùng tìm hiểu những gì chúng ta đang xây dựng:

Socket.io – Một thư viện cho phép giao tiếp hai chiều thời gian thực giữa máy chủ và trình duyệt của bạn. Hãy nghĩ về nó như một cuộc gọi điện thoại thay vì tin nhắn văn bản – bạn có thể gửi và nhận thông tin ngay lập tức mà không cần làm mới trang.
Lưu trữ liên tục – Lưu dữ liệu vào cơ sở dữ liệu MongoDB của bạn để dữ liệu vẫn ở đó ngay cả khi người dùng đăng xuất. Điều này giống như lưu một tệp vào ổ cứng thay vì chỉ lưu trong bộ nhớ.
Tham chiếu ObjectId – Cách MongoDB tạo mối quan hệ giữa các dữ liệu. Thay vì sao chép tất cả thông tin của bạn bè vào hồ sơ của bạn, bạn chỉ cần lưu trữ một tham chiếu (như một con trỏ) đến hồ sơ của họ.
Schema – Hãy nghĩ về chúng như những bản thiết kế xác định cấu trúc dữ liệu của bạn. Chúng cho MongoDB biết mỗi tài liệu cần có những trường nào và loại dữ liệu nào sẽ có trong mỗi trường.

Bước 1: Cài đặt các phụ thuộc bắt buộc

Mở terminal trong thư mục dự án của bạn và cài đặt Socket.io để có các tính năng thời gian thực:

npm install socket.io

Lệnh này thực hiện: Lệnh này tải xuống và cài đặt thư viện Socket.io vào dự án của bạn. Lệnh npm install sẽ tải các gói từ sổ đăng ký npm (một thư viện mã JavaScript khổng lồ) và thêm chúng vào thư mục node_modules của bạn.

Các phụ thuộc khác (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) phải được cài đặt từ Phần 2.

Bước 2: Cập nhật Mô hình Người dùng của Bạn với các Tính năng Xã hội

Vì bạn đã tạo một mô hình Người dùng trong Phần 2, chúng ta sẽ cập nhật nó để thêm các tính năng xã hội. Mô hình Người dùng giống như một mẫu xác định thông tin chúng ta lưu trữ về từng người dùng trong cơ sở dữ liệu của mình.

Những gì chúng ta đang thêm:

mảng bạn bè – Danh sách các tham chiếu ObjectId đến những người dùng khác. Thay vì lưu trữ thông tin người dùng đầy đủ, chúng tôi chỉ lưu trữ ID trỏ đến các tài liệu người dùng khác trong cơ sở dữ liệu.
sharedWith và isShared trường – Các trường này theo dõi những mục nhập tâm trạng nào đã được chia sẻ và chia sẻ với ai.
sharedPlaylistSchema – Một lược đồ mới (bản thiết kế) xác định danh sách phát được chia sẻ trông như thế nào: ai đã chia sẻ, tâm trạng của người dùng là gì, các bản nhạc và thời điểm chia sẻ.
mảng sharedPlaylists – Một danh sách lưu trữ tất cả các danh sách phát mà bạn bè của bạn đã chia sẻ với bạn.

Thay thế models/User.js của bạn bằng:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // Sơ đồ cho các mục nhập tâm trạng riêng lẻ (mỗi lần người dùng tạo danh sách phát) const moodEntrySchema = new mongoose.Schema({ text: String, // Nội dung người dùng đã nhập (ví dụ: "cảm thấy vui vẻ hôm nay") detectedMood: String, // Tâm trạng mà trình phân tích của chúng tôi phát hiện được (ví dụ: "vui vẻ") confidence: Number, // Mức độ tự tin của chúng tôi (0-10) playlistGenerated: [{ // Mảng các bản nhạc mà chúng tôi đã đề xuất trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } // null = not rated, true = liked, false = disliked }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // Chúng tôi đã chia sẻ nội dung này với ai? isShared: { type: Boolean, default: false }, // Nội dung này có được chia sẻ không? timestamp: { type: Date, default: Date.now } // Nội dung này được tạo khi nào? }); // Sơ đồ cho sở thích của người dùng (thể loại yêu thích, v.v.) 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] } }); // MỚI: Sơ đồ cho danh sách phát mà bạn bè chia sẻ với bạn const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // Tham chiếu ObjectId đến người bạn đã chia sẻ sharedByUsername: String, // Tên người dùng để hiển thị dễ dàng (được chuẩn hóa để tăng hiệu suất) mood: String, // Danh sách phát này dành cho tâm trạng nào? playlist: [{ // Tên bài hát thực tế: String, nghệ sĩ: String, album_image: String, id: String }], dấu thời gian: { type: Date, default: Date.now } // Khi nào danh sách này được chia sẻ? }); // Sơ đồ người dùng chính - định nghĩa cấu trúc của tài liệu người dùng 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' }], // Mảng tham chiếu ObjectId tới bạn bè moodHistory: [moodEntrySchema], // Tất cả danh sách phát mà người dùng này đã tạo sharedPlaylists: [sharedPlaylistSchema], // Danh sách phát mà bạn bè đã chia sẻ với người dùng này preferences: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Number, default: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, default: Date.now } } }, { timestamps: true }); // Tự động thêm các trường createdAt và updatedAt // Middleware: Chạy hàm này trước khi lưu người dùng (để băm mật khẩu của họ) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // Chỉ băm nếu mật khẩu đã được thay đổi this.password = await bcrypt.hash(this.password, 12); // Băm với 12 vòng muối next(); }); // Phương thức: Kiểm tra xem mật khẩu có khớp với mật khẩu đã băm hay không userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // Phương pháp: Cập nhật số liệu thống kê người dùng dựa trên lịch sử tâm trạng của họ userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // Lấy tất cả các tâm trạng không trống this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // Đếm số lần xuất hiện của mỗi tâm trạng const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // Tìm tâm trạng có số lượng cao nhất this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // Tính toán thời gian yêu thích trong ngày dựa trên thời điểm danh sách phát được tạo 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'; } }; // Xuất mô hình để chúng ta có thể sử dụng trong các tệp khác module.exports = mongoose.model('User', userSchema);

Giải thích các khái niệm chính:

Tham chiếu ObjectId – Mảng friends không lưu trữ toàn bộ đối tượng người dùng. Thay vào đó, nó lưu trữ ObjectId (mã định danh duy nhất) trỏ đến những người dùng khác. Điều này hiệu quả vì nếu một người bạn thay đổi tên người dùng, chúng ta không cần phải cập nhật nó ở mọi nơi – chúng ta chỉ cần theo dõi tham chiếu.
Phi chuẩn hóa – Lưu ý rằng chúng ta lưu trữ cả sharedBy (ObjectId) và sharedByUsername (String). Điều này được gọi là phi chuẩn hóa – lưu trữ cùng một dữ liệu ở nhiều nơi để tăng hiệu suất. Chúng ta lưu trữ tên người dùng để không phải tra cứu người dùng mỗi khi hiển thị danh sách phát được chia sẻ.
Phần mềm trung gian (.pre()) – Phần mềm trung gian này tự động chạy trước một số thao tác nhất định. Tại đây, nó sẽ băm mật khẩu trước khi lưu vào cơ sở dữ liệu để bảo mật.
Phương thức thể hiện (.methods) – Đây là các hàm bạn có thể gọi trên từng tài liệu người dùng, như user.comparePassword() hoặc user.updateStats().

Bước 3: Cập nhật giao diện HTML của bạn bằng các tính năng mạng xã hội

Bây giờ, hãy cập nhật giao diện người dùng để bao gồm quản lý bạn bè và nguồn cấp dữ liệu hoạt động. HTML xác định cấu trúc trang web của bạn – những thành phần nào sẽ xuất hiện và vị trí của chúng.

Những gì chúng tôi đang thêm vào UI:

Phần danh sách bạn bè – Hiển thị bạn bè hiện tại của bạn
Thêm thông tin bạn bè – Trường văn bản để nhập tên người dùng của bạn bè
Nguồn cấp dữ liệu hoạt động gần đây – Hiển thị danh sách phát mà bạn bè của bạn đã chia sẻ (có thể nhấp để xem danh sách phát đầy đủ)
Hộp kiểm chia sẻ – Tùy chọn chia sẻ danh sách phát đã tạo của bạn với bạn bè
Khu vực thông báo – Thông báo bật lên để cập nhật theo thời gian thực

Thay thế public/index.html của bạn bằng:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>API Âm nhạc Đọc Tâm - Mạng xã hội</title> <style> /* Đặt lại kiểu trình duyệt mặc định */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Kiểu thân chính với nền chuyển màu */ body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; color: #333; } /* Vùng chứa cho toàn bộ bảng điều khiển */ .dashboard { max-width: 1000px; margin: 0 auto; padding: 20px; } /* Phần tiêu đề có thông báo chào mừng */ .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); /* Hiệu ứng làm mờ cho glassmorphism */ border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* Bố cục lưới hai cột: phần danh sách phát (lớn hơn) và phần bạn bè (nhỏ hơn) */ .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } /* Kiểu thẻ cho cả hai phần */ .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); } /* Kiểu dáng của các phần tử biểu mẫu */ input, textarea, button { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } /* Kiểu dáng cụ thể của nút với nền chuyển màu */ button { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; cursor: pointer; font-weight: 600; } /* Hiệu ứng di chuột tinh tế trên các nút */ button:hover { transform: translateY(-2px); } /* Kiểu dáng của từng mục bạn bè */ .friend-item { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 8px; border-left: 4px solid #667eea; /* Màu nhấn bên trái */ } /* Kiểu cửa sổ bật lên thông báo (mặc định là ẩn, trượt vào từ bên phải) */ .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); /* Bắt đầu ngoài màn hình */ transition: transform .3s ease; z-index: 1000; max-width: 300px; } /* Hiển thị thông báo (trượt vào) */ .notification.show { transform: translateX(0); } /* Biểu mẫu đăng nhập và đăng ký */ .login-section, .register-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } /* Các điều khiển hộp kiểm để chia sẻ */ .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"> <!-- Phần xác thực (Biểu mẫu đăng nhập/đăng ký) --> <div id="authSection"> <!-- Biểu mẫu đăng nhập --> <div class="login-section"> <h2>🧠🎵 Chào mừng trở lại!</h2> <input type="text" id="loginUsername" placeholder="Username"/> <input type="password" id="loginPassword" placeholder="Password"/> <button onclick="login()">Đăng nhập</button> <p><a href="#" onclick="showRegister()">Bạn chưa có tài khoản? Đăng ký</a></p> </div> <!-- Biểu mẫu đăng ký (mặc định bị ẩn) --> <div id="registerSection" class="register-section" style="display:none"> <h2>🎵 Tạo Hồ sơ Âm nhạc của Bạn</h2> <input type="text" id="regUsername" placeholder="Tên người dùng"/> <input type="email" id="regEmail" placeholder="Email"/> <input type="password" id="regPassword" placeholder="Mật khẩu"/> <button onclick="register()">Tạo Tài khoản</button> <p><a href="#" onclick="showLogin()">Bạn đã có tài khoản? Đăng nhập</a></p> </div> </div> <!-- Phần Bảng điều khiển Chính (hiển thị sau khi đăng nhập) --> <div id="dashboardSection" style="display:none"> <!-- Tiêu đề có tên người dùng và nút đăng xuất --> <div class="header"> <h1>🧠🎵 Trình đọc tâm trí âm nhạc cá nhân của bạn</h1> <p>Chào mừng, <span id="username"></span>!</p> <button onclick="logout()" style="width:auto; margin-top:10px">Đăng xuất</button> </div> <!-- Bố cục hai cột: Phần danh sách phát ở bên trái, Phần bạn bè ở bên phải --> <div class="main-content"> <!-- Cột bên trái: Tạo danh sách phát --> <div class="playlist-section"> <h2>💭 Bạn cảm thấy thế nào?</h2> <textarea id="moodText" placeholder="Mô tả tâm trạng của bạn..."></textarea> <div class="share-controls"> <label><input type="checkbox" id="shareWithFriends"/>Chia sẻ với bạn bè</label> </div> <button onclick="generatePlaylist()">🎧 Tạo danh sách phát</button> <!-- Kết quả sẽ xuất hiện ở đây sau khi tạo danh sách phát --> <div id="result" style="display:none"></div> </div> <!-- Cột bên phải: Bạn bè và hoạt động --> <div class="friends-section"> <h3>👥 Bạn bè của tôi</h3> <div id="friendsList"></div> <h4>Thêm bạn bè</h4> <input type="text" id="friendUsername" placeholder="Tên người dùng của bạn bè"/> <button onclick="addFriend()">Thêm bạn bè</button> <h4>Hoạt động gần đây</h4> <!-- Danh sách phát được bạn bè chia sẻ sẽ xuất hiện ở đây --> <div id="friendActivity">Hoạt động của bạn bè sẽ xuất hiện ở đây...</div> </div> </div> </div> </div> <!-- Container chứa cửa sổ thông báo bật lên --> <div id="notificationArea"></div> <!-- Bao gồm thư viện Socket.io (tự động được máy chủ của chúng tôi phục vụ) --> <script src="/socket.io.js"></script> <!-- Bao gồm JavaScript tùy chỉnh của chúng tôi --> <script src="./js/app.js"></script> </body> </html>

Hiểu về cấu trúc HTML:

Hai phần chính: authSection (đăng nhập/đăng ký) và dashboardSection (ứng dụng chính). Mỗi lần chỉ hiển thị một phần.
Bố cục dạng lưới: .main-content sử dụng CSS Grid để tạo hai cột (2 cột cho danh sách phát, 1 cột cho bạn bè). Điều này có nghĩa là phần danh sách phát rộng gấp đôi.
Trình xử lý sự kiện: onclick="functionName()" yêu cầu trình duyệt gọi hàm JavaScript khi phần tử được nhấp vào.
ID: Các phần tử có ID duy nhất (như id="friendsList") để JavaScript có thể tìm và sửa đổi chúng sau.

Bước 4: Cập nhật server.js với Socket.io, Điểm cuối của bạn bè và Chia sẻ liên tục

Bây giờ chúng ta sẽ cập nhật máy chủ để xử lý yêu cầu kết bạn, chia sẻ danh sách phát và giao tiếp thời gian thực. Máy chủ là "bộ não" của ứng dụng – nó xử lý các yêu cầu, giao tiếp với cơ sở dữ liệu và gửi phản hồi lại cho người dùng.

Những gì chúng tôi đang thêm vào máy chủ:

Máy chủ Socket.io – Cho phép giao tiếp hai chiều theo thời gian thực giữa máy chủ và máy khách
/api/add-friend endpoint – Xử lý các yêu cầu kết bạn (tình bạn chung)
/api/shared-playlists endpoint – Trả về danh sách phát mà bạn bè đã chia sẻ với bạn
/api/personalized-playlist được cải tiến – Giờ đây, lưu danh sách phát được chia sẻ vào cơ sở dữ liệu của bạn bè
Trình xử lý sự kiện Socket – Lắng nghe và phát ra các sự kiện theo thời gian thực (xác thực, chia sẻ)

Thay thế server.js với:

// Tải các biến môi trường từ tệp .env require('dotenv').config(); // Nhập các mô-đun cần thiết 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'); // Khởi tạo trình tạo danh sách phát const playlistGen = new PlaylistGenerator(); const PORT = process.env.PORT || 3000; // Kết nối với cơ sở dữ liệu MongoDB hàm async connectDB() { try { console.log('🔗 Đang kết nối với MongoDB…'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }); console.log('✅ MongoDB đã kết nối thành công!'); } catch (err) { console.error('❌ Kết nối MongoDB không thành công:', err.message); process.exit(1); // Thoát nếu kết nối cơ sở dữ liệu không thành công } } connectDB(); // Tạo ứng dụng Express và máy chủ HTTP const app = express(); const server = http.createServer(app); // Khởi tạo Socket.io trên máy chủ HTTP const io = socketIo(server); // Ánh xạ để theo dõi người dùng trực tuyến: userId => socketId // Điều này cho phép chúng ta gửi tin nhắn đến những người dùng cụ thể hiện đang được kết nối const connectedUsers = new Map(); // Trình xử lý kết nối Socket.io - chạy khi máy khách kết nối io.on('connection', socket => { console.log('🔗 Socket connected:', socket.id); // Xử lý sự kiện 'authenticate' - máy khách cho chúng ta biết họ là ai socket.on('authenticate', ({ userId, username }) => { // Lưu ID socket của người dùng này để chúng ta có thể gửi tin nhắn cho họ sau connectedUsers.set(userId, socket.id); socket.userId = userId; // Đính kèm userId vào socket này socket.username = username; // Đính kèm tên người dùng vào socket này console.log(`✅ Người dùng đã xác thực: ${username}`); }); // Xử lý sự kiện 'share_playlist' - người dùng muốn chia sẻ với bạn bè socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // Lặp qua tất cả ID bạn bè for (let friendId of friendIds) { // Lấy ID ổ cắm cho người bạn này (nếu họ đang trực tuyến) const sid = connectedUsers.get(friendId.toString()); if (sid) { // Bạn bè đang trực tuyến! Gửi cho họ thông báo thời gian thực io.to(sid).emit('friend_shared_playlist', { friendName, mood, playlist }); } // Nếu bạn bè ngoại tuyến, họ sẽ thấy danh sách phát trong nguồn cấp dữ liệu hoạt động của mình khi họ đăng nhập } } catch (err) { console.error('Lỗi chia sẻ danh sách phát:', err); } }); // Xử lý ngắt kết nối - xóa người dùng khỏi bản đồ trực tuyến socket.on('disconnect', () => { if (socket.userId) { connectedUsers.delete(socket.userId); console.log(`👋 Đã ngắt kết nối: ${socket.username}`); } }); }); // Phần mềm trung gian để phân tích cú pháp các phần thân yêu cầu JSON app.use(express.json()); // Phục vụ các tệp tĩnh từ thư mục 'public' (HTML, CSS, hình ảnh) app.use(express.static(path.join(__dirname, 'public'))); // ===== ĐIỂM CUỐI API ===== // POST /api/register - Tạo tài khoản người dùng mới app.post('/api/register', async (req, res) => { try { const { username, email, password } = req.body; // Xác thực đầu vào if (!username || !email || !password) { return res.status(400).json({ error: 'Tất cả các trường đều bắt buộc' }); } if (password.length < 6) { return res.status(400).json({ error: 'Mật khẩu phải có ít nhất 6 ký tự' }); } // Kiểm tra xem tên người dùng hoặc email đã tồn tại chưa const exists = await User.findOne({ $or: [{ username }, { email }] }); if (exists) { return res.status(400).json({ error: 'Tên người dùng hoặc email đã tồn tại' }); } // Tạo và lưu người dùng mới (mật khẩu sẽ được băm tự động bởi phần mềm trung gian trước khi lưu của chúng tôi) const user = new User({ username, email, password }); await user.save(); res.status(201).json({ message: 'Người dùng đã được tạo thành công' }); } catch (err) { console.error('Lỗi đăng ký:', err); res.status(500).json({ error: 'Đăng ký không thành công' }); } }); // POST /api/login - Xác thực người dùng và trả về mã thông báo JWT app.post('/api/login', async (req, res) => { try { const { username, password } = req.body; // Tìm người dùng theo tên người dùng hoặc email const user = await User.findOne({ $or: {[ username }, { email: username }] }); // Kiểm tra xem người dùng có tồn tại và mật khẩu có đúng không if (!user || !(await user.comparePassword(password))) { return res.status(401).json({ error: 'Thông tin đăng nhập không hợp lệ' }); } // Tạo mã thông báo JWT (giống như thẻ ID tạm thời) const token = jwt.sign( { userId: user._id }, // Tải trọng (những gì chúng ta đang mã hóa) process.env.JWT_SECRET, // Khóa bí mật (giữ an toàn) { expiresIn: '7d' } // Mã thông báo hết hạn sau 7 ngày); // Gửi mã thông báo trở lại cho máy khách res.json({ mã thông báo, người dùng: { tên người dùng: user.username, email: user.email, bạn bè: user.friends } }); } catch (err) { console.error('Lỗi đăng nhập:', err); res.status(500).json({ lỗi: 'Đăng nhập không thành công' }); } }); // GET /api/profile - Lấy hồ sơ người dùng hiện tại // Phần mềm trung gian 'auth' xác minh mã thông báo JWT và đính kèm người dùng vào req.user app.get('/api/profile', auth, async (req, res) => { try { // Cập nhật số liệu thống kê người dùng req.user.updateStats(); await req.user.save(); // Điền vào mảng bạn bè (thay thế ObjectIds bằng các đối tượng người dùng thực tế) 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('Lỗi hồ sơ:', err); res.status(500).json({ error: 'Không tải được profile' }); } }); // GET /api/shared-playlists - Lấy danh sách phát mà bạn bè đã chia sẻ với bạn app.get('/api/shared-playlists', auth, async (req, res) => { try { // Lấy 10 danh sách phát được chia sẻ gần đây nhất, được sắp xếp theo thứ tự gần đây nhất trước const sharedPlaylists = req.user.sharedPlaylists .sort((a, b) => b.timestamp - a.timestamp) // Sắp xếp giảm dần theo dấu thời gian .slice(0, 10); // Lấy 10 danh sách phát đầu tiên res.json({ sharedPlaylists }); } catch (err) { console.error('Lỗi danh sách phát được chia sẻ:', err); res.status(500).json({ error: 'Không tải được danh sách phát được chia sẻ' }); } }); // POST /api/add-friend - Thêm bạn bè (tình bạn chung) app.post('/api/add-friend', auth, async (req, res) => { try { const { friendUsername } = req.body; // Tìm bạn bè theo tên người dùng const friend = await User.findOne({ username: friendUsername }); if (!friend) { return res.status(404).json({ error: 'Không tìm thấy người dùng' }); } // Kiểm tra xem đã là bạn bè chưa if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { return res.status(400).json({ error: 'Đã là bạn bè với người dùng này' }); } // Thêm từng người dùng vào danh sách bạn bè của người kia (tình bạn chung) req.user.friends.push(friend._id); friend.friends.push(req.user._id); // Lưu cả hai người dùng await req.user.save(); await friend.save(); res.json({ message: 'Đã thêm bạn bè thành công', friendId: friend._id }); } catch (err) { console.error('Lỗi thêm bạn bè:', err); console.error('Lỗi ngăn xếp:', err.stack); res.status(500).json({ error: 'Không thêm được bạn bè' }); } }); // POST /api/personalized-playlist - Tạo danh sách phát dựa trên tâm trạng 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: 'Vui lòng cho tôi biết bạn cảm thấy thế nào!' }); } // 1. Phân tích tâm trạng từ văn bản của người dùng const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. Tạo danh sách phát dựa trên tâm trạng const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. Lưu vào lịch sử tâm trạng của người dùng 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. Nếu chia sẻ được bật, hãy lưu vào mảng sharedPlaylists của từng bạn bè 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 => ({ // Chia sẻ 5 bản nhạc đầu tiên name: t.name, artist: t.artist, album_image: t.album_image, id: t.id })) }; // Lặp qua tất cả bạn bè và thêm phần này danh sách phát vào sharedPlaylists của họ cho (let friendId of req.user.friends) { const friend = await User.findById(friendId); if (friend) { friend.sharedPlaylists.push(sharedPlaylistData); await friend.save(); } } } // 5. Gửi phản hồi trở lại cho máy khách res.json({ moodAnalysis, playlist, personalizedMessage: `Dựa trên lịch sử của bạn, đây là danh sách phát ${moodAnalysis.mood} hoàn hảo của bạn!` }); } catch (err) { console.error('Lỗi danh sách phát được cá nhân hóa:', err); console.error('Lỗi ngăn xếp:', err.stack); res.status(500).json({ error: 'Không tạo được danh sách phát được cá nhân hóa. Vui lòng thử lại.' }); } }); // Dự phòng: Phục vụ index.html cho bất kỳ tuyến đường không phải API nào (để định tuyến SPA) app.use((req, res, next) => { if (req.method === 'GET' && !req.path.startsWith('/api/')) { res.sendFile(path.join(__dirname, 'public', 'index.html')); } else { next(); } }); // Trình xử lý lỗi toàn cục app.use((err, req, res, next) => { console.error('Lỗi toàn cục:', err); res.status(500).json({ error: 'Lỗi máy chủ nội bộ', chi tiết: err.message }); }); // Khởi động máy chủ server.listen(PORT, () => { console.log(`🚀 Máy chủ đang chạy trên http://localhost:${PORT}`); });

Giải thích các khái niệm chính về máy chủ:

Phần mềm trung gian – Các hàm xử lý yêu cầu trước khi chúng đến trình xử lý tuyến đường của bạn. express.json() phân tích cú pháp JSON từ các phần thân yêu cầu, auth xác minh mã thông báo JWT.
async/await – Cú pháp JavaScript hiện đại để xử lý các hoạt động không đồng bộ (như truy vấn cơ sở dữ liệu). await tạm dừng thực thi cho đến khi lời hứa được giải quyết.
Mã trạng thái HTTP – Các số biểu thị kết quả: 200 = thành công, 201 = đã tạo, 400 = yêu cầu không hợp lệ, 401 = không được phép, 404 = không tìm thấy, 500 = lỗi máy chủ.
Sự kiện Socket.io – Các thông báo được đặt tên trao đổi qua lại giữa máy khách và máy chủ. socket.on() lắng nghe các sự kiện, socket.emit() gửi các sự kiện.
JWT (Mã thông báo Web JSON) – Một cách an toàn để xác định người dùng. Khi họ đăng nhập, chúng tôi sẽ cung cấp cho họ một mã thông báo. Họ gửi mã thông báo này với mỗi yêu cầu để chứng minh họ là ai.

Bước 5: Cập nhật JavaScript giao diện người dùng (public/js/app.js)

Cuối cùng, hãy thêm JavaScript để giao diện người dùng của chúng ta có tính tương tác. Mã này chạy trên trình duyệt của người dùng và xử lý các tác vụ như nhấp vào nút, yêu cầu API và cập nhật theo thời gian thực.

JavaScript này thực hiện những gì:

Quản lý xác thực – Đăng nhập, đăng ký, đăng xuất và lưu trữ mã thông báo
Khởi tạo Socket.io – Kết nối với máy chủ và lắng nghe các sự kiện theo thời gian thực
Thực hiện các yêu cầu API – Sử dụng fetch() để giao tiếp với các điểm cuối của máy chủ
Cập nhật UI – Tạo động các phần tử HTML dựa trên dữ liệu từ máy chủ
Xử lý các tương tác của người dùng – Nhấp vào nút, gửi biểu mẫu, v.v.

Thay thế public/js/app.js của bạn bằng mã đầy đủ được hiển thị trong hướng dẫn...

(Khối mã app.js tuân theo chính xác như trước, (với tất cả các chức năng đăng nhập, đăng ký, tải danh sách phát được chia sẻ, v.v.)

Bước 6: Kiểm tra API Mạng xã hội Âm nhạc của bạn

Giờ là lúc kiểm tra mọi thứ! Hãy làm theo các bước sau một cách cẩn thận:

Khởi động máy chủ của bạn: Trong terminal, hãy chạy npm start. Bạn sẽ thấy các thông báo như "MongoDB đã kết nối!" và "Máy chủ đang chạy trên http://localhost:3000".
Mở hai cửa sổ trình duyệt: Mở http://localhost:3000 trong hai cửa sổ trình duyệt riêng biệt (hoặc một cửa sổ thông thường và một cửa sổ ẩn danh). Thao tác này mô phỏng hai người dùng khác nhau.
Đăng ký Người dùng 1: Trong cửa sổ đầu tiên, nhấp vào "Đăng ký" và tạo một người dùng (ví dụ: tên người dùng: "alice").
Đăng ký Người dùng 2: Trong cửa sổ thứ hai, tạo một người dùng khác (ví dụ: tên người dùng: "bob").
Thêm nhau làm bạn bè: Trong cửa sổ của Alice, nhập "bob" vào trường "Thêm bạn bè" và nhấp vào Thêm bạn bè. Làm tương tự trong cửa sổ của Bob (nhập "alice"). Bạn sẽ thấy nhau trong danh sách bạn bè!
Chia sẻ danh sách phát: Trong cửa sổ của Alice, nhập nội dung như "Hôm nay tôi cảm thấy rất vui!" vào ô văn bản tâm trạng. Đánh dấu vào ô "Chia sẻ với bạn bè", sau đó nhấp vào "Tạo danh sách phát".
Hãy xem điều kỳ diệu xảy ra:
- Nếu Bob đang trực tuyến (cửa sổ vẫn mở), anh ấy sẽ thấy một thông báo trượt vào từ bên phải!
- Bob cũng sẽ thấy danh sách phát được chia sẻ của Alice xuất hiện trong phần "Hoạt động gần đây" của anh ấy.
- Bob có thể nhấp vào danh sách phát được chia sẻ để xem danh sách đầy đủ các bài hát.
- Nếu Bob đăng xuất và đăng nhập lại sau, danh sách phát được chia sẻ sẽ vẫn ở đó!

Hiểu cách mọi thứ hoạt động cùng nhau

Hãy cùng theo dõi điều gì xảy ra khi Alice chia sẻ danh sách phát với Bob:

Alice chọn "Chia sẻ với bạn bè" và nhấp vào "Tạo danh sách phát"
Frontend gửi yêu cầu POST đến /api/personalized-playlist với shareWithFriends: true
Máy chủ phân tích tâm trạng của Alice và tạo danh sách phát bằng Spotify API
Máy chủ lưu danh sách phát vào mảng moodHistory của Alice
Máy chủ lặp qua bạn bè của Alice (bao gồm cả Bob) và thêm danh sách phát vào mảng sharedPlaylists của mỗi người bạn trong MongoDB
Frontend phát ra sự kiện share_playlist Socket.io để thông báo bạn bè trực tuyến
Máy chủ nhận sự kiện và kiểm tra xem Bob có trực tuyến không (tìm trong connectedUsers Map)
Nếu Bob trực tuyến, máy chủ sẽ gửi cho anh ấy sự kiện friend_shared_playlist kèm theo bản xem trước danh sách phát
Trình duyệt của Bob nhận sự kiện và gọi showNotification() để hiển thị cửa sổ bật lên
Trình duyệt của Bob cũng gọi loadSharedPlaylists() để làm mới nguồn cấp dữ liệu hoạt động
Nếu Bob ngoại tuyến, anh ấy sẽ thấy danh sách phát trong nguồn cấp dữ liệu hoạt động của mình khi đăng nhập lần sau (vì danh sách phát được lưu trong mảng sharedPlaylists của anh ấy)

Những gì bạn đã xây dựng

Xin chúc mừng! Bạn đã xây dựng thành công một ứng dụng âm nhạc xã hội đầy đủ tính năng! Đây là những gì bạn đã đạt được:

🤝 Hệ thống bạn bè – Người dùng có thể thêm bạn bè theo tên người dùng. Tình bạn là tương hỗ (cả hai người dùng đều trở thành bạn của nhau) và được lưu trữ dưới dạng tham chiếu ObjectId trong MongoDB.
💾 Chia sẻ danh sách phát liên tục – Danh sách phát được chia sẻ được lưu vào cơ sở dữ liệu trong mảng sharedPlaylists của mỗi người bạn. Điều này có nghĩa là dữ liệu vẫn tồn tại ngay cả sau khi người dùng đăng xuất.
📡 Thông báo thời gian thực – Sử dụng Socket.io, người dùng trực tuyến sẽ nhận được thông báo ngay lập tức khi bạn bè chia sẻ danh sách phát. Không cần làm mới trang!
📰 Nguồn cấp dữ liệu hoạt động – Người dùng có thể xem danh sách phát được chia sẻ gần đây từ tất cả bạn bè của họ, được sắp xếp theo thứ tự mới nhất trước. Nhấp vào danh sách phát sẽ hiển thị danh sách bài hát đầy đủ.
🔐 Xác thực an toàn – Mật khẩu được băm bằng bcrypt (không bao giờ được lưu trữ dưới dạng văn bản thuần túy) và mã thông báo JWT được sử dụng để xác thực các yêu cầu API.
⏱️ Thân thiện với ngoại tuyến – Bạn bè có thể xem danh sách phát được chia sẻ ngay cả khi họ không trực tuyến khi danh sách phát được chia sẻ. Mọi thứ đều được lưu vào cơ sở dữ liệu!

Các khái niệm chính bạn đã học

Giao tiếp thời gian thực với Socket.io (WebSockets)
Mối quan hệ cơ sở dữ liệu sử dụng tham chiếu ObjectId của MongoDB
Phi chuẩn hóa để tăng hiệu suất (lưu trữ cả ObjectId và tên người dùng)
Thiết kế API RESTful (các điểm cuối GET, POST với mã trạng thái HTTP phù hợp)
Mô hình phần mềm trung gian để xác thực và xử lý yêu cầu
Async/await để xử lý các hoạt động không đồng bộ
Thao tác DOM để cập nhật UI động
Kiến trúc hướng sự kiện với các sự kiện Socket.io

Khắc phục sự cố thường gặp

"Không thể kết nối với MongoDB" – Đảm bảo máy chủ MongoDB của bạn đang chạy và MONGODB_URI trong .env của bạn là chính xác.
"Thông tin đăng nhập không hợp lệ" khi đăng nhập – Kiểm tra lại tên người dùng và mật khẩu. Lưu ý, chúng phân biệt chữ hoa chữ thường!
"Không tìm thấy người dùng" khi thêm bạn bè – Đảm bảo bạn đang nhập đúng tên người dùng (phân biệt chữ hoa chữ thường). Họ phải đã đăng ký trước.
Danh sách phát được chia sẻ không hiển thị – Kiểm tra bảng điều khiển của trình duyệt (F12) để tìm lỗi. Đảm bảo cả hai người dùng đều là bạn bè và hộp kiểm "Chia sẻ với bạn bè" đã được chọn.
Thông báo thời gian thực không hoạt động – Đảm bảo Socket.io đã được kết nối. Kiểm tra bảng điều khiển trình duyệt để biết "🔗 Đã kết nối với máy chủ".

Các bước tiếp theo và ý tưởng để mở rộng

Bây giờ bạn đã có một ứng dụng âm nhạc xã hội hoạt động, sau đây là một số ý tưởng để phát triển ứng dụng hơn nữa:

Yêu cầu kết bạn – Thay vì kết bạn ngay lập tức, hãy yêu cầu người dùng gửi yêu cầu có thể được chấp nhận hoặc từ chối
Nhắn tin riêng tư – Thêm hệ thống trò chuyện bằng Socket.io để bạn bè có thể nhắn tin cho nhau
Bình luận danh sách phát – Cho phép người dùng bình luận về danh sách phát được chia sẻ
Thích/không thích các bản nhạc – Thêm nút thích/không thích vào mỗi bản nhạc trong danh sách phát
Tương thích sở thích âm nhạc – Tính toán phần trăm dựa trên mức độ tương đồng về sở thích âm nhạc của hai người dùng
Tìm kiếm người dùng – Thêm tính năng tìm kiếm để tìm người dùng theo tên người dùng
Xóa/hủy kết bạn – Thêm khả năng xóa bạn bè hoặc xóa danh sách phát được chia sẻ
Trang hồ sơ – Hiển thị số liệu thống kê người dùng, tâm trạng yêu thích và danh sách phát gần đây
Danh sách phát cộng tác – Cho phép nhiều bạn bè thêm bài hát vào danh sách phát được chia sẻ
Lịch sử danh sách phát – Xem tất cả danh sách phát đã tạo trước đó

Bạn đã xây dựng một ứng dụng âm nhạc xã hội đầy đủ tính năng với các tính năng thời gian thực và lưu trữ dữ liệu liên tục! Đây là nền tảng vững chắc để hiểu về phát triển web hiện đại. Hãy tiếp tục thử nghiệm và xây dựng!🎵✨