آموزش جامع انتقال فایل با WebRTC سال ۲۰۲۶ - آخرین آپدیت

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

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

• مقدمه این بخش Intro to this section

• فایل‌ها چیستند؟ What are files?

• مراحل لازم برای ارسال یک فایل در شبکه Steps required to send a file over the wire

• چرا متادیتا حیاتی است؟ Why metadata is vital

• آماده‌سازی و ارسال فایل با استفاده از کد شبه-پایتون Preparing and sending a file using pseudo Python code

• تحلیل مثال متادیتا روی پروتکل TCP Breaking down the metadata example over TCP

• دریافت، خواندن و ایجاد فایل با کد شبه-پایتون Receiving, reading and creating a file using pseudo Python code

• روشی مدرن‌تر برای ارسال فایل در شبکه با WebRTC A more modern way of sending a file over the network using WebRTC

• معرفی کلی فایل‌ها File introduction

راه‌اندازی اتصال WebSocket و آماده‌سازی پروژه Setting up a WebSocket connection and getting project ready

• چه کسانی باید این بخش را بگذرانند؟ Who should do this section?

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

• ایجاد فایل جاوااسکریپت ورودی و تنظیم ESModules Creating our entry JavaScript file and setting up ESModules

• تنظیم وضعیت (State) در سمت کلاینت Setting up state on the client side

• وضعیت یا State کلاینت چیست؟ What is client "state"?

• راه‌اندازی اتصال WebSocket در کلاینت Setting up a WebSocket connection on the client

• نقش WebSockets در WebRTC WebSockets role with WebRTC

• راه‌اندازی لاگر (Logger) اختصاصی Setting up our custom logger

• راه‌اندازی سرور Node و اجرای سرور HTTP Setting up a Node server, and spinning up an HTTP server

• راه‌اندازی سرور WebSocket Setting up a WebSocket server

• راه‌اندازی سرور WebSocket و استخراج userId Setting up a WebSocket server, and extracting the userId

• ذخیره‌سازی وضعیت اتصال کاربران در سرور Storing connection state for users, on our server

• ثبت Event Listenerهای WebSocket در سرور Registering WebSocket event listeners on the server

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

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

• تنظیمات پروژه و WebSocket Project and WebSocket Setup

آشنایی با File API و استفاده از AJAX برای بررسی ID گیرنده 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

• هدف از Session ID Purpose of session ID

• ارسال درخواست AJAX با Fetch API برای بررسی Session ID گیرنده Sending an AJAX request using the Fetch API to check receivers 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

• File API فراتر از یک المنت input است The File API is more than just the <input> element

• ایجاد فایل‌های 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

• عدم دسترسی به مکان فیزیکی فایل در سیستم کاربر The location of the file on the user's system is not made available to us

• جلوگیری از بارگذاری فایل خالی توسط کاربر 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

• رویکرد کلی ما در این دوره The process we'll take in this course

• ترکیب File API و AJAX File API and AJAX

راه‌اندازی اتصال WebRTC از صفر Setting up a WebRTC connection, from scratch!

• مرور نحوه عملکرد WebRTC Overview of how WebRTC works

• فایل‌های شروع Starting files

• ایجاد پیشنهاد WebRTC (Offer) Creating a WebRTC offer

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

• ارسال پیشنهاد WebRTC به سرور سیگنالینگ Sending the WebRTC offer to the signaling server

• انتقال پیشنهاد به کاربر گیرنده Relaying the offer to the user receiving the file

• تنظیم Event Listenerهای پیام‌های ورودی برای WebSocket Setting up incoming message event listeners for our WebSocket connection

• دریافت پیشنهاد و تولید پاسخ WebRTC (Answer) Receiving the offer, and generating the WebRTC answer

• ارسال و دریافت پاسخ WebRTC Sending and receiving the WebRTC answer

• کار با کاندیداهای ICE Dealing with ICE candidates

• انتقال کاندیداهای ICE از آرایه به آبجکت PC Pushing ICE candidates in our array into the PC object

• تست کد و فایل‌های نهایی Testing code and ending files

• کویز WebRTC WebRTC Quiz

انتقال فایل در WebRTC با استفاده از FileReader API File Transfer over WebRTC using FileReader API

• روش‌های مختلف خواندن فایل در حافظه توسط مرورگر The different ways a browser can read a file into memory

• سه روش اصلی خواندن و ارسال فایل از طریق کانال داده WebRTC The 3 main ways you can read files and send them over a WebRTC data channel

• اجرای کد sendFile Triggering our sendFile() code

• تنظیم المنت progress و تست کد Setting up the <progress> element and testing our code

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

• خطاهای مرورگر و WebRTC در صورت عدم تکه‌تکه کردن در FileReader Browser and WebRTC errors if we use the FileReader without chunking

• دو خطای رایج هنگام ارسال فایل‌های حجیم بدون Chunking The two errors you'll face when trying to send a large file, without chunking

• مشاهده رشد و کاهش حافظه Heap در لحظه Viewing the memory heap growing and shrinking in real time

• آرایه بافرها و حافظه RAM Array buffers and memory (RAM)

• توضیح ArrayBuffer به زبان ساده What is an ArrayBuffer in my own words

• تکه‌تکه کردن و صف ارسال Chunking and the send queue

• نوشتن منطق تکه‌تکه کردن فایل‌ها Writing logic to chunk our files

• چرا نباید همیشه از حداکثر اندازه تکه ممکن استفاده کنیم؟ Why not always send the maximum size chunk possible?

• چرا در برخی موارد کار با ArrayBuffers ضروری است؟ Why working with ArrayBuffers is sometimes required

• به‌روزرسانی مقدار offset، خواندن تکه‌های بعدی و به‌روزرسانی progress 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

• چرا باید ویژگی bufferedAmount را مانیتور کنیم؟ Why we have to monitor the bufferedAmount property

• تنظیم آستانه‌های صف ارسال و bufferedAmountLowThreshold Setting our send queue thresholds and the bufferedAmountLowThreshold

• مدیریت کنترل احتقان (Congestion Control) در پروژه Managing congestion control in our project

• توقف ارسال هنگام پر شدن بافر صف ارسال 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

• ثبت Event Listener پیام در کانال داده گیرنده Registering the "message" event listener on the receivers data channel

• استخراج متادیتای فایل Extracting file metadata

• مدیریت تکه‌ها و نمایش آمار Handling chunks and displaying statistics

• ایجاد آبجکت Blob و استفاده از URL interface برای ساخت لینک دانلود 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?

• خلاصه ایجاد آبجکت Blob Summary on Blob object creation

• بستن اصولی WebRTC و کانال داده Closing a WebRTC and data channel gracefully

• بستن صحیح Data Channel و آبجکت PeerConnection 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

• فایل‌های نهایی Ending files

• جمع‌بندی FileReader API FileReader API

انتقال فایل در WebRTC با استفاده از Blobs File Transfer over WebRTC using Blobs

• مقایسه Blobs در مقابل ArrayBuffers و فایل‌های شروع Blobs vs ArrayBuffers and starting files

• آیا متد file.slice مشابه arr.slice است؟ Is the file.slice() method the same as arr.slice() ???

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

• ویژگی binaryType در dataChannel The binaryType property of the dataChannel

• فایل‌های نهایی Ending files

• جمع‌بندی Blobs Blobs

انتقال فایل در WebRTC با FileReader API و فشرده‌سازی File Transfer over WebRTC using FileReader API, with Compression

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

• تأثیر فشرده‌سازی بر سرعت انتقال داده‌ها Compression makes data transmission fater

• ارسال ArrayBufferهای فشرده شده Sending compressed ArrayBuffers

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

• چالش‌های مربوط به تصاویر Images can be tricky

• چرا فشرده‌سازی تصویر ممکن است حجم آن را زیاد کند؟ 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

• خلاصه بخش Summary

• جمع‌بندی فشرده‌سازی Compression

انتقال فایل در WebRTC با استفاده از Streams API File Transfer over WebRTC using the Streams API

• مقدمه بخش Section intro

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

• بررسی سؤالات مربوط به استریم file.stream().getReader() Some questions arising from the file.stream().getReader() stream

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

• آیا می‌دانستید؟ Did you know?

• تست کد و بررسی مشکلات Streams API Testing our code and the problems with the Streams API

• تفاوت‌های کاربردی بین Streams API مدرن و FileReader The "practical" differences between using the modern Streams API vs FileReader

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

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

• فایل‌های نهایی Ending files

• جمع‌بندی Streams API Streams API

بخش پایانی Outro

• بخش پایانی Outro