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

مقدمه Introduction

• مقدمه‌ای بر نحوه ارسال فایل‌ها در شبکه Introduction to How Files Are Sent Over the Wire

• اهمیت متادیتا هنگام ارسال داده‌ها در شبکه Importance of Metadata When Sending Data Over a Network

• هدف این دوره و مزایای WebSockets Goal in This Course and Benefits of WebSockets

راه‌اندازی پروژه، تنظیمات HTTP و سرور WebSocket با Node.js Project Setup, HTTP Setup, and WebSocket Server Setup With Node.js

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

• نصب Node و راه‌اندازی پروژه npm Installing Node and Setting Up the npm Project

• ایجاد یک سرور HTTP نود با استفاده از Express Spin Up a Node HTTP Server Using Express

• راه‌اندازی سرور WebSocket Setting Up a WebSocket Server

• نوشتن منطق برای یک Ping/Pong ساده Writing Logic for a Simple Ping/Pong

• برقراری اتصال WebSocket از سمت کلاینت با WebSocket API مرورگر Initiating a WebSocket Connection From the Client With the Browser WebSocket API

• توضیح Ping و Pong و مشاهده آن‌ها با Wireshark Ping and Pong Explained and Seen With Wireshark

• راه‌اندازی پوشه Modules و ایجاد فایل uiUtils.js Setting Up a Modules Folder and Creating a uiUtils.js File

• ارسال مقدار نام کاربری به صورت رشته به سرور WebSocket Sending the Username Value as a String to the WebSocket Server

• جلوگیری از رفرش پیش‌فرض و تست کد Preventing the Default Refresh and Testing Our Code

• گوش دادن به رویداد Message در سرور WebSocket با استفاده از Switch Listening for the "Message" Event on the WebSocket Server Using Switch

• مقدمه‌ای بر استفاده از Map برای ذخیره اتصالات Introduction to Using Map to Store Connections

• بررسی وجود نام کاربری و ارسال پاسخ موفقیت یا شکست Checking Whether the Username Exists and Sending a Success or Failure Response

• راه‌اندازی هندلر رویداد Message در کلاینت Setting Up a "Message" Event Handler on the Client

• پخش (Broadcast) آرایه‌ای از کاربران توسط سرور به تمام کلاینت‌های متصل Server Broadcasting an Array of Users to All Connected Clients

• افزودن پویا کاربران به منوی کشویی Dynamically Adding Users to the Dropdown Menu

• حذف کاربران قطع شده از Map و به‌روزرسانی المان Removing Disconnected Users From Our Map and Updating the Element

• تست نهایی و به‌روزرسانی رابط کاربری Final Testing and Updating UI

استفاده از FileReader API برای ارسال فایل‌ها Using the FileReader API to Send Files

• فعال‌سازی المان ورودی فایل (File Input) Enable the File Input Element

• مقدمه‌ای بر امنیت فایل Introduction to File Security

• استخراج فایلی که کاربر آپلود کرده است Extracting the File That the User Has Uploaded

• فعال کردن دکمه ارسال فایل و تعریف Event Listener برای کلیک Enabling the File Send Button and Defining a Click Event Listener

• ارسال متادیتای فایل به سرور WebSocket Sending the File Metadata to the WebSocket Server

• انتقال متادیتا از سرور به گیرنده Relaying the Metadata From the Server to the Receiver

• دریافت متادیتای فایل در کلاینت (توسط گیرنده) Receiving the File Metadata on the Client (by the Receiver)

• استفاده از FileReader API Using the FileReader API

• FileReader API چگونه کار می‌کند؟ How Does the FileReader API Work?

• تنظیم مقادیر اولیه برای المان HTML Setting Up the Initial Values for the HTML Element

• مشاهده عملیات خواندن فایل در کنسول و شیء ProgressEvent Viewing the File Read Operation in the Console and the ProgressEvent Object

• محدودیت‌های مرورگرها در اندازه تکه‌های داده (Chunk Sizes) Browsers Have Limits on Chunk Sizes

• نحوه ایجاد فایل‌های Dummy در Command Prompt How to Create On-Demand Dummy Files in the Command Prompt

• استفاده از متد slice() برای خواندن تکه‌ای از فایل Using the slice() Method to Read a Chunk of a File

• تعیین اندازه هر تکه برای خواندن Defining the Size of Each Chunk to Read

• خواندن و ارسال یک تکه داده Reading One Chunk and Sending One Chunk

• خواندن کل فایل با FileReader و تست کد Reading the Entire File With the FileReader and Testing Our Code

• مدیریت خطای سرور در صورت تجاوز تکه‌ها از حد مجاز Dealing With the Server Error of Chunks Exceeding Maximum Size Limit

• توقف FileReader هنگام بسته شدن اتصال WebSocket Stopping the FileReader When the Underlying WebSocket Connection Is Closed

• مشاهده ویژگی BufferedAmount برای نظارت بر کنترل جریان Viewing the BufferedAmount Property to Monitor Flow Control

• چرا باید به ویژگی BufferedAmount نگاه کنیم؟ Why Are We Having to Look at the BufferedAmount Property?

• استفاده از حلقه While برای نظارت بر مقدار BufferedAmount Using a While Loop to Monitor the BufferedAmount Value

• پیاده‌سازی setTimeout و Promises در حلقه While (پیشرفته) Implementing setTimeout and Promises to Our While() Loop (Advanced)

• تست کد و گام‌های بعدی Testing Code and Next Steps

• انتقال تکه‌های فایل از سرور به کلاینت Relaying File Chunks From the Server to the Client

• تعریف تابع گیرنده و تغییر ویژگی binaryType Defining a Receiver Function and Changing the binaryType Property

• به‌روزرسانی المان HTML و ایجاد آرایه‌ای برای ذخیره تکه‌های فایل Updating the HTML Element and Creating an Array to Store File Chunks

• استفاده از متد URL.createObjectURL() برای ایجاد لینک دانلود فایل Using the URL.createObjectURL() Method to Create a Download Link for the File

• تست کد Testing Our Code

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

• درک مصرف حافظه و ذخیره‌سازی URL Blob (درس پیشرفته) Understanding Memory Usage and URL Blob Storage (Advanced Lecture)

• ابطال URL Blob پس از دانلود Revoking the Blob URL After Download

• امکان لغو ارسال فایل توسط کاربر Allowing the User to Abort a File Send

• تست کد Testing Our Code

استفاده از Streams API برای ارسال فایل‌ها Using the Streams API to Send Files

• Streams API چیست؟ What Is the Streams API?

• پیاده‌سازی فرآیند ۳ مرحله‌ای خواندن فایل با استفاده از Streams API Implementing the 3-Step Process for Reading a File Using the Streams API

• پیاده‌سازی بررسی‌ها و خروج از حلقه While پس از اتمام خواندن Implementing Checks and Breaking Out of the While Loop on Read Completion

• استفاده از ویژگی Value برای ارسال تکه‌های داده فایل به سرور WebSocket Using the "Value" Property to Send Chunks of File Data to Our WebSocket Server

• تست کد و مشاهده اندازه تکه‌های بازگردانده شده توسط Streams API Testing Our Code and Viewing the Chunk Sizes Returned by the Streams API

• اصلاحات نهایی رابط کاربری برای فرستنده Final UI Tweak for the Sender

بخش پایانی Outro

• بخش پایانی Outro