آموزش React و WebRTC 2023 و برنامه اشتراک‌گذاری مکان با چت ویدیویی

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

معرفی Introduction

• پیش نمایش برنامه Application Preview

ایجاد سمت سرور Creating Server Side

• نصب Node.js Node.js installation

• ایجاد پروژه سرور Creating Server Project

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

• افزودن سرور Socket.IO Adding Socket.IO Server

• تست ارتباط با پستچی Testing Connection with Postman

• کنترل کننده رویداد قطع شده است Disconnected Event Handler

• اطلاعات بیشتر درباره رویدادهای Handlers More about Events Handlers

ایجاد اپلیکیشن سمت مشتری Creating Client Side Application

• ساخت React Application Creating React Application

• ارتباط با Redux State Management Connecting with Redux State Management

• مسیریابی با react-router-dom Routing with react-router-dom

• ایجاد نمای صفحه ورود Creating Login Page View

• مدیریت ورودی نام کاربری Handling Username Input

• کنترل دکمه ورود Handling Login Button

• Refactoring کد Code Refactoring

• دریافت موقعیت جغرافیایی Getting Geo Location

• خطای دکمه غیرفعال کردن موقعیت مکانی Disabling Button on Location Error

• ذخیره موقعیت مکانی در فروشگاه Saving Location In Store

• اشکال زدایی فروشگاه Redux Redux Store Debugging

• دریافت موقعیت مکانی جعلی Getting Fake Location

اتصال برنامه مشتری با سمت سرور Connecting Client App with Server Side

• اتصال با سرور Socket.IO Connection with Socket.IO Server

• ذخیره سازی کاربران آنلاین Storing Online Users

• قابلیت ورود به سیستم Login functionality

• انتشار رویداد با کاربران آنلاین Emitting Event with Online Users

• ذخیره کاربران آنلاین در فروشگاه Saving Online Users In Store

• حذف کاربر قطع شده از فروشگاه Removing Disconnected User From Store

• تست عملکرد حذف کاربر قطع شده Testing Functionality Of Removing Disconnected User

• کد منبع برنامه بعد از بخش Application Source Code After Section

کار با نقشه Working with Map

• رندر گوگل مپ Rendering Google Map

• رندر کردن نشانگرهای نقشه Rendering Map Markers

• ارائه برچسب نام کاربری Rendering Username Label

• ایجاد کارت کاربر Creating User Card

• اتصال کارت اطلاعات کاربر Connecting User Info Card

• محاسبه فاصله بین دو مختصات Calculating Distance Between Two Coordinates

• تبدیل عدد به دو اعشاری Converting Number to Two Decimals

• ایجاد دکمه چت Creating Chat Button

• کد منبع برنامه بعد از بخش Application Source Code After Section

ایجاد چت Creating Chat

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

• ایجاد چت باکس های ساختگی Creating Dummy Chatboxes

• افزودن نوار ناو به چت باکس Adding Nav Bar to Chatbox

• افزودن کانتینر پیام ها Adding Messages Container

• افزودن ورودی پیام جدید Adding New Message Input

• مدیریت ورودی کاربر Handling User Input

• ارائه پیام های ساختگی Rendering Dummy Messages

• نمایش چت باکس های واقعی Displaying Real Chatboxes

• بستن چت باکس ها Closing Chatboxes

• پیوست کردن پیام‌های محلی Appending Local Messages

• رفع اشکال با پیام ها Fixing Bug With Messages

• ارسال پیام به سایر کاربران Sending Messages To Other Users

• نمایش پیام ها در سمت سرور Displaying Messages At Server Side

• باز کردن خودکار چت باکس ها Automatically Opening Chatboxes

• پیام ها به صورت خودکار پیمایش می شوند Messages Scroll Automatically

• کد منبع برنامه بعد از بخش Application Source Code After Section

اتاق های ویدئو - آماده سازی Video Rooms - Preparation

• مقدمه ای بر اتاق های ویدئویی Introduction To Video Rooms

• آماده سازی فروشگاه برای اتاق های ویدئویی Preparing Store For Video Rooms

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

• ایجاد دکمه های Join Room Creating Join Room Buttons

• اطلاع رسانی سرور درباره اتاق جدید ایجاد شده است Informing Server About New Room Created

• رفع اشکال با انتشار رویداد با اتاق جدید Fixing Bug With Emitting Event With New Room

• فهرست اتاق های پخش برای همه کاربران Broadcasting Rooms List to All Users

• تنظیم اتاق های واقعی در فروشگاه Setting Real Rooms In Store

• رندر اتاق واقعی Rendering Real Rooms

• دسترسی به جریان محلی Getting Access To Local Stream

• نمایش ویدیوی محلی Displaying Local Video

اتاق‌های ویدئو - اتصال WebRTC با استفاده از کتابخانه PeerJS Video Rooms - Connecting WebRTC Using PeerJS Library

• معرفی PeerJS PeerJS Introduction

• ایجاد شی همتا Creating Peer Object

• چگونه سرور همتا کار می کند How Peer Server Works

• اتصال با سرور همتا Connecting With Peer Server

• آماده سازی پیاده سازی همتا برای فراخوانی Preparing Peer Implementation For Calling

• پیوستن به اتاق ویدیو Joining Video Room

• به روز رسانی اتاق ها در سمت سرور Updating Rooms At Server Side

• تست اتاق های پخش پس از رویداد ورود به سیستم Testing Broadcasting Rooms After Login Event

• اتصال (تماس) با کاربر دوم Connecting (Calling) With Second User

• نمایش جریان از راه دور Displaying Remote Stream

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

• خروج از اتاق در سمت آغازگر Leaving Room At Initiator Side

• تست خروج از اتاق Testing Leaving Room

• منطق سمت سرور اتاق خروج Server Side Logic Of Leaving Room

• بستن اتصال همتا در هر دو طرف Closing Peer Connection At Both Sides

• رسیدگی به پرونده "ترک کثیف" Handling Case Of ,,Dirty Leave"

• دکمه های میکروفون و دوربین Microphone and Camera Buttons

• قطع کردن و خاموش کردن دوربین Muting And Switching Camera Off

• برنامه کامل - کد منبع Complete Application - Source Code

(اختیاری) نظریه WebRTC (Optional) WebRTC Theory

• WebRTC چیست؟ What is WebRTC ?

• سرور سیگنالینگ چیست؟ What is Signaling Server ?

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

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

• SDP چیست؟ What is SDP ?

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

• نحوه ایجاد ارتباط مستقیم بین همتایان How To Establish Direct Connection Between Peers