آموزش یک سرور WebSocket با Node.js بسازید - بدون کتابخانه - 2024

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

مقدمه Introduction

• مقدمه Introduction

• برای ساخت سرور WebSocket، باید با RFC سازگار باشیم To build a WebSocket server, we need to be RFC compliant

• ساختار دوره Course Structure

• امور را در دستان خود بگیرید. Take matters into your own hands.

• مبانی راه اندازی یک سرور WebSocket Foundations of setting up a WebSocket server

ایجاد سرور NodeJS Creating a NodeJS server

• هدف سرور WebSocket: ایجاد یک وب سرور HTTP WebSocket Server Goal: Create a HTTP web-server

• فایل های پروژه: شروع HTML و CSS Project Files: starting HTML and CSS

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

• راه اندازی سرور HTTP ما Setting up our HTTP server

• ایجاد ماژول های سفارشی و تکمیل سرور HTTP Creating custom modules and finishing off the HTTP server

• پیاده سازی مدیریت خطاهای اساسی Implementing basic error handling

• استفاده از "Run and Debug" برای بررسی حلقه forEach Using "Run and Debug" to examine the forEach loop

• تست کد رسیدگی به خطای ما Testing our error handling code

• فایل های پروژه: سرور HTTP Project Files: HTTP server

• ایجاد وب سرور Creating a web server

ایجاد یک اتصال وب سوکت Establishing a WebSocket Connection

• هدف سرور WebSocket: ایجاد یک اتصال WebSocket WebSocket Server Goal: Establish a WebSocket Connection

• استفاده از شنونده رویداد "ارتقا" برای دریافت 3 شی مهم Using the 'upgrade' event listener to receive 3 important object

• بررسی شی درخواست در ترمینال Examining the request object in the terminal

• خواندن سرصفحه های درخواست دست دادن باز مشتری Reading the client's opening handshake request headers

• ارسال یک پاسخ "400 درخواست بد" در صورت عدم موفقیت هدرهای دست دادن مشتری Sending a "400 Bad Request" response if the client handshake headers fail

• شی سرصفحه پاسخ سرور را ایجاد کنید Generate the server response headers object

• استخراج Sec-WebSocket-Key و استفاده از ماژول رمزنگاری Extracting the Sec-WebSocket-Key and using the crypto module

• تایم اوت SHA-hashing و ماژول رمزنگاری چیست؟ Timeout! What is SHA-hashing and the crypto module?

• مقدار Sec-WebSocket-Accept را ایجاد کنید و هدرها را برای مشتری ارسال کنید Generate the Sec-WebSocket-Accept value and send back headers to the client

• آزمایش کد ما و باز کردن یک اتصال WebSocket معتبر Testing our code and opening up a valid WebSocket connection

• خلاصه Summary

• فایل های پروژه: ایجاد یک اتصال WebSocket Project Files: Establishing a WebSocket connection

• ایجاد یک اتصال وب سوکت Establishing a WebSocket Connection

دریافت داده های WebSocket Receiving WebSocket Data

• هدف سرور WebSocket: استخراج داده های Payload WebSocket Server Goal: Extract Payload Data

• تنظیم فایل ما برای هدف بعدی Setting up our file for the next goal

• شی سوکت از کلاس stream.Duplex به ارث می برد The socket object inherits from the stream.Duplex class

• شی سوکت یک جریان دوبلکس است که به ما امکان می دهد به تکه ها گوش دهیم The socket object is a duplex stream, allowing us to listen for chunks

• تعریف مدیریت رویداد داده ما Defining our data event handler

• برش سریع - اضافه کردن شنونده رویداد "پایان" به شی سوکت ما Quick cut - adding the 'end' event listener to our socket object

• تابع processBuffer() را تعریف کنید Define the processBuffer() function

• ساختار فریم باینری WebSocket The WebSocket binary frame structure

• کدگذاری تابع حلقه مدیریت وظیفه Coding the task management looping function

• 2 بایت اول داده را از قاب داده WebSocket استخراج کنید Extract the first 2 bytes of data from the WebSocket data frame

• بافرها چیست؟ What are Buffers?

• بافرها اجباری هستند Buffers are mandatory

• چرا حرف "a" به صورت 7 بایت ارسال می شود؟ Why is the letter "a" sent as 7 bytes?

• استفاده از ابزار Debugger برای تجزیه و تحلیل کد Using the Debugger tool to analyze code

• استخراج بیت FIN Extracting the FIN bit

• عملگرهای بیتی Bitwise operators

• استخراج اطلاعات MASK، OPCODE و LENGTH اولیه Extracting the MASK, OPCODE and initial LENGTH information

• مراحل بعدی Next steps

• تنظیم کد برای استخراج جزئیات طول بار Setting up code to extract the payload length details

• 3 دسته از طول بار The 3 categories of payload lengths

• جمع بندی طول بار محموله Payload length recap

• محاسبه طول بار Calculating the payload length

• خلاصه Summary

• تفکیک متد getLength(). Breakdown of the getLength() method

• متد readUint16BE(). The readUInt16BE() method

• بررسی طول بار Payload length checks

• مراحل بعدی Next Steps

• کلید Masking را استخراج کنید Extract the Masking Key

• مراحل بعدی Next steps

• متد ()getPayload را تعریف کنید Define the getPayload() method

• بررسی اینکه آیا به تکه‌های داده اضافی نیاز داریم یا خیر Checking for whether we need additional chunks of data

• استخراج یک فریم کامل از داده ها (ماسک) Extract one full frame of data (masked)

• چرا از متد _consumeHeader() استفاده نکردم؟ Why did I not use the _consumeHeader() method?

• برداشتن نقاب محموله قاب Unmasking the frame payload

• عملوند مدول چیست؟ What is the modulus operand

• یک آرایه قطعات پایدار ایجاد کنید و فریم های بیشتری را بررسی کنید (بررسی بیت FIN) Create a persistent fragments array and check for more frames (FIN bit check)

• چرا آرایه قطعه داریم؟ Why have a fragments array?

• بارهای کوچک - استفاده از دیباگر برای تجزیه و تحلیل منطق SMALL payloads - Using the debugger to analyze logic

• رفع خطا در متد ()consumePayload ما Fixing the error in our consumePayload() method

• اضافه کردن یک دکمه از قبل به HTML Adding a prepopulate button to the HTML

• MEDIUM Payloads - استفاده از دیباگر برای تجزیه و تحلیل منطق MEDIUM Payloads - Using the debugger to analyze logic

• چرا از readUint16BE() استفاده کردم Why did I use readUInt16BE()

• بارهای بزرگ: قسمت 1 از 3. درک منطق getLength(). LARGE Payloads: Part 1 of 3. Understanding getLength() logic

• BigInt چیست؟ What is BigInt?

• تکه ها، فریم ها و پیام ها Chunks, Frames and Messages

• بارهای بزرگ: قسمت 2 از 3. در انتظار تکه های اضافی LARGE Payloads: Part 2 of 3. Waiting for additional chunks

• بارهای بزرگ: قسمت 3 از 3. پردازش کل محموله به قطعات _ LARGE Payloads: Part 3 of 3. Processing the entire payload into _fragments

• نظرات را بهبود می بخشد و بررسی های Opcode را اضافه می کند Improvements comments and adding opcode checks

• پیشرفته - تغییر اندازه تکه بین دیباگر در مقابل محیط زنده Advanced - chunk size variation between debugger vs live environment

• بهبود متد _getInfo() ما Improving our _getInfo() method

• فایل های پروژه: استخراج داده های Payload Project Files: Extract Payload Data

• دریافت داده های WebSocket Receiving WebSocket data

ارسال داده های WebSocket Sending WebSocket Data

• هدف سرور WebSocket: ارسال یک پیام WebSocket WebSocket Server Goal: Send A WebSocket Message

• آماده سازی فایل های پروژه برای ارسال داده ها به مشتری Getting project files ready to send data to the client

• ایجاد طرحی از فریم ارسال Creating a blueprint of the sending frame

• محاسبه اندازه فیلد هدر با طول متغیر Calculating the size of the variable-length header field

• هدرهای فریم با اندازه متغیر در WebSockets Variable-Sized Frame Headers in WebSockets

• طرح بافر فریم باینری را ایجاد کنید Create the binary frame buffer blueprint

• ایجاد اولین بایت فریم Creating the first byte of the frame

• چرا انتخاب کردم که opcode را روی باینری تنظیم کنم Why did I choose to set opcode to BINARY

• عملگرهای شیفت بیتی Bitwise shift operators

• هدر فریم را با داده پر کنید Populate the frame header with data

• ارسال فریم برای مشتری Sending the frame to the client

• آزمایش اینکه آیا مشتری فریم را دریافت کرده است یا خیر Testing whether the client received the frame

• حباب - آیا می دانستید؟ Blobs - did you know?

• ارسال داده به کلاینت از طریق متد write(). Sending data to the client via the write() method

• ایجاد تابع reset() Creating a reset() function

• استفاده از ابزار دیباگر برای بررسی کد Using debugger tool to examine code

• WebSocket API چگونه تقسیم بندی را مدیریت می کند How does the WebSocket API handle fragmentation

• نمایش پیام WebSocket در سمت سرویس گیرنده Displaying the WebSocket message on the client-side

• چرا از رابط FileReader استفاده کردم؟ Why did I use the FileReader interface?

• فایل های پروژه: ارسال داده ها Project Files: Sending Data

• ارسال داده های WebSocket Sending WebSocket Data

پاسخ به قاب بسته شدن Responding to a closure frame

• هدف سرور WebSocket: ارسال و دریافت یک قاب بسته WebSocket Server Goal: Send & Receive A Closure Frame

• تنظیم کد پروژه و تعریف مینی هدف ما Setting up project code and defining our mini-goal

• بستن دست دادن Closing handshake

• استخراج بدنه (کد بستن و دلیل) قاب بسته Extracting the body (closure code and reason) of the close frame

• هر دو همتا باید یک قاب بسته ارسال کنند Both peers have to send a close frame

• بستن ساختار قاب Close Frame Structure

• بافر محموله را برای قاب بسته بسازید Construct the payload buffer for the close frame

• کدهای بسته شدن Closure codes

• تکمیل و ارسال فریم بسته نهایی به مشتری Completing and sending the final close frame back to the client

• تست کد ما Testing our code

• استفاده از Wireshark برای تسلط بر فرآیند بسته شدن TCP Using Wireshark to master the TCP closure process

• بررسی نوع داده «پینگ» و «پنگ» و محموله‌های بزرگ‌تر از حداکثر اندازه Checking for "ping" and "pong" data type, and payloads larger than max size

• پینگ و پنگ Ping and Pong

• پینگ و پوینگ در مقابل TCP Keepalive Ping & Poing vs TCP Keepalive

• استخراج پاسخ سرور از شی CloseEvent Extracting the server response from the CloseEvent object

• ارسال یک قاب بسته در صورتی که بیت ماسک به درستی توسط مشتری تنظیم نشده باشد Sending a closure frame if the masking bit is not set correctly by the client

• بررسی کنید که آیا مشتری کد بسته شدن را ارسال کرده است یا خیر Check whether client has sent a closure code

• نمایش پیام بسته شدن پیش فرض (برای رویداد بسته شدن عادی) Displaying default closure message (for normal closure event)

• رفع نظرات و حذف متن پاسخ سرور هنگام اتصال جدید Fixing comments and removing server response text when new connection is made

• اعتبار سنجی سمت سرور برای متن Server side validation for text

• رفع مشکل refresh که سرور را از بین می برد Fixing the refresh issue killing the server

• فایل های پروژه: برخورد با فریم های بسته Project Files: Dealing with Closure Frames

• بستن یک اتصال WebSocket Closing a WebSocket Connection

خروجی و مراحل بعدی Outro & next steps

• مراحل بعدی Next Steps