آموزش Discord Clone - MERN Stack را با WebRTC و SocketIO بیاموزید

Discord Clone - Learn MERN Stack with WebRTC and SocketIO

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: ایجاد برنامه چت ویدیویی MERN Stack با قابلیت تماس گروهی ویدیویی نحوه ایجاد برنامه MERN Stack نحوه ایجاد عملکرد چت ویدیویی نحوه ایجاد سیستم ارتباطی بیدرنگ ورود/ثبت نام فرآیند اتصال و ذخیره داده در پایگاه داده ایجاد اتاق های تماس گروهی ویدیویی اتصال ReactJS با NodeJS, Express و MongoDB کل پروژه را از ابتدا پیش نیازها:جاوا اسکریپت React Node می سازد

با نحوه اتصال MERN Stack با WebRTC و SocketIO آشنا شوید. ما تمام مراحل را برای ایجاد برنامه با قابلیت تماس گروهی طی خواهیم کرد. ما پیاده سازی WebRTC را ایجاد خواهیم کرد تا نشان دهیم چگونه می توانید برنامه WebRTC را به لطف ساده همتا توسعه دهید. ما از SocketIO به عنوان سرور سیگنالینگ برای برنامه خود و برای ارتباط بیدرنگ استفاده خواهیم کرد. پس از این دوره شما قادر خواهید بود اپلیکیشنی را بسازید که با استفاده از WebRTC خواهد بود. فرقی نمی کند که این بازی ارتباطی بیدرنگ باشد یا چت ویدیویی. شما فرآیند برقراری ارتباط بین همتایان (کاربران) را خواهید دانست.

ما MERN Stack را که مخفف عبارت‌های: MongoDB، Express، React، Node با WebRTC و SocketIO برای امکان ارتباط بی‌درنگ ترکیب می‌کنیم.


br>در این دوره ما پروژه را از ابتدا می سازیم و تمام مراحل را با هم طی می کنیم. عملکردی که ایجاد خواهیم کرد این خواهد بود:
ورود/ثبت نام (احراز هویت با توکن JWT)
سیستم دعوت دوستان/دوستان
قابلیت چت بیدرنگ (SocketIO و MongoDB)
ایجاد اتاق تماس گروهی ویدیویی

شرایط دوره:
دانش اولیه در مورد React
مبانی در مورد Node
برای داشتن اطلاعاتی در مورد وب سوکت ها (SocketIO) عالی است. لازم نیست، اما قطعا درک بخشی از عملکرد چت و چت ویدیویی آسان تر خواهد بود.

این دوره برای یادگیری هر فناوری از ابتدا طراحی نشده است، بلکه چگونه می توانیم آنها را به یکدیگر متصل کنیم. اگر چه در ضمن ایجاد کد برنامه گام به گام توضیح داده خواهد شد.


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

معرفی Introduction

معرفی Introduction

  • ارائه برنامه Application Presentation

  • ارائه برنامه Application Presentation

  • معرفی پشته فناوری Technology Stack Introduction

  • معرفی پشته فناوری Technology Stack Introduction

آماده سازی سرور و امکان احراز هویت Preparing server and authentication possibility

آماده سازی سرور و امکان احراز هویت Preparing server and authentication possibility

  • معرفی Introduction

  • معرفی Introduction

  • نصب Node.js Node.js installation

  • نصب Node.js Node.js installation

  • ایجاد ساختار پروژه و مقداردهی اولیه یک پروژه Creating project structure and initializing a Project

  • ایجاد ساختار پروژه و مقداردهی اولیه یک پروژه Creating project structure and initializing a Project

  • نصب بسته های لازم با NPM Installing necessary packages with NPM

  • نصب بسته های لازم با NPM Installing necessary packages with NPM

  • ایجاد سرور اکسپرس Creating Express Server

  • ایجاد سرور اکسپرس Creating Express Server

  • Nodemon - اضافه کردن اسکریپت به راه اندازی مجدد خودکار سرور پس از تغییرات Nodemon - adding script to automatically restart server after changes

  • Nodemon - اضافه کردن اسکریپت به راه اندازی مجدد خودکار سرور پس از تغییرات Nodemon - adding script to automatically restart server after changes

  • ایجاد پایگاه داده MongoDB در فضای ابری Creating MongoDB Database in Cloud

  • ایجاد پایگاه داده MongoDB در فضای ابری Creating MongoDB Database in Cloud

  • آماده شدن برای ارتباط با پایگاه داده Preparing for connection with database

  • آماده شدن برای ارتباط با پایگاه داده Preparing for connection with database

  • اتصال با پایگاه داده از سرور ما و آزمایش اتصال Connecting with database from our server and testing connection

  • اتصال با پایگاه داده از سرور ما و آزمایش اتصال Connecting with database from our server and testing connection

  • ایجاد ساختار پوشه و مسیرهای احراز هویت Creating folder structure and authentication routes

  • ایجاد ساختار پوشه و مسیرهای احراز هویت Creating folder structure and authentication routes

  • تست مسیرها با پستچی Testing routes with Postman

  • تست مسیرها با پستچی Testing routes with Postman

  • انتقال کنترلرها به پوشه کنترلرها Moving handlers to controllers folder

  • انتقال کنترلرها به پوشه کنترلرها Moving handlers to controllers folder

  • افزودن اعتبار درخواست با Joi Adding request validation with Joi

  • افزودن اعتبار درخواست با Joi Adding request validation with Joi

  • تست اعتبارسنجی مسیر با Postman Testing Route validations with Postman

  • تست اعتبارسنجی مسیر با Postman Testing Route validations with Postman

  • اطلاعات بیشتر درباره Joi More about Joi

  • اطلاعات بیشتر درباره Joi More about Joi

  • ایجاد مدل کاربر Creating User Model

  • ایجاد مدل کاربر Creating User Model

  • ایجاد قابلیت ثبت نام Creating Register functionality

  • ایجاد قابلیت ثبت نام Creating Register functionality

  • تست مسیر ثبت نام Testing Registration Route

  • تست مسیر ثبت نام Testing Registration Route

  • ایجاد قابلیت ورود Creating Login functionality

  • ایجاد قابلیت ورود Creating Login functionality

  • تست عملکرد ورود به سیستم Testing login functionality

  • تست عملکرد ورود به سیستم Testing login functionality

  • ایجاد توکن JWT Creating JWT Token

  • ایجاد توکن JWT Creating JWT Token

  • آزمایش اینکه آیا رمز توسط سرور برگردانده می شود Testing if token is being returned by server

  • آزمایش اینکه آیا رمز توسط سرور برگردانده می شود Testing if token is being returned by server

  • ایجاد میان افزار برای بررسی اینکه آیا توکن معتبر است و منقضی نشده است Creating middleware to check if token is valid and not expired

  • ایجاد میان افزار برای بررسی اینکه آیا توکن معتبر است و منقضی نشده است Creating middleware to check if token is valid and not expired

  • تلاش برای دسترسی به مسیر محافظت شده Trying to access protected route

  • تلاش برای دسترسی به مسیر محافظت شده Trying to access protected route

  • کد کامل - پایان ماژول Complete code - End of the Module

  • کد کامل - پایان ماژول Complete code - End of the Module

ایجاد React Project با قابلیت ورود و ثبت نام Creating React Project with Login and Register Functionality

ایجاد React Project با قابلیت ورود و ثبت نام Creating React Project with Login and Register Functionality

  • معرفی ماژول Module introduction

  • معرفی ماژول Module introduction

  • راه اندازی React Application با Redux Initializing React Application with Redux

  • راه اندازی React Application با Redux Initializing React Application with Redux

  • نصب وابستگی های لازم Installing necessary dependencies

  • نصب وابستگی های لازم Installing necessary dependencies

  • راه اندازی React App و حذف فایل های غیر ضروری Starting React App and removing unnecessary files

  • راه اندازی React App و حذف فایل های غیر ضروری Starting React App and removing unnecessary files

  • پیکربندی فروشگاه Redux Configuring Redux Store

  • پیکربندی فروشگاه Redux Configuring Redux Store

  • افزودن مسیریابی به برنامه Adding Routing to App

  • افزودن مسیریابی به برنامه Adding Routing to App

  • ایجاد کامپوننت جعبه احراز هویت با MaterialUI Creating Authentication Box Component with MaterialUI

  • ایجاد کامپوننت جعبه احراز هویت با MaterialUI Creating Authentication Box Component with MaterialUI

  • اطلاعات بیشتر در مورد MaterialUi و ایجاد سربرگ صفحه ورود به سیستم More about MaterialUi and Creating Login Page Header

  • اطلاعات بیشتر در مورد MaterialUi و ایجاد سربرگ صفحه ورود به سیستم More about MaterialUi and Creating Login Page Header

  • ایجاد جزء ورودی سفارشی Creating custom input component

  • ایجاد جزء ورودی سفارشی Creating custom input component

  • ایجاد دکمه سفارشی Creating Custom Button

  • ایجاد دکمه سفارشی Creating Custom Button

  • ایجاد کامپوننت تغییر مسیر Creating Redirect Component

  • ایجاد کامپوننت تغییر مسیر Creating Redirect Component

  • ایجاد پیام راهنمای ابزار روی ماوس Creating Tooltip Message On Mouse Over

  • ایجاد پیام راهنمای ابزار روی ماوس Creating Tooltip Message On Mouse Over

  • الگوی بیان منظم Regular Expression Pattern

  • الگوی بیان منظم Regular Expression Pattern

  • ایجاد اعتبارسنجی سفارشی Creating Custom Validator

  • ایجاد اعتبارسنجی سفارشی Creating Custom Validator

  • ایجاد صفحه ثبت نام Creating Register Page

  • ایجاد صفحه ثبت نام Creating Register Page

  • آماده شدن برای اتصال با سرور ما (API) Preparing for connection with our server (API)

  • آماده شدن برای اتصال با سرور ما (API) Preparing for connection with our server (API)

  • آماده سازی اقدامات احراز هویت Preparing Authentication Actions

  • آماده سازی اقدامات احراز هویت Preparing Authentication Actions

  • ارسال اقدامات از React Components Dispatch Actions from React Components

  • ارسال اقدامات از React Components Dispatch Actions from React Components

  • تست اقدامات ورود و ثبت نام و توضیح جریان redux Testing Login Actions and Registration Actions and explaining redux flow

  • تست اقدامات ورود و ثبت نام و توضیح جریان redux Testing Login Actions and Registration Actions and explaining redux flow

  • ایجاد هشدار سفارشی Creating Custom Alert

  • ایجاد هشدار سفارشی Creating Custom Alert

  • آماده سازی فروشگاه برای پیام های هشدار Preparing Store for Alert Messages

  • آماده سازی فروشگاه برای پیام های هشدار Preparing Store for Alert Messages

  • نمایش پیام های سرور Displaying Server Messages

  • نمایش پیام های سرور Displaying Server Messages

  • افزودن توکن JWT به درخواست ها Adding JWT token to Requests

  • افزودن توکن JWT به درخواست ها Adding JWT token to Requests

  • رفع سریع هدرهای Axios Quick Fix for Axios Headers

  • رفع سریع هدرهای Axios Quick Fix for Axios Headers

  • کد کامل - پایان ماژول Complete code - End of the Module

  • کد کامل - پایان ماژول Complete code - End of the Module

ایجاد رابط کاربری داشبورد در React Creating Dashboard UI in React

ایجاد رابط کاربری داشبورد در React Creating Dashboard UI in React

  • معرفی ماژول - رابط کاربری داشبورد Module introduction - Dashboard UI

  • معرفی ماژول - رابط کاربری داشبورد Module introduction - Dashboard UI

  • ایجاد ساختار داشبورد Creating Dashboard Structure

  • ایجاد ساختار داشبورد Creating Dashboard Structure

  • ایجاد دکمه صفحه اصلی Creating Main Page Button

  • ایجاد دکمه صفحه اصلی Creating Main Page Button

  • دکمه افزودن دوست Add Friend Button

  • دکمه افزودن دوست Add Friend Button

  • نوار کناری Sidebar

  • نوار کناری Sidebar

  • Material UI - افزودن گفتگوی دوست Material UI - Add Friend Dialog

  • Material UI - افزودن گفتگوی دوست Material UI - Add Friend Dialog

  • دکمه های گفتگو Dialog Buttons

  • دکمه های گفتگو Dialog Buttons

  • آماده کردن لیست دوستان Preparing Friends List

  • آماده کردن لیست دوستان Preparing Friends List

  • نشانگر آنلاین Online Indicator

  • نشانگر آنلاین Online Indicator

  • ایجاد لیست دعوت های ساختگی Creating Dummy Invitations List

  • ایجاد لیست دعوت های ساختگی Creating Dummy Invitations List

  • فهرست دعوت - دکمه های تصمیم Invitations List - Decision Buttons

  • فهرست دعوت - دکمه های تصمیم Invitations List - Decision Buttons

  • منوی کشویی با عملکرد خروج Dropdown Menu with logout functionality

  • منوی کشویی با عملکرد خروج Dropdown Menu with logout functionality

  • بررسی وجود نشانه در صفحه داشبورد Checking if token exists on Dashboard Page

  • بررسی وجود نشانه در صفحه داشبورد Checking if token exists on Dashboard Page

  • کد کامل - پایان ماژول Complete code - End of the module

  • کد کامل - پایان ماژول Complete code - End of the module

سیستم دعوت دوست و اتصال بیدرنگ SocketIO Friend Invitation System and SocketIO Realtime Connection

سیستم دعوت دوست و اتصال بیدرنگ SocketIO Friend Invitation System and SocketIO Realtime Connection

  • معرفی ماژول Module Introduction

  • معرفی ماژول Module Introduction

  • اتصال SocketIO به سرور ما Connecting SocketIO to our Server

  • اتصال SocketIO به سرور ما Connecting SocketIO to our Server

  • اتصال به سرور SocketIO از سمت مشتری Connecting to SocketIO Server From Client Side

  • اتصال به سرور SocketIO از سمت مشتری Connecting to SocketIO Server From Client Side

  • افزودن توکن JWT به رویداد ارسال شده به سرور Adding JWT Token to Event Emitted To Server

  • افزودن توکن JWT به رویداد ارسال شده به سرور Adding JWT Token to Event Emitted To Server

  • اعتبارسنجی توکن‌های JWT در سمت سرور Validating JWT Tokens at Server Side

  • اعتبارسنجی توکن‌های JWT در سمت سرور Validating JWT Tokens at Server Side

  • فروشگاه سرور - ذخیره اطلاعات مربوط به کاربران متصل Server Store - Saving Information About Connected Users

  • فروشگاه سرور - ذخیره اطلاعات مربوط به کاربران متصل Server Store - Saving Information About Connected Users

  • فروشگاه سرور تست Testing Server Store

  • فروشگاه سرور تست Testing Server Store

  • ایجاد Disconnect Handler Creating Disconnect Handler

  • ایجاد Disconnect Handler Creating Disconnect Handler

  • Redux - آماده سازی اقدامات و کاهش دهنده ها برای منطق دوستان Redux - Preparing Actions And Reducers for Friends Logic

  • Redux - آماده سازی اقدامات و کاهش دهنده ها برای منطق دوستان Redux - Preparing Actions And Reducers for Friends Logic

  • آماده سازی اقدام برای ارسال دعوت نامه دوست Preparing Action To Send Friend Invitation

  • آماده سازی اقدام برای ارسال دعوت نامه دوست Preparing Action To Send Friend Invitation

  • در حال اتصال ارسال دعوت دوست اقدام به گفتگو Connecting Send Friend Invitation Action To Dialog

  • در حال اتصال ارسال دعوت دوست اقدام به گفتگو Connecting Send Friend Invitation Action To Dialog

  • ایجاد مسیرهای سرور - دعوت نامه های دوستان Creating Server Routes - Friends Invitations

  • ایجاد مسیرهای سرور - دعوت نامه های دوستان Creating Server Routes - Friends Invitations

  • ایجاد مدل دعوت دوست Creating Friend Invitation Model

  • ایجاد مدل دعوت دوست Creating Friend Invitation Model

  • اعتبارسنجی دعوت نامه دوست سفارشی Custom Friend Invitation Validation

  • اعتبارسنجی دعوت نامه دوست سفارشی Custom Friend Invitation Validation

  • آزمایش دعوتنامه های دوستان اعتبارسنجی سفارشی Testing Friends Invitations Custom Validations

  • آزمایش دعوتنامه های دوستان اعتبارسنجی سفارشی Testing Friends Invitations Custom Validations

  • اعتبارسنجی سفارشی بیشتر مربوط به دعوت نامه های دوستان More Custom Validation Related With Friend Invitations

  • اعتبارسنجی سفارشی بیشتر مربوط به دعوت نامه های دوستان More Custom Validation Related With Friend Invitations

  • ذخیره دعوتنامه دوست در پایگاه داده Saving Friend Invitation In Database

  • ذخیره دعوتنامه دوست در پایگاه داده Saving Friend Invitation In Database

  • تست دعوت نامه های دوستان Testing Friend Invitations

  • تست دعوت نامه های دوستان Testing Friend Invitations

  • آماده سازی شنوندگان رویداد SocketIO Client برای دعوت نامه های بلادرنگ دوستان Preparing SocketIO Client Event Listeners for Realtime Friends Invitations

  • آماده‌سازی شنوندگان رویداد SocketIO Client برای دعوت‌نامه‌های بیدرنگ دوستان Preparing SocketIO Client Event Listeners for Realtime Friends Invitations

  • آماده شدن در سرور در انتظار دعوتنامه های دوست Preparing at Server Pending Friend Invitations

  • آماده شدن در سرور در انتظار دعوتنامه های دوست Preparing at Server Pending Friend Invitations

  • انتشار رویدادها به مشتریان شناسه خاص Emitting Events to Clients of Specific ID

  • انتشار رویدادها به مشتریان شناسه خاص Emitting Events to Clients of Specific ID

  • آزمایش به‌روزرسانی‌های واقعی دعوتنامه‌های دوستان Testing Real Updates of Friends Invitations

  • آزمایش به‌روزرسانی‌های واقعی دعوتنامه‌های دوستان Testing Real Updates of Friends Invitations

  • رفع اشکالات و تست مجدد Fixing Bugs and Retesting

  • رفع اشکالات و تست مجدد Fixing Bugs and Retesting

  • ارائه لیست دعوت نامه های معلق واقعی Rendering Real Pending Invitations List

  • ارائه لیست دعوت نامه های معلق واقعی Rendering Real Pending Invitations List

  • رفع اشکال با ارائه دعوتنامه های معلق Fixing Bug With Pending Invitations Rendering

  • رفع اشکال با ارائه دعوتنامه های معلق Fixing Bug With Pending Invitations Rendering

  • به روز رسانی اولیه دعوت نامه های معلق Initial Update Of Pending Invitations

  • به روز رسانی اولیه دعوت نامه های معلق Initial Update Of Pending Invitations

  • تست دعوتنامه های اولیه Testing Initial Invitations

  • تست دعوتنامه های اولیه Testing Initial Invitations

  • آماده سازی سمت مشتری برای پذیرش یا رد دعوت دوست Preparing Client Side To Accept Or Reject Friend Invitation

  • آماده سازی سمت مشتری برای پذیرش یا رد دعوت دوست Preparing Client Side To Accept Or Reject Friend Invitation

  • آماده سازی کنترل کننده های تصمیم گیری Preparing Decision Controllers

  • آماده سازی کنترل کننده های تصمیم گیری Preparing Decision Controllers

  • ایجاد منطق رد دعوت Creating Logic Of Rejecting Invitation

  • ایجاد منطق رد دعوت Creating Logic Of Rejecting Invitation

  • تست رد دعوت دوست Testing Rejection Of Friend Invitation

  • تست رد دعوت دوست Testing Rejection Of Friend Invitation

  • منطق پذیرش دعوت دوست Accepting Friend Invitation Logic

  • منطق پذیرش دعوت دوست Accepting Friend Invitation Logic

  • تست پذیرش دعوت نامه دوست Testing Friend Invitation Acceptation

  • تست پذیرش دعوت نامه دوست Testing Friend Invitation Acceptation

  • آماده سازی سمت مشتری برای به روز رسانی دوستان Preapring Client Side For Friends Updates

  • آماده سازی سمت مشتری برای به روز رسانی دوستان Preapring Client Side For Friends Updates

  • ایجاد منطق سرور برای به‌روزرسانی‌های دوستان واقعی Creating Server Logic For Real Friends Updates

  • ایجاد منطق سرور برای به‌روزرسانی‌های دوستان واقعی Creating Server Logic For Real Friends Updates

  • آزمایش به‌روزرسانی‌های دوستان Testing Friends Updates

  • آزمایش به‌روزرسانی‌های دوستان Testing Friends Updates

  • اتصال نشانگر کاربر آنلاین Connecting Online User Indicator

  • اتصال نشانگر کاربر آنلاین Connecting Online User Indicator

  • نشانگر آنلاین در React Side Online Indicator at React Side

  • نشانگر آنلاین در React Side Online Indicator at React Side

  • کد کامل - پایان ماژول Complete Code - End of the Module

  • کد کامل - پایان ماژول Complete Code - End of the Module

ایجاد سیستم چت بیدرنگ با SocketIO و MongoDB Creating Realtime Chat System With SocketIO and MongoDB

ایجاد سیستم چت بیدرنگ با SocketIO و MongoDB Creating Realtime Chat System With SocketIO and MongoDB

  • معرفی ماژول Module Introduction

  • معرفی ماژول Module Introduction

  • آماده سازی Redux Store برای عملکرد چت Preparing Redux Store For Chat Functionality

  • آماده سازی Redux Store برای عملکرد چت Preparing Redux Store For Chat Functionality

  • انتخاب مکالمه فعال Choosing Active Conversation

  • انتخاب مکالمه فعال Choosing Active Conversation

  • ایجاد برچسب چت Creating Chat Label

  • ایجاد برچسب چت Creating Chat Label

  • ایجاد رابط کاربری مسنجر Creating Messenger UI

  • ایجاد رابط کاربری مسنجر Creating Messenger UI

  • ایجاد کانتینر پیام ها Creating Messages Container

  • ایجاد کانتینر پیام ها Creating Messages Container

  • ایجاد هدر پیام Creating Message Header

  • ایجاد هدر پیام Creating Message Header

  • ارائه پیام های واحد Rendering Single Messages

  • ارائه پیام های واحد Rendering Single Messages

  • ایجاد ورودی پیام جدید Creating New Message Input

  • ایجاد ورودی پیام جدید Creating New Message Input

  • تثبیت عرض ورودی Fixing Input Width

  • تثبیت عرض ورودی Fixing Input Width

  • انتشار رویداد با پیام مستقیم Emitting Event With Direct Message

  • انتشار رویداد با پیام مستقیم Emitting Event With Direct Message

  • ایجاد Handler برای رویداد پیام مستقیم Creating Handler For Direct Message Event

  • ایجاد Handler برای رویداد پیام مستقیم Creating Handler For Direct Message Event

  • تست کنترل کننده پیام مستقیم Testing Direct Message Handler

  • تست کنترل کننده پیام مستقیم Testing Direct Message Handler

  • آماده سازی به روز رسانی های چت بیدرنگ Preparing Realtime Chat Updates

  • آماده سازی به روز رسانی های چت بیدرنگ Preparing Realtime Chat Updates

  • افزودن به‌روزرسانی اولیه چت Adding Initial Chat Update

  • افزودن به‌روزرسانی اولیه چت Adding Initial Chat Update

  • آزمایش به‌روزرسانی‌های واقعی چت Testing Real Chat Updates

  • آزمایش به‌روزرسانی‌های واقعی چت Testing Real Chat Updates

  • به روز رسانی پیام های فروشگاه Updating Store Messages

  • به روز رسانی پیام های فروشگاه Updating Store Messages

  • رفع اشکال با وضعیت فروشگاه پیام ها Fixing Bug With Messages Store State

  • رفع اشکال با وضعیت فروشگاه پیام ها Fixing Bug With Messages Store State

  • ارائه پیام های واقعی Rendering Real Messages

  • ارائه پیام های واقعی Rendering Real Messages

  • اشکال زدایی نام کاربری نویسنده Debugging Author Username

  • اشکال زدایی نام کاربری نویسنده Debugging Author Username

  • رفع اشکال با آپدیت اولین پیام Fixing Bug With Update Of First Message

  • رفع اشکال با آپدیت اولین پیام Fixing Bug With Update Of First Message

  • ایجاد جداکننده تاریخ Creating Date Separator

  • ایجاد جداکننده تاریخ Creating Date Separator

  • کد کامل - پایان ماژول Complete code - End of the Module

  • کد کامل - پایان ماژول Complete code - End of the Module

WebRTC - مقدمه تئوری (اختیاری) WebRTC - Theory Introduction (optional)

WebRTC - مقدمه تئوری (اختیاری) WebRTC - Theory Introduction (optional)

  • WebRTC چیست؟ What is WebRTC ?

  • WebRTC چیست؟ What is WebRTC ?

  • WebRTC چگونه کار می کند؟ How WebRTC is working ?

  • WebRTC چگونه کار می کند؟ How WebRTC is working ?

  • سرور STUN چیست؟ What is STUN Server ?

  • سرور STUN چیست؟ What is STUN Server ?

  • سرور TURN چیست؟ What is TURN Server ?

  • TURN سرور چیست؟ What is TURN Server ?

  • SDP چیست؟ What is SDP ?

  • SDP چیست؟ What is SDP ?

  • نامزدهای ICE چیست؟ What are ICE Candidates ?

  • نامزدهای ICE چیست؟ What are ICE Candidates ?

  • چگونه بین همتایان ارتباط برقرار کنیم؟ How to establish connection between Peers ?

  • چگونه بین همتایان ارتباط برقرار کنیم؟ How to establish connection between Peers ?

ایجاد اتاق تماس گروهی ویدیویی Creating Video Group Call Rooms

ایجاد اتاق تماس گروهی ویدیویی Creating Video Group Call Rooms

  • معرفی ماژول Module Introduction

  • معرفی ماژول Module Introduction

  • آماده سازی وضعیت فروشگاه Preparing Store State

  • آماده سازی وضعیت فروشگاه Preparing Store State

  • ایجاد دکمه اتاق Creating Room Button

  • ایجاد دکمه اتاق Creating Room Button

  • اگر کاربر در اتاق باشد، وضعیت را تغییر دهید Changing State if User is in Room

  • اگر کاربر در اتاق باشد، وضعیت را تغییر دهید Changing State if User is in Room

  • ایجاد کامپوننت اتاق اصلی Creating Main Room Component

  • ایجاد کامپوننت اتاق اصلی Creating Main Room Component

  • افزودن قابلیت تغییر اندازه به اتاق Adding Resize Functionality To Room

  • افزودن قابلیت تغییر اندازه به اتاق Adding Resize Functionality To Room

  • ایجاد ساختار گفتگوی اتاق Creating Structure of Room Dialog

  • ایجاد ساختار گفتگوی اتاق Creating Structure of Room Dialog

  • ایجاد دکمه های اتاق Creating Room Buttons

  • ایجاد دکمه های اتاق Creating Room Buttons

  • ایجاد اتاق در سمت سرور Creating Room at Server Side

  • ایجاد اتاق در سمت سرور Creating Room at Server Side

  • اتاق تست ایجاد رویدادها Testing Room Create Events

  • اتاق تست ایجاد رویدادها Testing Room Create Events

  • پخش اتاق های فعال برای همه کاربران آنلاین Broadcasting Active Rooms To All Online Users

  • پخش اتاق های فعال برای همه کاربران آنلاین Broadcasting Active Rooms To All Online Users

  • ذخیره اتاق‌های فعال در فروشگاه Saving Active Rooms in Store

  • ذخیره اتاق‌های فعال در فروشگاه Saving Active Rooms in Store

  • رفع اشکال با تنظیم اتاق‌های فعال Fixing Bug With Setting Active Rooms

  • رفع اشکال با تنظیم اتاق‌های فعال Fixing Bug With Setting Active Rooms

  • رندر اکتیو روم Rendering Active Rooms

  • رندر اکتیو روم Rendering Active Rooms

  • پیوستن به Active Room در سمت سرور Joining Active Room at Server Side

  • پیوستن به Active Room در سمت سرور Joining Active Room at Server Side

  • تست عملکرد اتاق اتصال Testing Joining Room Functionality

  • تست عملکرد اتاق اتصال Testing Joining Room Functionality

  • رفع اشکالات و تست مجدد Fixing Bugs and Retesting

  • رفع اشکالات و تست مجدد Fixing Bugs and Retesting

  • ایجاد قابلیت ترک اتاق Creating Leave Room Functionality

  • ایجاد قابلیت ترک اتاق Creating Leave Room Functionality

  • تست عملکرد اتاق خروج Testing Leave Room Functionality

  • تست عملکرد اتاق خروج Testing Leave Room Functionality

  • مدیریت خروج از اتاق در رویداد Disconnect Handling Leaving Room at Disconnect Event

  • مدیریت خروج از اتاق در رویداد Disconnect Handling Leaving Room at Disconnect Event

  • به روز رسانی اولیه Active Rooms Initial Update of Active Rooms

  • به روز رسانی اولیه Active Rooms Initial Update of Active Rooms

  • دریافت پیش‌نمایش جریان محلی Getting Local Stream Preview

  • دریافت پیش‌نمایش جریان محلی Getting Local Stream Preview

  • ایجاد پیش نمایش ویدیوی محلی Creating Local Video Preview

  • ایجاد پیش نمایش ویدیوی محلی Creating Local Video Preview

  • دریافت پیش‌نمایش محلی هنگام پیوستن به اتاق Getting Local Preview When Joining Room

  • دریافت پیش‌نمایش محلی هنگام پیوستن به اتاق Getting Local Preview When Joining Room

  • افزودن عملکرد فقط صوتی Adding Only Audio Functionality

  • افزودن عملکرد فقط صوتی Adding Only Audio Functionality

  • رفع اشکال فقط با صدا Fixing Bug With Audio Only

  • رفع اشکال فقط با صدا Fixing Bug With Audio Only

  • توقف همه مسیرها هنگام خروج از اتاق Stopping All Tracks When Leaving a Room

  • توقف همه مسیرها هنگام خروج از اتاق Stopping All Tracks When Leaving a Room

  • نظریه معماری مش Mesh Architecture Theory

  • نظریه معماری مش Mesh Architecture Theory

  • نصب بسته Simple Peer Installing Simple Peer package

  • نصب بسته Simple Peer Installing Simple Peer package

  • رویدادهای مرتبط با اتصال Events Related With Connection

  • رویدادهای مرتبط با اتصال Events Related With Connection

  • آماده شدن برای اتصال WebRTC ورودی Preparing for Incoming WebRTC Connection

  • آماده شدن برای اتصال WebRTC ورودی Preparing for Incoming WebRTC Connection

  • آماده کردن شیء اتصال همتا Preparing Peer Connection Object

  • آماده کردن شیء اتصال همتا Preparing Peer Connection Object

  • انتشار رویداد برای راه اندازی اتصال Emitting Event to Initialize Connection

  • انتشار رویداد برای راه اندازی اتصال Emitting Event to Initialize Connection

  • آزمایش ایجاد اشیاء اتصال همتا Testing Creating Peer Connection Objects

  • آزمایش ایجاد اشیاء اتصال همتا Testing Creating Peer Connection Objects

  • تبادل داده های سیگنالینگ Exchanging Signaling Data

  • تبادل داده های سیگنالینگ Exchanging Signaling Data

  • تست تبادل داده سیگنالینگ Testing Signaling Data Exchange

  • تست تبادل داده سیگنالینگ Testing Signaling Data Exchange

  • رفع اشکال ساده و آزمایش اتصال RTC Fixing Simple Bug And Testing RTC Connection

  • رفع اشکال ساده و آزمایش اتصال RTC Fixing Simple Bug And Testing RTC Connection

  • ارائه جریان های از راه دور Rendering Remote Streams

  • ارائه جریان های از راه دور Rendering Remote Streams

  • بستن اتصال RTC و حذف جریان های راه دور Closing RTC Connection and Removing Remote Streams

  • بستن اتصال RTC و حذف جریان های راه دور Closing RTC Connection and Removing Remote Streams

  • رفع اشکال زمانی که آخرین کاربر اتاق را ترک می کند Fixing Bug When Last User Will Leave Room

  • رفع اشکال زمانی که آخرین کاربر اتاق را ترک می کند Fixing Bug When Last User Will Leave Room

  • اتصال منطق به دکمه ویدیو Connecting Logic To Video Button

  • اتصال منطق به دکمه ویدیو Connecting Logic To Video Button

  • اتصال منطق به دکمه بی صدا Connecting Logic To Mute Button

  • اتصال منطق به دکمه بی صدا Connecting Logic To Mute Button

  • آماده سازی منطق برای اشتراک گذاری صفحه نمایش Preparing Logic For Screen Sharing

  • آماده سازی منطق برای اشتراک گذاری صفحه نمایش Preparing Logic For Screen Sharing

  • جابه‌جایی آهنگ‌های ویدیویی خروجی در اتصالات همتا فعال Switching Outgoing Video Tracks in Active Peer Connections

  • جابه‌جایی آهنگ‌های ویدیویی خروجی در اتصالات همتا فعال Switching Outgoing Video Tracks in Active Peer Connections

  • رفع خاموش کردن اشتراک‌گذاری صفحه نمایش Fixing Switching Off Screen Sharing

  • رفع خاموش کردن اشتراک‌گذاری صفحه نمایش Fixing Switching Off Screen Sharing

  • نمایش پیش نمایش اشتراک گذاری صفحه Showing Preview of Screen Sharing

  • نمایش پیش نمایش اشتراک گذاری صفحه Showing Preview of Screen Sharing

  • توقف همه آهنگ‌ها هنگام خروج کاربر از اتاق Stopping All Tracks when User is Leaving Room

  • توقف همه آهنگ‌ها هنگام خروج کاربر از اتاق Stopping All Tracks when User is Leaving Room

  • پنهان کردن دکمه ها بستگی به فعال بودن Audio Only دارد Hidding Buttons Depends if Audio Only is Enabled

  • پنهان کردن دکمه ها بستگی به فعال بودن Audio Only دارد Hidding Buttons Depends if Audio Only is Enabled

  • دادن امکان به صاحب اتاق برای پیوستن مجدد به اتاقی که او ایجاد کرده است Giving Room Owner Possibility to Re-join Room which he created

  • دادن امکان به صاحب اتاق برای پیوستن مجدد به اتاقی که او ایجاد کرده است Giving Room Owner Possibility to Re-join Room which he created

  • پایان ماژول - کد کامل End of the Module - Complete Code

  • پایان ماژول - کد کامل End of the Module - Complete Code

نمایش نظرات

آموزش Discord Clone - MERN Stack را با WebRTC و SocketIO بیاموزید
جزییات دوره
19.5 hours
185
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
2,182
4.6 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Marek Gryszkiewicz Marek Gryszkiewicz

توسعه دهنده وب