کدنویسی بوسیله MERN Stack و همچنین WEBRTC و SocketIO

ایجاد برنامه چت ویدئویی پشته MERN با قابلیت تماس گروه ویدئو

عنوان اصلی : Discord Clone - Learn MERN Stack with WebRTC and SocketIO

سرفصل های دوره :

مقدمه:
معرفی پشته فناوری
آماده سازی سرور و امکان احراز هویت:
آماده شدن برای اتصال با پایگاه داده
اتصال با پایگاه داده از سرور ما و آزمایش اتصال
ایجاد ساختار پوشه و مسیرهای احراز هویت
تست مسیرها با پستچی
انتقال کنترلرها به پوشه کنترلرها
افزودن اعتبارسنجی درخواست با Joi
تست اعتبارسنجی مسیر با Postman
اطلاعات بیشتر درباره Joi
ایجاد مدل کاربر
ایجاد قابلیت ثبت
مسیر ثبت نام آزمایشی
ایجاد قابلیت ورود به سیستم
آزمایش عملکرد ورود به سیستم
ایجاد توکن JWT
آزمایش اینکه آیا رمز توسط سرور برگردانده شده است یا خیر
ایجاد میان افزار برای بررسی اینکه آیا توکن معتبر است و منقضی نشده است
تلاش برای دسترسی به مسیر محافظت شده
کد کامل - پایان ماژول
ایجاد پروژه React با قابلیت ورود و ثبت نام:
معرفی ماژول
راه اندازی React Application با Redux
نصب وابستگی های لازم
راه اندازی React App و حذف فایل های غیر ضروری
پیکربندی فروشگاه Redux
افزودن مسیریابی به برنامه
ایجاد مؤلفه جعبه احراز هویت با MaterialUI
اطلاعات بیشتر در مورد MaterialUi و ایجاد سربرگ صفحه ورود به سیستم
ایجاد جزء ورودی سفارشی
ایجاد دکمه سفارشی
ایجاد مولفه تغییر مسیر
ایجاد پیام راهنمای ابزار روی ماوس
الگوی بیان منظم
ایجاد اعتبارسنجی سفارشی
ایجاد صفحه ثبت نام
آماده شدن برای اتصال با سرور ما (API)
آماده سازی اقدامات احراز هویت
اعمال اقدامات از React Components
آزمایش اقدامات ورود و ثبت نام و توضیح جریان redux
ایجاد هشدار سفارشی
آماده سازی فروشگاه برای پیام های هشدار
نمایش پیام های سرور
افزودن توکن JWT به درخواست‌ها
رفع سریع هدرهای Axios
کد کامل - پایان ماژول
ایجاد رابط کاربری داشبورد در React:
معرفی ماژول - رابط کاربری داشبورد
ایجاد ساختار داشبورد
ایجاد دکمه صفحه اصلی
افزودن دکمه دوست
نوار کناری
رابط کاربر - افزودن گفتگوی دوست
دکمه های گفتگو
تهیه لیست دوستان
نشانگر آنلاین
ایجاد فهرست دعوت های ساختگی
فهرست دعوت - دکمه‌های تصمیم
منوی کشویی با عملکرد خروج
بررسی وجود نشانه در صفحه داشبورد
کد کامل - پایان ماژول
سیستم دعوت دوست و اتصال بیدرنگ SocketIO:
معرفی ماژول
اتصال SocketIO به سرور ما
اتصال به سرور SocketIO از سمت مشتری
افزودن توکن JWT به رویداد ارسال شده به سرور
اعتبار سنجی توکن های JWT در سمت سرور
فروشگاه سرور - ذخیره اطلاعات مربوط به کاربران متصل
فروشگاه سرور آزمایشی
ایجاد کنترل کننده قطع ارتباط
Redux - آماده سازی اقدامات و کاهش دهنده ها برای منطق دوستان
آماده سازی اقدام برای ارسال دعوت نامه برای دوست
در حال اتصال ارسال دعوت دوست اقدام به گفتگو
ایجاد مسیرهای سرور - دعوت نامه های دوستان
ایجاد مدل دعوت دوست
اعتبار سنجی دعوت نامه دوست سفارشی
تست دعوتنامه های دوستان اعتبارسنجی سفارشی
اعتبار سنجی سفارشی بیشتر مرتبط با دعوت نامه های دوستان
ذخیره دعوتنامه دوست در پایگاه داده
آزمایش دعوت نامه های دوستان
آماده‌سازی شنوندگان رویداد SocketIO Client برای دعوت‌نامه‌های بیدرنگ دوستان
در حال آماده شدن در سرور دعوتنامه های دوست در انتظار
ارسال رویدادها به مشتریان شناسه خاص
آزمایش به‌روزرسانی‌های واقعی دعوت‌نامه‌های دوستان
رفع اشکالات و آزمایش مجدد
در حال ارائه لیست دعوتنامه های معلق واقعی
رفع اشکال با ارائه دعوتنامه های معلق
به‌روزرسانی اولیه دعوت‌نامه‌های معلق
آزمایش دعوتنامه های اولیه
آماده سازی سمت مشتری برای پذیرش یا رد دعوت دوست
آماده سازی کنترل کننده های تصمیم
ایجاد منطق رد دعوت
آزمایش رد دعوت دوست
منطق پذیرش دعوت دوست
تست پذیرش دعوت نامه دوست
آماده سازی سمت مشتری برای به روز رسانی های دوستان
ایجاد منطق سرور برای به‌روزرسانی‌های دوستان واقعی
آزمایش به‌روزرسانی‌های دوستان
اتصال نشانگر کاربر آنلاین
نشانگر آنلاین در React Side
کد کامل - پایان ماژول
ایجاد سیستم چت بیدرنگ با SocketIO و MongoDB:
معرفی ماژول
آماده سازی فروشگاه Redux برای عملکرد چت
انتخاب مکالمه فعال
ایجاد برچسب چت
ایجاد رابط کاربری مسنجر
ایجاد کانتینر پیام ها
ایجاد سرصفحه پیام
ارائه پیام های تکی
ایجاد ورودی پیام جدید
تثبیت عرض ورودی
انتشار رویداد با پیام مستقیم
ایجاد هندلر برای رویداد پیام مستقیم
تست کنترل کننده پیام مستقیم
آماده سازی به روز رسانی های چت بیدرنگ
افزودن به‌روزرسانی اولیه چت
آزمایش به‌روزرسانی‌های چت واقعی
به‌روزرسانی پیام‌های فروشگاه
رفع اشکال با وضعیت فروشگاه پیام ها
ارائه پیام واقعیس
اشکال‌زدایی نام کاربری نویسنده
رفع اشکال با به‌روزرسانی اولین پیام
ایجاد جداکننده تاریخ
کد کامل - پایان ماژول
WebRTC - مقدمه تئوری (اختیاری):
WebRTC چیست؟
WebRTC چگونه کار می کند؟
سرور STUN چیست؟
TURN Server چیست؟
SDP چیست؟
کاندیداهای ICE چیست؟
چگونه ارتباط بین Peers برقرار کنیم؟
ایجاد اتاق تماس گروهی ویدیویی:
معرفی ماژول
در حال آماده سازی وضعیت فروشگاه
ایجاد دکمه اتاق
تغییر وضعیت اگر کاربر در اتاق باشد
ایجاد مولفه اتاق اصلی
افزودن قابلیت تغییر اندازه به اتاق
ایجاد ساختار گفتگوی اتاق
ایجاد دکمه‌های اتاق
ایجاد اتاق در سمت سرور
اتاق آزمایش ایجاد رویدادها
پخش اتاق های فعال برای همه کاربران آنلاین
ذخیره اتاق‌های فعال در فروشگاه
رفع اشکال با تنظیم اتاق‌های فعال
پردازش اتاق‌های فعال
پیوستن به Active Room در سمت سرور
آزمایش عملکرد اتاق پیوستن
رفع اشکالات و آزمایش مجدد
ایجاد عملکرد اتاق خروج
آزمایش عملکرد اتاق خروج
مدیریت خروج از اتاق در رویداد Disconnect
به‌روزرسانی اولیه Active Rooms
دریافت پیش‌نمایش جریان محلی
ایجاد پیش نمایش ویدیوی محلی
دریافت پیش‌نمایش محلی هنگام پیوستن به اتاق
افزودن فقط عملکرد صوتی
رفع اشکال فقط با صدا
توقف همه مسیرها هنگام خروج از اتاق
نظریه معماری مش
نصب بسته Simple Peer
رویدادهای مرتبط با اتصال
آماده شدن برای اتصال WebRTC ورودی
آماده سازی شیء اتصال همتا
در حال انتشار رویداد برای راه اندازی اتصال
آزمایش ایجاد اشیاء اتصال همتا
تبادل داده های سیگنالینگ
تست تبادل داده سیگنالینگ
رفع اشکال ساده و آزمایش اتصال RTC
ارائه جریان های راه دور
بستن اتصال RTC و حذف جریان های راه دور
رفع اشکال زمانی که آخرین کاربر اتاق را ترک می کند
اتصال منطق به دکمه ویدیو
اتصال منطق به دکمه نادیده گرفتن
آماده سازی منطق برای اشتراک گذاری صفحه
تغییر آهنگ های ویدئویی خروجی در اتصالات همتا فعال
رفع خاموش کردن اشتراک‌گذاری صفحه
نمایش پیش‌نمایش اشتراک‌گذاری صفحه
توقف همه آهنگ‌ها هنگام خروج کاربر از اتاق
پنهان کردن دکمه ها بستگی به فعال بودن Audio Only دارد
امکان دادن به مالک اتاق برای پیوستن مجدد به اتاقی که او ایجاد کرده است
پایان ماژول - کد کامل