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

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

مقدمه Introduction

• مقدمه‌ای بر نحوه ارسال فایل‌ها در شبکه Introduction to how files are sent over the wire

• اهمیت متادیتا هنگام ارسال داده در شبکه Importance of metadata when sending data over a network

• شباهت‌ها و تفاوت‌های فایل‌ها و رشته‌ها (Strings) Files and strings are the same, but different

• چرا متادیتا اهمیت دارد؟ Why metadata matters

• هدف این دوره و مزایای وب‌سوکت‌ها Goal in this course and benefits of WebSockets

• ساختار آموزشی این دوره Structure we will take in this course

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

راه‌اندازی پروژه، تنظیمات HTTP و سرور وب‌سوکت با 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

• ایجاد یک سرور Node 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 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

• ارسال مقدار نام کاربری به عنوان String به سرور وب‌سوکت Sending the username value as a String, to the WebSocket server

• چرا رویداد click هنگام فشردن Enter اجرا می‌شود؟ Why does a "click" event fire when the user hits Enter/Return?

• جلوگیری از رفرش پیش‌فرض و تست کد Preventing the default refresh, and testing our code

• چرا مرورگرها هنگام اجرای رویداد submit صفحه را رفرش می‌کنند؟ Why do browsers refresh the page when a "submit" event is fired?

• گوش دادن به رویداد message در سرور وب‌سوکت با استفاده از Switch Listening for the "message" event on the WebSocket server using Switch

• مقدمه‌ای بر استفاده از Map برای ذخیره اتصالات Introduction to using Map to store connections

• چرا از Map استفاده می‌کنیم؟ (توضیحات مدرس) Why are we using Map, in my own words?

• بررسی موجود بودن نام کاربری و ارسال پاسخ موفقیت یا خطا 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

• نحوه عملکرد المان select How the select element works

• افزودن پویا (Dynamic) کاربران به منوی کشویی Dynamically adding users to the dropdown menu

• حذف کاربران قطع شده از Map و به‌روزرسانی المان select Removing disconnected users from our Map and updating the <select> element

• تست نهایی و به‌روزرسانی UI Final testing and updating UI

• نکات پایانی و فایل‌های پروژه Ending comments and project files

• مرور مفاهیم WebSockets WebSockets

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

• گام‌های بعدی Next steps

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

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

• نحوه محافظت مرورگرها از حریم خصوصی فایل‌ها هنگام آپلود How browsers protect your file privacy when uploading files

• استخراج فایلی که کاربر آپلود کرده است Extracting the file that the user has uploaded

• فعال‌سازی دکمه ارسال فایل و تعریف Event Listener برای کلیک Enabling the file Send button and defining a click event listener

• ارسال متادیتای فایل به سرور وب‌سوکت Sending the file metadata to the WebSocket server

• رله کردن متادیتا از سرور به گیرنده Relaying the metadata from the server, to the receiver

• سرور چگونه می‌فهمد داده ورودی باینری است یا رشته؟ How does the server know if the incoming data is binary or a string?

• دریافت متادیتای فایل در سمت کلاینت (توسط گیرنده) Receiving the file metadata on the client (by the receiver)

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

• نحوه عملکرد FileReader API How does the FileReader API work

• تنظیم مقادیر اولیه برای المان progress در HTML Setting up the initial values for the HTML <progress> element

• مشاهده عملیات خواندن فایل در کنسول و شیء ProgressEvent Viewing the file read operation in the console, and the ProgressEvent object

• محدودیت‌های مرورگر در اندازه تکه‌ها (Chunk Sizes) Browsers have limits on chunk sizes

• نحوه ایجاد فایل‌های تست (Dummy Files) در Command Prompt How to create on-demand dummy files in the command prompt

• تفاوت‌های مشاهده شده در فایل‌های ۲ گیگابایتی و ۵ گیگابایتی Discrepancy between 2gb and 5gb file

• روش ایجاد فایل‌های تست برای ویندوز و مک How to create dummy files for testing (command prompts for windows and mac)

• نحوه نمایش اعداد در کامپیوترها How computers view numbers

• استفاده از متد slice() برای خواندن تکه‌ای از فایل Using the slice() method to read a chunk of a file

• تعریف اندازه هر تکه برای خواندن Defining the size of each chunk to read

• خواندن و ارسال یک تکه (Chunk) Reading one chunk and sending one chunk

• خواندن کل فایل با FileReader و تست کد Reading the entire file with the FileReader, & testing our code

• رفع خطای سرور در مورد تجاوز تکه‌ها از حد مجاز Dealing with the server error of chunks exceeding maximum size limit

• مروری بر حداکثر اندازه پیام برای سرورها Recap on max message size for servers

• توقف FileReader هنگام بسته شدن اتصال وب‌سوکت Stopping the FileReader when the underlying ws 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)

• توضیح کد به زبان ساده Code explained in simple words

• تست کد و گام‌های بعدی Testing code and next steps

• رله کردن تکه‌های فایل از سرور به کلاینت Relaying file chunks from the server, to the client

• تعریف تابع گیرنده و تغییر ویژگی binaryType Defining a receiver function, and changing the binaryType property

• به‌روزرسانی المان progress و ایجاد آرایه‌ای برای ذخیره تکه‌های فایل Updating the HTML <progress> 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 حافظه جاوااسکریپت به صورت بلادرنگ Viewing the JS memory heap in real time

• درک مصرف حافظه و ذخیره‌ساز Blob URL (درس پیشرفته) Understanding memory usage and URL Blob storage (advanced lecture)

• چرا حافظه داخلی به حدود ۲ برابر اندازه فایل می‌رسد؟ Why does internal memory heap spike to roughly 2x file size?

• ابطال (Revoking) لینک Blob پس از دانلود Revoking the Blob URL after download

• امکان لغو ارسال فایل توسط کاربر Allowing the user to abort a file send

• تست نهایی کد Testing our code

• فایل‌های کد Code files

• مرور FileReader API FileReader API

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

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

• فرآیند ۳ مرحله‌ای خواندن فایل با Streams API Reading a file with the Streams API is a 3 step process

• پیاده‌سازی فرآیند ۳ مرحله‌ای برای خواندن فایل 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

• چرا از کلمه کلیدی break استفاده می‌کنیم و نه return؟ Why are we using the JavaScript keyword "break" and not "return"?

• استفاده از ویژگی value برای ارسال تکه‌های فایل به سرور WS Using the "value" property to send chunks of file data to our WS server

• تست کد و مشاهده اندازه تکه‌های بازگردانده شده توسط Streams API Testing our code and viewing the chunk sizes returned by the Streams API

• اصلاحات نهایی UI برای فرستنده Final UI tweak for the sender

• فایل‌های نهایی پروژه Final project files

• مرور Streams API Streams API

جمع‌بندی و پایان Outro

• جمع‌بندی و خداحافظی Outro