آموزش ساخت اپلیکیشن انتقال فایل پویا با WebRTC - آخرین آپدیت

مقدمه‌ای بر فایل‌ها Introduction to Files

• مقدمه این بخش Intro to This Section

• فایل‌ها چیستند؟ What Are Files?

• مراحل مورد نیاز برای ارسال فایل از طریق شبکه Steps Required to Send a File Over the Wire

• آماده‌سازی و ارسال فایل با استفاده از شبه‌کد پایتون Preparing and Sending a File Using Pseudo Python Code

• دریافت، خواندن و ایجاد فایل با استفاده از شبه‌کد پایتون Receiving, Reading, and Creating a File Using Pseudo Python Code

• روشی مدرن‌تر برای ارسال فایل در شبکه با استفاده از WebRTC A More Modern Way of Sending a File Over the Network Using WebRTC

راه‌اندازی اتصال WebSocket و آماده‌سازی پروژه Setting Up a WebSocket Connection and Getting Project Ready

• مروری بر HTML و CSS HTML and CSS Overview

• ایجاد فایل ورودی جاوااسکریپت و تنظیم ESModules Creating Our Entry JavaScript File and Setting Up ESModules

• راه‌اندازی وضعیت (State) در سمت کلاینت Setting Up State on the Client Side

• راه‌اندازی اتصال WebSocket در کلاینت Setting Up a WebSocket Connection on the Client

• راه‌اندازی لاگر (Logger) سفارشی Setting Up Our Custom Logger

• راه‌اندازی سرور Node و اجرای سرور HTTP Setting Up a Node Server, and Spinning Up an HTTP Server

• راه‌اندازی سرور WebSocket و استخراج UserId Setting Up a WebSocket Server, and Extracting the UserId

• ذخیره وضعیت اتصال کاربران در سرور Storing Connection State for Users, on Our Server

• ثبت شنوندگان رویداد WebSocket در سرور Registering WebSocket Event Listeners on the Server

• مدیریت قطع اتصال Handling Disconnections

• خلاصه و تست Summary and Testing

آشنایی با File API و استفاده از AJAX برای بررسی شناسه گیرنده Intro to the File API and Using AJAX to Check the Recipient ID

• مرور پروژه، اصلاحات جزئی و فایل‌های شروع Project Review, Minor Fixes, and Starting Files

• استخراج شناسه نشست (Session ID) گیرنده Extracting the Receiver's Session ID

• ارسال درخواست AJAX با Fetch API برای بررسی Session ID گیرنده Sending an AJAX Request Using the Fetch API to Check Receiver's Session ID

• مدیریت درخواست AJAX در سرور Handling the AJAX Request on the Server

• تکمیل منطق AJAX در سمت کلاینت Finishing Off Our Client-Side AJAX Logic

• تست درخواست AJAX و رفع باگ‌های جزئی Testing Our AJAX Request and Minor Bug Fixes

• مقدمه‌ای بر File API Introduction to the File API

• ایجاد فایل‌های Null Byte در ترمینال برای اهداف تست Creating Null Byte Files in the Terminal for Testing Purposes

• مشخصات فایل و مشاهده حافظه Heap در تب Memory مرورگر The File Specification, and Viewing Heap Memory in the Browser "Memory" Tab

• اطمینان از عدم بارگذاری فایل خالی توسط کاربر Ensuring a User Does Not Load an Empty File

• تکمیل منطق بررسی آپلود فایل Completing Our File Upload Checking Logic

• فعال‌سازی دکمه ارسال و آماده‌سازی برای WebRTC Enabling the "Send" Button and Getting Ready for WebRTC

راه‌اندازی اتصال WebRTC از صفر! Setting Up a WebRTC Connection, From Scratch!

• مروری بر نحوه عملکرد WebRTC Overview of How WebRTC Works

• ایجاد Offer در WebRTC Creating a WebRTC Offer

• توضیح توابع createPeerConnection() و createDataChannel() Explaining the createPeerConnection() and createDataChannel() Functions

• ارسال Offer به سرور سیگنالینگ Sending the WebRTC Offer to the Signaling Server

• انتقال Offer به کاربر گیرنده فایل Relaying the Offer to the User Receiving the File

• تنظیم شنوندگان رویداد پیام‌های ورودی برای اتصال WebSocket Setting Up Incoming Message Event Listeners for Our WebSocket Connection

• دریافت Offer و تولید Answer در WebRTC Receiving the Offer, and Generating the WebRTC Answer

• ارسال و دریافت Answer در WebRTC Sending and Receiving the WebRTC Answer

• کار با ICE Candidates Dealing with ICE Candidates

• انتقال ICE Candidates از آرایه به آبجکت PC Pushing ICE Candidates in Our Array Into the PC Object

• تست کد و فایل‌های نهایی Testing Code and Ending Files

انتقال فایل روی WebRTC با استفاده از FileReader API File Transfer Over WebRTC Using FileReader API

• روش‌های مختلف خواندن فایل در حافظه توسط مرورگر The Different Ways a Browser Can Read a File Into Memory

• اجرای کد sendFile() Triggering Our sendFile() Code

• تنظیم المان progress و تست کد Setting Up the progress Element and Testing Our Code

• مقدمه‌ای بر FileReader API Introduction to the FileReader API

• خطاهای مرورگر و WebRTC در صورت استفاده از FileReader بدون Chunking Browser and WebRTC Errors If We Use the FileReader Without Chunking

• مشاهده رشد و کاهش حافظه Heap به صورت بلادرنگ Viewing the Memory Heap Growing and Shrinking in Real Time

• تکه‌تکه کردن (Chunking) و صف ارسال Chunking and the Send Queue

• نوشتن منطق تکه‌تکه کردن فایل‌ها Writing Logic to Chunk Our Files

• به‌روزرسانی مقدار Offset، خواندن تکه‌های بعدی و به‌روزرسانی المان پیشرفت Updating the Offset Value, Reading Further Chunks, & Updating Progress Element

• تست کد Testing Code

• مشاهده ویژگی BufferedAmount در کانال داده Viewing the BufferedAmount Property on the Data Channel

• نحوه استفاده از ویژگی‌های BufferedAmount و BufferedAmountLowThreshold How We Have to Use the BufferedAmount and BufferedAmountLowThreshold Properties

• تنظیم آستانه‌های صف ارسال و BufferedAmountLowThreshold Setting Our Send Queue Thresholds and the BufferedAmountLowThreshold

• توقف ارسال هنگام پر شدن بافر صف ارسال (BufferedAmount) Pause Sending When the Send Queue Buffer (AKA: BufferedAmount) Gets Too Full

• ازسرگیری ارسال هنگام اجرای رویداد BufferedAmountLow Resume Sending When the "BufferedAmountLow" Event Is Fired

• تست کد فرستنده و پیوست کردن فایل‌های کدنویسی Testing Our Sender Code and Attaching Coding Files

• نحوه دریافت فایل How to Receive a File

• ارسال متادیتای فایل به گیرنده Sending File Metadata to the Receiver

• ثبت شنونده رویداد Message در کانال داده گیرنده Registering the "Message" Event Listener on the Receiver's Data Channel

• استخراج متادیتای فایل Extracting File Metadata

• مدیریت تکه‌ها و نمایش آمار Handling Chunks and Displaying Statistics

• ایجاد آبجکت Blob و استفاده از رابط URL برای ایجاد لینک دانلود Creating a Blob Object and Using the URL Interface to Create a Downloadable Link

• تست کد و بحث در مورد منطق متادیتا Testing Our Code and Discussion About Metadata Logic

• چرا یک آبجکت Blob واحد ایجاد کنیم؟ Why Create One Single Blob Object?

• بستن اصولی WebRTC و کانال داده Closing a WebRTC and Data Channel Gracefully

• بستن منظم کانال داده و آبجکت WebRTC Peer Connection Gracefully Closing the Data Channel and the WebRTC Peer Connection Object

• پاک‌سازی حافظه متغیرها Clearing Variable Memory

• امکان توقف ارسال فایل توسط کاربر Allowing the User to "Stop" Sending a File

• رفع خطای Undefined Fixing an Undefined Error

انتقال فایل روی WebRTC با استفاده از Blobs File Transfer Over WebRTC Using Blobs

• مقایسه Blobs و ArrayBuffers و فایل‌های شروع Blobs vs. ArrayBuffers and Starting Files

• ارسال مستقیم Blobs Sending Blobs Directly

• ویژگی binaryType در DataChannel The binaryType Property of the DataChannel

انتقال فایل روی WebRTC با FileReader API و فشرده‌سازی File Transfer Over WebRTC Using FileReader API, With Compression

• مقدمه‌ای بر فشرده‌سازی و کتابخانه Pako Introduction to Compression and the Pako Library

• ارسال ArrayBuffers فشرده شده Sending Compressed ArrayBuffers

• دریافت و ازفشرده‌سازی ArrayBuffers Receiving and Decompressing ArrayBuffers

• چرا فشرده‌سازی تصویر ممکن است منجر به فایل بزرگتر شود؟ Compressing an Image Can Result in a Larger File Than the Original (Mind Blown)

• راهکار ساده: کاهش اندازه هر تکه ارسالی در کانال داده Easy Solution – Reduce the Size of Each Chunk Sent Over the Data Channel

• راهکار دوم، بخش اول: فشرده‌سازی فقط برای فایل‌های غیرتصویری Solution Two, Part 1 – Only Compress Non-Image Files

• راهکار دوم، بخش دوم: ازفشرده‌سازی فقط برای فایل‌های غیرتصویری Solution Two, Part 2 – Only Decompress Non-Image Files

• رفع خطا و جشن موفقیت Fixing the Error and Celebrating Our Success

انتقال فایل روی WebRTC با استفاده از Streams API File Transfer Over WebRTC Using the Streams API

• مقدمه بخش Section Intro

• آشنایی با Streams API Intro to the Streams API

• پیاده‌سازی File Streams API Let's Implement the File Streams API

• تست کد و بررسی مشکلات Streams API Testing Our Code and the Problems with the Streams API

• مقدمه‌ای بر حالت BYOB در Streams API Intro to the BYOB Mode of the Streams API

• پیاده‌سازی BYOB و تست Streams API Implementing BYOB and Testing Our Streams API

بخش پایانی Outro

• بخش پایانی Outro