เพิ่มเพื่อนใน Mind-Reading Music API ของคุณ: แชร์โซเชียลแบบเรียลไทม์

พร้อมที่จะทำให้ Mind-Reading Music API ของคุณเป็นโซเชียลอย่างแท้จริงแล้วหรือยัง? ในบทช่วยสอนนี้ คุณจะเพิ่มระบบเพื่อนที่แข็งแกร่งและการแชร์เพลย์ลิสต์ที่ยังคงอยู่ในฐานข้อมูล เพื่อให้ผู้ใช้สามารถดูเพลย์ลิสต์ที่เพื่อนแชร์ได้แม้ในขณะที่ไม่ได้ออนไลน์ เราจะใช้ Socket.io สำหรับการอัปเดตแบบเรียลไทม์ และ MongoDB สำหรับการจัดเก็บแบบถาวร

สิ่งที่คุณจะสร้าง

ระบบเพื่อน – เพิ่มและจัดการเพื่อนโดยใช้ชื่อผู้ใช้พร้อมมิตรภาพร่วมกันโดยใช้ ObjectIds
การแชร์เพลย์ลิสต์แบบถาวร – เพลย์ลิสต์ที่แชร์จะถูกบันทึกไว้ในฐานข้อมูลและสามารถดูได้ทุกเมื่อ
การแจ้งเตือนแบบเรียลไทม์ – รับการแจ้งเตือนทันทีเมื่อเพื่อนแชร์ (หากออนไลน์อยู่)
ฟีดกิจกรรม – ดูการแชร์ของเพื่อนล่าสุดด้วยตัวอย่างเพลย์ลิสต์ที่คลิกได้
การวิเคราะห์อารมณ์ขั้นสูง – การสร้างเพลย์ลิสต์อัจฉริยะพร้อมตัวเลือกการค้นหาแบบย้อนกลับ

ข้อกำหนดเบื้องต้น

API การอ่านใจเพลงของคุณเสร็จสมบูรณ์แล้วจาก ส่วนที่ 2
ติดตั้ง MongoDB, Node.js และ npm แล้ว
ข้อมูลรับรอง API ของ Spotify (Client ID และ Secret)
ใช้เวลาเขียนโค้ด 30–45 นาที

ในส่วนที่ 2 คุณได้สร้างบัญชีผู้ใช้พร้อมประวัติอารมณ์และการตั้งค่าอัจฉริยะแล้ว ตอนนี้เราจะทำให้มันเป็นโซเชียล! คุณจะได้เรียนรู้วิธีเชื่อมต่อผู้ใช้ แชร์เพลย์ลิสต์ทั้งแบบเรียลไทม์และต่อเนื่อง และดูว่าเพื่อนของคุณกำลังฟังเพลงอะไรอยู่โดยอิงจากอารมณ์ของพวกเขา

ทำความเข้าใจแนวคิดหลัก

ก่อนที่เราจะเจาะลึกโค้ด มาทำความเข้าใจสิ่งที่เรากำลังสร้างกันก่อน:

Socket.io – ไลบรารีที่ช่วยให้สามารถสื่อสารสองทางแบบเรียลไทม์ ระหว่างเซิร์ฟเวอร์และเบราว์เซอร์ของคุณ ลองนึกถึงการโทรศัพท์แทนการส่งข้อความ คุณสามารถส่งและรับข้อมูลได้ทันทีโดยไม่ต้องรีเฟรชหน้าเว็บ
Persistent Storage – การบันทึกข้อมูลลงในฐานข้อมูล MongoDB เพื่อให้ข้อมูลยังคงอยู่แม้ผู้ใช้จะออกจากระบบแล้ว เหมือนกับการบันทึกไฟล์ลงในฮาร์ดไดรฟ์ แทนที่จะเก็บไว้ในหน่วยความจำเพียงอย่างเดียว
ObjectId References – วิธีการของ MongoDB ในการสร้างความสัมพันธ์ระหว่างข้อมูล แทนที่จะคัดลอกข้อมูลของเพื่อนทั้งหมดลงในโปรไฟล์ของคุณ คุณเพียงแค่เก็บการอ้างอิง (เช่น ตัวชี้) ไปยังโปรไฟล์ของพวกเขา
Schemas – ลองนึกถึงสิ่งเหล่านี้เป็นเหมือนพิมพ์เขียวที่กำหนดโครงสร้างของข้อมูลของคุณ คำสั่งเหล่านี้จะแจ้งให้ MongoDB ทราบว่าเอกสารแต่ละฉบับควรมีฟิลด์ใด และควรใส่ข้อมูลประเภทใดในแต่ละฟิลด์

ขั้นตอนที่ 1: ติดตั้งการอ้างอิงที่จำเป็น

เปิดเทอร์มินัลในไดเร็กทอรีโครงการของคุณ และติดตั้ง Socket.io สำหรับฟีเจอร์แบบเรียลไทม์:

npm install socket.io

การทำงาน: คำสั่งนี้จะดาวน์โหลดและติดตั้งไลบรารี Socket.io ลงในโครงการของคุณ คำสั่ง npm install จะดึงแพ็กเกจจากรีจิสทรี npm (ไลบรารีโค้ด JavaScript ขนาดใหญ่) และเพิ่มลงในโฟลเดอร์ node_modules ของคุณ

ส่วน dependencies อื่นๆ (sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv) ควรได้รับการติดตั้งไว้แล้วจากส่วนที่ 2

ขั้นตอนที่ 2: อัปเดตโมเดลผู้ใช้ของคุณด้วยฟีเจอร์โซเชียล

เนื่องจากคุณได้สร้างโมเดลผู้ใช้ในส่วนที่ 2 ไว้แล้ว เราจึงจะอัปเดตเพื่อเพิ่มฟีเจอร์โซเชียล โมเดลผู้ใช้เป็นเหมือนเทมเพลตที่กำหนดข้อมูลที่เราจัดเก็บเกี่ยวกับผู้ใช้แต่ละคนในฐานข้อมูลของเรา

สิ่งที่เรากำลังเพิ่ม:

friends array – รายการการอ้างอิง ObjectId ไปยังผู้ใช้รายอื่น แทนที่จะเก็บข้อมูลผู้ใช้ทั้งหมด เราเพียงแค่จัดเก็บ ID ที่ชี้ไปยังเอกสารผู้ใช้อื่นในฐานข้อมูล
sharedWith และ isShared – ฟิลด์เหล่านี้จะติดตามรายการอารมณ์ที่ได้รับการแชร์และแชร์กับใคร
sharedPlaylistSchema – สคีมา (แบบแปลน) ใหม่ที่กำหนดว่าเพลย์ลิสต์ที่แชร์มีลักษณะอย่างไร: ใครแชร์ อารมณ์ใด เพลงใด และแชร์เมื่อใด
sharedPlaylists – รายการที่จัดเก็บเพลย์ลิสต์ทั้งหมดที่เพื่อนของคุณแชร์กับคุณ

แทนที่ models/User.js ของคุณด้วย:

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // รูปแบบสำหรับรายการอารมณ์ของแต่ละรายการ (ทุกครั้งที่ผู้ใช้สร้างเพลย์ลิสต์) const moodEntrySchema = new mongoose.Schema({ text: String, // สิ่งที่ผู้ใช้พิมพ์ (เช่น "รู้สึกมีความสุขวันนี้") ตรวจพบ Mood: String, // อารมณ์ที่ตัววิเคราะห์ของเราตรวจพบ (เช่น "มีความสุข") confidence: Number, // เรามั่นใจแค่ไหน (0-10) playlistGenerated: [{ // อาร์เรย์ของแทร็กที่เราแนะนำ trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } // null = ไม่ได้รับการจัดอันดับ, true = liked, false = disliked }], 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: { ชนิด: ตัวเลข, ค่าเริ่มต้น: 0 }, favoriteTime: สตริง, mostCommonMood: สตริง, joinDate: { ชนิด: วันที่, ค่าเริ่มต้น: Date.now } } }, { แสตมป์เวลา: true }); // เพิ่มฟิลด์ createdAt และ updatedAt โดยอัตโนมัติ // มิดเดิลแวร์: เรียกใช้ฟังก์ชันนี้ก่อนบันทึกผู้ใช้ (เพื่อแฮชรหัสผ่านของพวกเขา) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // แฮชเฉพาะเมื่อเปลี่ยนรหัสผ่าน this.password = await bcrypt.hash(this.password, 12); // แฮชด้วย 12 รอบของ salt 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 (สตริง) วิธีนี้เรียกว่าการดีนอร์มอลไลเซชัน – เก็บข้อมูลเดียวกันไว้ในหลายที่เพื่อประสิทธิภาพ เราจัดเก็บชื่อผู้ใช้ไว้เพื่อไม่ต้องค้นหาผู้ใช้ทุกครั้งที่แสดงเพลย์ลิสต์ที่แชร์
มิดเดิลแวร์ (.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); /* เอฟเฟกต์เบลอสำหรับ glassmorphism */ 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="Email"/> <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 Grid เพื่อสร้างคอลัมน์สองคอลัมน์ (2fr สำหรับเพลย์ลิสต์ และ 1fr สำหรับเพื่อน) ซึ่งหมายความว่าส่วนเพลย์ลิสต์มีความกว้างเป็นสองเท่า
ตัวจัดการเหตุการณ์: onclick="functionName()" สั่งให้เบราว์เซอร์เรียกใช้ฟังก์ชัน JavaScript เมื่อคลิกองค์ประกอบ
ID: องค์ประกอบมี ID เฉพาะ (เช่น id="friendsList") เพื่อให้ JavaScript ของเราค้นหาและแก้ไขได้ในภายหลัง

ขั้นตอนที่ 4: อัปเดต server.js ด้วย Socket.io, Friend Endpoints และการแชร์แบบต่อเนื่อง

ตอนนี้เราจะอัปเดตเซิร์ฟเวอร์เพื่อจัดการคำขอเป็นเพื่อน การแชร์เพลย์ลิสต์ และการสื่อสารแบบเรียลไทม์ เซิร์ฟเวอร์เปรียบเสมือน "สมอง" ของแอปของคุณ โดยทำหน้าที่ประมวลผลคำขอ สื่อสารกับฐานข้อมูล และส่งคำตอบกลับไปยังผู้ใช้

สิ่งที่เรากำลังเพิ่มเข้าไปในเซิร์ฟเวอร์:

เซิร์ฟเวอร์ Socket.io – ช่วยให้สามารถสื่อสารแบบเรียลไทม์แบบสองทางระหว่างเซิร์ฟเวอร์และไคลเอนต์
/api/add-friend endpoint – จัดการคำขอเป็นเพื่อน (มิตรภาพร่วมกัน)
/api/shared-playlists endpoint – ส่งคืนเพลย์ลิสต์ที่เพื่อนๆ แชร์กับคุณ
/api/personalized-playlist ที่ได้รับการปรับปรุง – ตอนนี้สามารถบันทึกเพลย์ลิสต์ที่แชร์ไปยังฐานข้อมูลของเพื่อนๆ ได้
ตัวจัดการเหตุการณ์ Socket – คอยฟังและปล่อยกิจกรรมแบบเรียลไทม์ (การตรวจสอบสิทธิ์ การแชร์)

แทนที่ server.js ของคุณด้วย:

// โหลดตัวแปรสภาพแวดล้อมจากไฟล์ .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 connectDB() { ลอง { console.log('🔗 กำลังเชื่อมต่อกับ MongoDB…'); รอ 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 }) => { // เก็บ ID ซ็อกเก็ตของผู้ใช้นี้เพื่อให้เราสามารถส่งข้อความถึงพวกเขาในภายหลัง connectedUsers.set(userId, socket.id); socket.userId = userId; // แนบ userId เข้ากับซ็อกเก็ตนี้ socket.username = username; // แนบ username เข้ากับซ็อกเก็ตนี้ console.log(`✅ ผู้ใช้ที่ผ่านการรับรอง: ${username}`); }); // จัดการเหตุการณ์ 'share_playlist' - ผู้ใช้ต้องการแชร์กับเพื่อน socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { ลอง { // วนซ้ำผ่าน ID เพื่อนทั้งหมดสำหรับ (let friendId ของ 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()); // ให้บริการไฟล์คงที่จากโฟลเดอร์ 'สาธารณะ' (HTML, CSS, รูปภาพ) app.use(express.static(path.join(__dirname, 'public'))); // ===== จุดสิ้นสุดของ API ===== // POST /api/register - สร้างบัญชีผู้ใช้ใหม่ app.post('/api/register', async (req, res) => { ลอง { const { username, email, password } = req.body; // ตรวจสอบอินพุต ถ้า!ชื่อผู้ใช้ || !อีเมล || !รหัสผ่าน) { กลับ res.status(400).json({ error: 'All fields are required' }); } ถ้า (password.length < 6) { กลับ res.status(400).json({ error: 'รหัสผ่านต้องมีอย่างน้อย 6 ตัวอักษร' }); } // ตรวจสอบว่าชื่อผู้ใช้หรืออีเมลมีอยู่แล้วหรือไม่ const exists = await User.findOne({ $or: [{ username }, { email }] }); ถ้ามีอยู่ { กลับ 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) => { ลอง { 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 }, // เพย์โหลด (สิ่งที่เรากำลังเข้ารหัส) process.env.JWT_SECRET, // คีย์ความลับ (เก็บไว้ให้ปลอดภัย) { หมดอายุภายใน: '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) => { ลอง { // อัปเดตสถิติผู้ใช้ req.user.updateStats(); รอ req.user.save(); // เติมข้อมูลในอาร์เรย์ของเพื่อน (แทนที่ ObjectId ด้วยวัตถุผู้ใช้จริง) รอ 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({ ข้อผิดพลาด: 'ไม่สามารถโหลดโปรไฟล์ได้' }); } }); // 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) // เรียงลำดับจากมากไปน้อยตามค่า timestamp .slice(0, 10); // เลือก 10 รายการแรก res.json({ sharedPlaylists }); } catch (err) { console.error('Shared playlists error:', err); res.status(500).json({ error: 'Failed to load shared playlists' }); } }); // POST /api/add-friend - เพิ่มเพื่อน (มิตรภาพร่วมกัน) app.post('/api/add-friend', auth, async (req, res) => { ลอง { const { friendUsername } = req.body; // ค้นหาเพื่อนด้วยชื่อผู้ใช้ const friend = await User.findOne({ username: friendUsername }); ถ้า!friend { กลับ res.status(404).json({ error: 'User not found' }); } // ตรวจสอบว่ามีเพื่อนอยู่แล้วหรือไม่ ถ้า (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { กลับ res.status(400).json({ error: 'Already friends with this user' }); } // เพิ่มผู้ใช้แต่ละคนไปยังรายชื่อเพื่อนของอีกฝ่าย (มิตรภาพร่วมกัน) req.user.friends.push(friend._id); friend.friends.push(req.user._id); // บันทึกผู้ใช้ทั้งสองราย รอ req.user.save(); รอ friend.save(); res.json({ message: 'เพิ่มเพื่อนสำเร็จ', friendId: friend._id }); } catch (err) { console.error('เพิ่มเพื่อน error:', err); console.error('Error stack:', err.stack); res.status(500).json({ error: 'ไม่สามารถเพิ่มเพื่อนได้' }); } }); // POST /api/personalized-playlist - สร้างเพลย์ลิสต์ตามอารมณ์ app.post('/api/personalized-playlist', auth, async (req, res) => { ลอง { const { text, shareWithFriends = false, playlistSize = 15 } = req.body; if (!text) { return res.status(400).json({ error: 'Please tell me how you are feeling!' }); } // 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 ของพวกเขาสำหรับ (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: 'ข้อผิดพลาดภายในเซิร์ฟเวอร์', รายละเอียด: err.message }); }); // เริ่มต้นเซิร์ฟเวอร์ server.listen(PORT, () => { console.log(`🚀 เซิร์ฟเวอร์ทำงานอยู่บน http://localhost:${PORT}`); });

อธิบายแนวคิดหลักของเซิร์ฟเวอร์:

มิดเดิลแวร์ – ฟังก์ชันที่ประมวลผลคำขอต่างๆ ก่อนที่จะเข้าถึงตัวจัดการเส้นทางของคุณ express.json() แยกวิเคราะห์ JSON จากเนื้อหาคำขอ auth ตรวจสอบโทเค็น JWT
async/await – ไวยากรณ์ JavaScript ที่ทันสมัยสำหรับการจัดการการดำเนินการแบบอะซิงโครนัส (เช่น การค้นหาฐานข้อมูล) wait หยุดการทำงานชั่วคราวจนกว่า Promise จะได้รับการแก้ไข
รหัสสถานะ HTTP – ตัวเลขที่แสดงผลลัพธ์: 200 = สำเร็จ, 201 = สร้างแล้ว, 400 = คำขอไม่ถูกต้อง, 401 = ไม่ได้รับอนุญาต, 404 = ไม่พบ, 500 = ข้อผิดพลาดของเซิร์ฟเวอร์
Socket.io Events – ข้อความที่ตั้งชื่อแล้วซึ่งส่งไปมาระหว่างไคลเอนต์และเซิร์ฟเวอร์ socket.on() คอยฟังเหตุการณ์ socket.emit() ส่งเหตุการณ์
JWT (JSON Web Token) – วิธีที่ปลอดภัยในการระบุตัวตนผู้ใช้ เมื่อผู้ใช้เข้าสู่ระบบ เราจะมอบโทเค็นให้กับพวกเขา พวกเขาส่งโทเค็นนี้ไปพร้อมกับคำขอแต่ละครั้งเพื่อพิสูจน์ว่าพวกเขาเป็นใคร

ขั้นตอนที่ 5: อัปเดต JavaScript ของ Frontend (public/js/app.js)

สุดท้ายนี้ มาเพิ่ม JavaScript ที่ทำให้ Frontend ของเราโต้ตอบได้ โค้ดนี้ทำงานในเบราว์เซอร์ของผู้ใช้และจัดการสิ่งต่างๆ เช่น การคลิกปุ่ม คำขอ API และการอัปเดตแบบเรียลไทม์

สิ่งที่ JavaScript นี้ทำ:

จัดการการตรวจสอบสิทธิ์ – เข้าสู่ระบบ ลงทะเบียน ออกจากระบบ และจัดเก็บโทเค็น
เริ่มต้น Socket.io – เชื่อมต่อกับเซิร์ฟเวอร์และรับฟังเหตุการณ์แบบเรียลไทม์
สร้างคำขอ API – ใช้ fetch() เพื่อสื่อสารกับจุดสิ้นสุดของเซิร์ฟเวอร์
อัปเดต UI – สร้างองค์ประกอบ HTML แบบไดนามิกตามข้อมูลจากเซิร์ฟเวอร์
จัดการการโต้ตอบของผู้ใช้ – การคลิกปุ่ม การส่งแบบฟอร์ม ฯลฯ

แทนที่ public/js/app.js ของคุณด้วยโค้ดทั้งหมดที่แสดงในบทช่วยสอน...

(The บล็อกโค้ดของ app.js ทำงานได้เหมือนเดิมทุกประการ โดยมีฟังก์ชันทั้งหมดสำหรับการเข้าสู่ระบบ การลงทะเบียน การโหลดเพลย์ลิสต์ที่แชร์ ฯลฯ)

ขั้นตอนที่ 6: ทดสอบ Social Music 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 เลือก "แชร์กับเพื่อน" แล้วคลิก "สร้างเพลย์ลิสต์"
ส่วนหน้า ส่งคำขอ POST ไปยัง /api/personalized-playlist ด้วย shareWithFriends: true
เซิร์ฟเวอร์ วิเคราะห์อารมณ์ของ Alice และสร้างเพลย์ลิสต์โดยใช้ Spotify API
เซิร์ฟเวอร์ บันทึกเพลย์ลิสต์ลงในอาร์เรย์ moodHistory ของ Alice
เซิร์ฟเวอร์ วนซ้ำผ่านเพื่อนของ Alice (รวมถึง Bob) และเพิ่มเพลย์ลิสต์ลงในอาร์เรย์ sharedPlaylists ของเพื่อนแต่ละคนใน MongoDB
ส่วนหน้า ปล่อย เหตุการณ์ share_playlist Socket.io เพื่อแจ้งเตือนเพื่อนออนไลน์
เซิร์ฟเวอร์ รับเหตุการณ์และตรวจสอบว่า Bob ออนไลน์อยู่หรือไม่ (ดูในแผนที่ connectedUsers)
ถ้า Bob ออนไลน์อยู่ เซิร์ฟเวอร์จะส่งเหตุการณ์ friend_shared_playlist ให้กับ Bob พร้อมกับการแสดงตัวอย่างเพลย์ลิสต์
เบราว์เซอร์ของ Bob รับเหตุการณ์และเรียก showNotification() เพื่อแสดงป๊อปอัป
เบราว์เซอร์ของ Bob ยังเรียก loadSharedPlaylists() เพื่อรีเฟรชฟีดกิจกรรม
ถ้า Bob ออฟไลน์ เขาจะเห็นเพลย์ลิสต์ในฟีดกิจกรรมของเขาเมื่อเขาเข้าสู่ระบบในครั้งต่อไป (เพราะเพลย์ลิสต์นั้นถูกบันทึกไว้ในอาร์เรย์ sharedPlaylists ของเขา)

สิ่งที่คุณได้ สร้าง

ยินดีด้วย! คุณสร้างแอปโซเชียลเพลงแบบเต็มรูปแบบสำเร็จแล้ว! นี่คือสิ่งที่คุณทำสำเร็จ:

🤝 ระบบเพื่อน – ผู้ใช้สามารถเพิ่มเพื่อนโดยใช้ชื่อผู้ใช้ได้ มิตรภาพจะเกิดขึ้นร่วมกัน (ผู้ใช้ทั้งสองจะกลายเป็นเพื่อนกัน) และจัดเก็บเป็นข้อมูลอ้างอิง ObjectId ใน MongoDB
💾 การแชร์เพลย์ลิสต์แบบต่อเนื่อง – เพลย์ลิสต์ที่แชร์จะถูกบันทึกลงในฐานข้อมูลในอาร์เรย์ sharedPlaylists ของเพื่อนแต่ละคน ซึ่งหมายความว่าข้อมูลจะยังคงอยู่แม้หลังจากผู้ใช้ออกจากระบบแล้ว
📡 การแจ้งเตือนแบบเรียลไทม์ – ด้วยการใช้ Socket.io ผู้ใช้ออนไลน์จะได้รับการแจ้งเตือนทันทีเมื่อเพื่อนแชร์เพลย์ลิสต์ ไม่จำเป็นต้องรีเฟรชหน้า!
📰 ฟีดกิจกรรม – ผู้ใช้สามารถดูเพลย์ลิสต์ที่แชร์ล่าสุดจากเพื่อนทุกคน โดยเรียงลำดับจากใหม่สุดก่อน การคลิกที่เพลย์ลิสต์จะแสดงรายการเพลงทั้งหมด
🔐 การตรวจสอบสิทธิ์ที่ปลอดภัย – รหัสผ่านจะถูกเข้ารหัสด้วย bcrypt (จะไม่ถูกจัดเก็บเป็นข้อความธรรมดา) และโทเค็น JWT จะถูกใช้เพื่อยืนยันคำขอ API
⏱️ ใช้งานได้แบบออฟไลน์ – เพื่อนๆ สามารถดูเพลย์ลิสต์ที่แชร์ได้แม้ว่าจะไม่ได้ออนไลน์อยู่ขณะที่เพลย์ลิสต์ถูกแชร์ก็ตาม ทุกอย่างถูกบันทึกไว้ในฐานข้อมูล!

แนวคิดหลักที่คุณได้เรียนรู้

การสื่อสารแบบเรียลไทม์ กับ Socket.io (WebSockets)
ความสัมพันธ์ของฐานข้อมูล โดยใช้การอ้างอิง MongoDB ObjectId
การดีนอร์มอลไลเซชัน เพื่อประสิทธิภาพ (จัดเก็บทั้ง ObjectId และชื่อผู้ใช้)
การออกแบบ RESTful API (จุดสิ้นสุด GET, POST พร้อมรหัสสถานะ HTTP ที่เหมาะสม)
รูปแบบมิดเดิลแวร์ สำหรับการตรวจสอบสิทธิ์และการประมวลผลคำขอ
อะซิงโครนัส/รอ สำหรับการจัดการการดำเนินการแบบอะซิงโครนัส
การจัดการ DOM เพื่ออัปเดต UI แบบไดนามิก
สถาปัตยกรรมตามเหตุการณ์ ด้วยเหตุการณ์ Socket.io

การแก้ไขปัญหาทั่วไป ปัญหา

"ไม่สามารถเชื่อมต่อกับ MongoDB ได้" – ตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์ MongoDB ของคุณกำลังทำงานอยู่ และ MONGODB_URI ใน .env ของคุณถูกต้อง
"ข้อมูลประจำตัวไม่ถูกต้อง" เมื่อเข้าสู่ระบบ – ตรวจสอบชื่อผู้ใช้และรหัสผ่านของคุณอีกครั้ง โปรดจำไว้ว่าต้องพิมพ์ให้ตรงตามตัวพิมพ์ใหญ่-เล็ก!
"ไม่พบผู้ใช้" เมื่อเพิ่มเพื่อน – ตรวจสอบให้แน่ใจว่าคุณพิมพ์ชื่อผู้ใช้ที่ถูกต้อง (ต้องพิมพ์ให้ตรงตามตัวพิมพ์ใหญ่-เล็ก) ชื่อผู้ใช้ต้องลงทะเบียนก่อน
เพลย์ลิสต์ที่แชร์ไม่ปรากฏขึ้น – ตรวจสอบคอนโซลของเบราว์เซอร์ (F12) เพื่อหาข้อผิดพลาด ตรวจสอบให้แน่ใจว่าผู้ใช้ทั้งสองเป็นเพื่อนกัน และได้ทำเครื่องหมายในช่อง "แชร์กับเพื่อน" ไว้
การแจ้งเตือนแบบเรียลไทม์ไม่ทำงาน – ตรวจสอบให้แน่ใจว่า Socket.io เชื่อมต่ออยู่ ตรวจสอบคอนโซลเบราว์เซอร์สำหรับ "🔗 เชื่อมต่อกับเซิร์ฟเวอร์แล้ว"

ขั้นตอนต่อไปและแนวคิดในการขยาย

ตอนนี้คุณมีแอปเพลงโซเชียลที่ใช้งานได้จริงแล้ว ต่อไปนี้คือแนวคิดบางประการที่จะช่วยให้คุณพัฒนาแอปต่อไปได้:

คำขอเป็นเพื่อน – แทนที่จะสร้างมิตรภาพแบบทันที ให้ผู้ใช้ส่งคำขอที่สามารถตอบรับหรือปฏิเสธได้
การส่งข้อความส่วนตัว – เพิ่มระบบแชทโดยใช้ Socket.io เพื่อให้เพื่อนสามารถส่งข้อความถึงกันได้
ความคิดเห็นในเพลย์ลิสต์ – ให้ผู้ใช้แสดงความคิดเห็นในเพลย์ลิสต์ที่แชร์
ชอบ/ไม่ชอบแทร็ก – เพิ่มปุ่มชอบ/ไม่ชอบให้กับแต่ละแทร็กในเพลย์ลิสต์
ความเข้ากันได้ของรสนิยมเพลง – คำนวณเปอร์เซ็นต์จากความคล้ายคลึงกันของความชอบทางดนตรีของผู้ใช้สองคน
ค้นหาผู้ใช้ – เพิ่มฟีเจอร์การค้นหาเพื่อค้นหาผู้ใช้ตามชื่อผู้ใช้
ลบ/เลิกเป็นเพื่อน – เพิ่มความสามารถในการลบเพื่อนหรือลบเพลย์ลิสต์ที่แชร์
หน้าโปรไฟล์ – แสดงสถิติผู้ใช้ อารมณ์โปรด และเพลย์ลิสต์ล่าสุด
เพลย์ลิสต์สำหรับการทำงานร่วมกัน – ให้เพื่อนหลายคนเพิ่มแทร็กลงในเพลย์ลิสต์ที่แชร์ได้
ประวัติเพลย์ลิสต์ – ดูเพลย์ลิสต์ทั้งหมดที่คุณสร้างไว้ก่อนหน้านี้

คุณได้สร้างแอปเพลงโซเชียลแบบเต็มรูปแบบพร้อมฟีเจอร์แบบเรียลไทม์และพื้นที่จัดเก็บข้อมูลที่ต่อเนื่อง! นี่คือรากฐานที่มั่นคงสำหรับการทำความเข้าใจการพัฒนาเว็บสมัยใหม่ ทดลองและสร้างต่อไป! 🎵✨