آموزش تسلط بر پروتکل WebSocket: ساخت اپلیکیشن‌های وب Real-Time [ویدیو] - آخرین آپدیت

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

مقدمه‌ای بر وب‌سوکت‌ها WebSockets Introduction

• مقدمه بخش Section intro

• اینترنت چیست؟ What is the "internet"

• پروتکل HTTP چیست؟ What is the HTTP protocol

• استفاده از Wireshark برای اثبات پایداری TCP Using Wireshark to prove TCP is persistent

• بررسی AJAX و Comet AJAX and Comet

• مقدمه‌ای بر وب‌سوکت‌ها WebSockets Introduction

• تاریخچه و مشخصات WebSocket WebSocket history and specifications

• آیا RFCها را می‌شناسید؟ RFCs - did you know?

• موارد استفاده از وب‌سوکت‌ها WebSockets - use cases

• وب‌سوکت‌ها به عنوان یک پروتکل ارتباطی WebSockets are a communications protocol

• بررسی پروتکل HTTP با استفاده از Dev Console و CURL Examining the HTTP protocol using (1) Dev Console and (2) CURL

• مقدمه‌ای بر WebSockets، TCP و IP Introduction to WebSockets, TCP, and IP

• بررسی MTU و حداکثر اندازه سگمنت (MSS) MTU and Maximum Segment Size

• خلاصه TCP و IP Summary of TCP and IP

شبکه‌سازی در وب‌سوکت WebSocket Networking

• مقدمه‌ای بر Handshake در TCP TCP handshake introduction

• بررسی Handshake در TCP با استفاده از Wireshark Examining the TCP handshake in Wireshark

• مدل TCP/IP (مدل ۴ لایه‌ای) The TCP/IP model (4 layer model)

• لایه ۱: لایه اپلیکیشن Layer 1: Application Layer

• لایه ۲: لایه انتقال (پورت‌ها) Layer 2: Transport Layer: Ports

• مثال: ایجاد یک شماره پورت سفارشی برای برقراری اتصال Example: creating a custom port number to establish a connection

• لایه ۲: لایه انتقال (سگمنت‌ها و هدرها) Layer 2: Transport Layer: Segments and Headers

• لایه ۳: لایه اینترنت Layer 3: Internet Layer

• لایه ۴: لایه شبکه و آدرس‌های MAC Layer 4: Network Layer & MAC addresses

• استفاده از Tracert برای تحلیل Hopها و خلاصه لایه شبکه Using Tracert to analyze hops, and Network layer summary

• خلاصه: وب‌سوکت‌ها و لایه‌های شبکه Summary - WebSockets and the Network Layers

• تفاوت Sockets و WebSockets Sockets vs WebSockets

باز کردن اتصال WebSocket Opening A WebSocket Connection

• مقدمه بخش Section Intro

• باز کردن یک اتصال WebSocket Opening a WebSocket connection

• فرآیند Handshake در HTTP The HTTP handshake process

• استفاده از WebSocket API در کنسول توسعه و Handshake در TCP The WebSocket API in the Dev Console and the TCP handshake

• وب‌سوکت یک API رویداد-محور (Event-driven) است WebSocket is an event-driven API

• تفاوت هدرهای HTTP در حالت End-to-end و Hop-by-hop End-to-end vs hop-by-hop HTTP headers

• توضیح هدرهای Upgrade و Connection The Upgrade and Connection headers explained

• مقدمه‌ای بر هدرهای Sec-WebSocket Sec-WebSocket-* Headers Introduction**

• بررسی هدر Sec-WebSocket-Key Sec-WebSocket-Key Header

• محاسبه دستی Sec-WebSocket-Key Manually calculating Sec-WebSocket-Key

• نکات نهایی درباره Sec-WebSocket-Key Final words on Sec-WebSocket-Key

• مقدمه‌ای بر رمزگذاری Base64 Base64 Encoding - intro

• خلاصه و مثال از رمزگذاری Base64 Base64 Encoding - Summary and Example

• مثال جذاب: چگونه ایموجی را رمزگذاری کنیم؟ Fun Example: How to encode the rocket emoji?

• بررسی Sec-WebSocket-Accept Sec-WebSocket-Accept

• بررسی Sec-WebSocket-Protocol Sec-WebSocket-Protocol

• بررسی Sec-WebSocket-Version و Sec-WebSocket-Extensions Sec-WebSocket-Version & Sec-WebSocket-Extensions

• خلاصه بخش و جمع‌بندی Section Summary & Outro

استفاده از WebSocket API Using the WebSocket API

• مقدمه بخش Section Intro

• شیء WebSocket در کلاینت: باز کردن اتصال The client WebSocket object - opening a WebSocket connection

• معرفی و بررسی کلی پروژه Project introduction and overview

• دموی وب‌سوکت: ساختار HTML WebSocket Demo - building the HTML

• دموی وب‌سوکت: استایل‌دهی با CSS WebSocket Demo - building the CSS

• کد سرور وب‌سوکت (بخش ۱): ایجاد سرور HTTP WebSocket Server Code - Part 1 - Creating the HTTP server

• کد سرور وب‌سوکت (بخش ۲): نصب ماژول websocket با NPM WebSocket Server Code - Part 2 - Importing the "websocket" module using NPM

• کد سرور وب‌سوکت (بخش ۳): اجرای سرور WebSocket WebSocket Server Code - Part 3 - Spinning up our WebSocket server

• پروژه: برقراری اتصال با WebSocket API Project: The WebSocket API - Establishing a WebSocket connection

• سازگاری وب‌سوکت‌ها با HTTP WebSockets are HTTP compatible

• مثال: اجرای چندین اتصال همزمان در یک سرور Example: a server can run multiple socket connections simultaneously

• بررسی binaryType و bufferedAmount در WebSocket API WebSocket API - binaryType and bufferedAmount

• بررسی extensions و protocols در WebSocket API WebSocket API - extensions and protocols

• مقدمه‌ای بر ویژگی readyState Introduction to the readyState property

• کد پروژه: غیرفعال کردن دکمه و افزودن به‌روزرسانی وضعیت پویا Project code - disable button when clicked, and add dynamic status update

• پروژه: گوش دادن به رویداد OPEN Project: listen for the OPEN EVENT

• استفاده از رویداد onopen برای تغییر متون به صورت پویا Using the onopen event to change text dynamically

• مقدمه‌ای بر پیام‌ها و داده‌های WebSocket WebSocket Messages and Data - Introduction

• پروژه: گوش دادن به رویداد MESSAGE Project: listening for the MESSAGE EVENT

• استایل‌دهی به المان جدول Styling our table element

• پروژه: گوش دادن به رویداد CLOSE Project: listening for the CLOSE EVENT

• پروژه: گوش دادن به رویداد ERROR Project: listening for the ERROR EVENT

• کدهای بستن اتصال و ویژگی wasClean Closure codes and the wasClean property

• بررسی هر ۴ مقدار ویژگی readyState Examining all 4 values of the readyState property

• متدهای WebSocket API: متدهای send() و close() WebSocket API Methods - send() and close()

• بررسی رابط‌های CloseEvent و MessageEvent The CloseEvent and MessageEvent interface

• پروژه: استفاده از متد send() برای ارسال داده به سرور Project: using the send() method to send data to the server

• بستن اتصال Closing a connection

• پروژه: استفاده از متد close() برای بستن اتصال WebSocket Project: using the close() method to close the WebSocket connection

• استفاده از آرگومان reason در متد close() The "reason" argument to the close() method

• بررسی Handshake بستن اتصال در سطح TCP و WebSocket Examining the closing handshake at the TCP & WebSocket level

• چالش: بهینه‌سازی کدهای پروژه Challenge: I want you to improve project code

• راه حل: اصلاح کد پروژه برای مدیریت انواع مختلف بستن اتصال Solution: amending our project code to handle different closure types

• استفاده از switch expression برای بهبود کد Using the switch expression to improve our code

• درس جذاب: بررسی کدهای WebSocket در Live Server Fun lecture - examining Live Server WebSocket code

فریم‌های داده WebSocket WebSocket Data Frames

• مقدمه بخش Section intro

• نحوه مدیریت داده‌ها در HTTP/1.1 How HTTP/1.1 handles data

• نحوه مدیریت داده‌ها در HTTP/2 How HTTP/2 handles data

• استخراج کلیدهای SSL/TLS و تنظیم Wireshark برای ترافیک HTTP/2 Capturing SSL/TLS keys and configuring Wireshark to capture HTTP/2 traffic

• فریم‌های باینری HTTP/2: مقدمه‌ای بر نحوه مذاکره پروتکل HTTP/2 Binary Frames - Intro to how the HTTP/2 protocol is negotiated

• فریم‌های باینری HTTP/2: مقدمه‌ای بر HPACK HTTP/2 Binary Frames - Intro to HPACK

• فریم‌های باینری HTTP/2: ساختار یک FRAME HTTP/2 Binary Frames - What a "FRAME" looks like

• فریم‌های وب‌سوکت: بررسی ۶ نوع مختلف WebSocket frames - the 6 types

• بررسی فریم بستن اتصال (opcode 0x8) Examining a WebSocket closure frame - opcode 0x8

• بررسی فریم Ping (opcode 0x9) Examining a WebSocket ping frame - opcode 0x9

• اندازه هدر فریم وب‌سوکت: حداقل و حداکثر WebSocket frame header size - min and max

• قطعه‌قطعه شدن داده‌ها (Fragmentation) در وب‌سوکت WebSocket data fragmentation

• کاربرد بیت‌های رزرو شده (Reserved Bits) در وب‌سوکت What are WebSocket Reserved Bits used for

• فریم‌های کنترلی و غیر کنترلی Control and non-control frames

• بیت ماسک‌گذاری (Masking Bit) Masking Bit

• مقدمه‌ای بر Masking Masking - introduction

• مثالی از Cache Poisoning Example of cache poisoning

• بیت‌های طول Payload Payload length bits

• حداکثر اندازه Payload در یک فریم وب‌سوکت Maximum size of a WebSocket frame payload

• مقایسه HTTP و WebSockets HTTP vs WebSockets

• جمع‌بندی بخش Outro

AJAX، Polling، Server Sent Events و CORS AJAX, Polling, Server-Sent Events, and CORS

• باورهای غلط درباره اتصالات همزمان WebSocket Misconceptions about concurrent WebSocket connections

• بررسی Short Polling به عنوان جایگزین وب‌سوکت Short Polling - an alternative to WebSockets

• بررسی Long Polling به عنوان جایگزین وب‌سوکت Long Polling - an alternative to WebSockets

• بررسی Server Sent Events به عنوان جایگزین وب‌سوکت Server-Sent Events - an alternative to WebSockets

• اجرای WebSockets روی HTTP/2 WebSockets over HTTP/2

• آیا HTTP/2 جایگزین وب‌سوکت‌ها می‌شود؟ Does HTTP/2 replace WebSockets?

• اجرای WebSockets روی HTTP/3 WebSockets over HTTP/3

• بررسی CORS و وب‌سوکت‌ها CORS and WebSockets

• مقیاس‌پذیری وب‌سوکت‌ها Scaling WebSockets

جمع‌بندی نهایی Outro

• جمع‌بندی نهایی Outro