آموزش پروتکل WebSockets - بسیار آموزنده - 2024

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

معرفی WebSockets WebSockets Introduction

• معرفی بخش Section intro

• نحوه برخورد با این دوره How to approach this course

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

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

• TCP - آیا می دانستید؟ TCP - did you know?

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

• Wireshark چیست؟ What is Wireshark

• HTTP - آیا می دانستید؟ HTTP - did you know?

• آژاکس و دنباله دار AJAX and Comet

• معرفی WebSockets WebSockets Introduction

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

• RFC - آیا می دانستید؟ RFCs - did you know?

• WebSockets - آیا می دانستید؟ WebSockets - did you know?

• مشخصات WebSockets WebSockets Specification

• WebSockets - موارد استفاده WebSockets - use cases

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

• بسته ها چیست؟ What are packets?

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

• CURL cURL

• HTTP در مقابل WebSockets HTTP vs WebSockets

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

• MTU و حداکثر اندازه بخش MTU and Maximum Segment Size

• WebSocket ها به صورت مجزا کار نمی کنند WebSockets don't work in isolation

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

• آی پی - آیا می دانستید IP - did you know

• WebSocket Fundamentals - آزمون WebSocket Fundamentals - Quiz

شبکه وب سوکت WebSocket Networking

• معرفی دست دادن TCP TCP handshake introduction

• TCP - منظور از اتصال مداوم چیست؟ TCP - what is meant by a persistent connection?

• TCP - آیا می دانستید؟ TCP - did you know?

• بررسی دست دادن TCP در Wireshark Examining the TCP handshake in Wireshark

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

• خلاصه - مدل TCP/IP Summary - TCP/IP model

• لایه 1: لایه کاربردی Layer 1: Application Layer

• لایه 1: خلاصه لایه برنامه Layer 1: Application Layer Summary

• لایه 2: لایه حمل و نقل: پورت ها Layer 2: Transport Layer: Ports

• تفاوت بین TCP و UDP؟ Difference between TCP and UDP?

• پورت چیست؟ What is a port?

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

• لایه 2: لایه انتقال: بخش ها و هدرها Layer 2: Transport Layer: Segments and Headers

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

• تفاوت بین IP و پورت چیست؟ What is the different between an IP and a Port?

• داده ها از طریق اینترنت همیشه ورودی های الکتریکی هستند Data over the internet is always electrical inputs

• اگر از 2 تب در مرورگر خود به همان وب سایت دسترسی پیدا کنید چه؟ What if you access the same website from 2 tabs in your browser?

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

• آدرس های مک - آیا می دانستید؟ MAC addresses - did you know?

• چرا وقتی یک آدرس IP داریم یک آدرس MAC داشته باشیم؟ Why have a MAC address when we have an IP address?

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

• فرآیند انتقال داده پیچیده است The data transport process is complex

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

• سوکت ها در مقابل وب سوکت ها Sockets vs WebSockets

• Sockets vs WebSockets Recap Sockets vs WebSockets Recap

• شبکه (بسته ها، سوکت ها و غیره) Networking (Packets, Sockets, etc)

تست مبانی WebSockets WebSockets Fundamentals Test

• اصول پروتکل WebSocket WebSocket Protocol Fundamentals

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

• بخش معرفی Section Intro

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

• فرآیند دست دادن HTTP The HTTP handshake process

• سوکت های وب از طریق HTTP/1.1، HTTP/2 و HTTP/3 WebSockets over HTTP/1.1, HTTP/2 and HTTP/3

• WebSocket API در Dev Console و TCP handshake The WebSocket API in the Dev Console and the TCP handshake

• WebSocket یک API مبتنی بر رویداد است WebSocket is an event driven API

• هدرهای HTTP انتها به انتها در مقابل هاپ به هاپ End-to-end vs hop-by-hop HTTP headers

• معکوس پروکسی ها و وب سوکت ها Reverse Proxies & WebSockets

• هدرهای ارتقا و اتصال توضیح داده شده است The Upgrade and Connection headers explained

• هدرهای ارتقا و اتصال با هم کار می کنند Upgrade and Connection headers work together

• هدر ارتقا - آیا می دانستید؟ Upgrade header - did you know?

• Sec-WebSocket-*** مقدمه سرصفحه ها Sec-WebSocket-*** Headers Introduction

• چرا دست دادن WebSockets از هدرهایی استفاده می کند که با Sec- شروع می شوند؟ Why does the WebSockets handshake use headers that start with Sec- ?

• Sec-WebSocket-Key Header Sec-WebSocket-Key Header

• شما نمی توانید WebSockets را شبیه سازی کنید You can't emulate WebSockets

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

• کلمات پایانی در Sec-WebSocket-Key Final words on Sec-WebSocket-Key

• Sec-WebSocket-*** Headers - آیا می دانستید؟ Sec-WebSocket-*** Headers - Did you Know?

• Base64 Encoding - مقدمه Base64 Encoding - intro

• Base64 Encoding - خلاصه و مثال Base64 Encoding - Summary and Example

• توضیح در Base64 Clarification on Base64

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

• Sec-WebSocket-Accept Sec-WebSocket-Accept

• Sec-WebSocket-Accept - چرا سرور به هش آن توجه می کند؟ Sec-WebSocket-Accept - why does the server heed to hash it?

• آیا WebSocket ها واقعا در سطح برنامه هستند؟ Are WebSockets really at the application level?

• Sec-WebSocket-Protocol Sec-WebSocket-Protocol

• Sec-WebSocket-Version & Sec-WebSocket-Extensions Sec-WebSocket-Version & Sec-WebSocket-Extensions

• WebSocket API در مقابل سفارشی WebSocket API vs Custom

• خلاصه بخش & Outro Section Summary & Outro

• هدرهای WebSocket: ایجاد یک اتصال WebSocket Headers: Establishing A Connection

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

• بخش معرفی Section Intro

• WebSocket API The WebSocket API

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

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

• HTML و CSS The HTML and CSS

• WebSocket نسخه ی نمایشی - ساخت HTML WebSocket Demo - building the HTML

• نسخه نمایشی WebSocket - ساخت CSS WebSocket Demo - building the CSS

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

• کد سرور WebSocket - قسمت 1 - ایجاد سرور HTTP WebSocket Server Code - Part 1 - Creating the HTTP server

• کد سرور WebSocket - قسمت 2 - وارد کردن ماژول "websocket" با استفاده از NPM WebSocket Server Code - Part 2 - Importing the "websocket" module using NPM

• کد سرور WebSocket - قسمت 3 - چرخش سرور WebSocket ما WebSocket Server Code - Part 3 - Spinning up our WebSocket server

• WebSockets بر روی سرور WebSockets on the server

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

• چرا باید از کلمه کلیدی "جدید" برای باز کردن اتصال WebSocket استفاده کنید Why do you have to use the "new" keyword to open up a WebSocket connection

• WebSocket ها با HTTP سازگار هستند WebSockets are HTTP compatible

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

• خلاصه در WebSockets در مقابل HTTP Recap on WebSockets vs HTTP

• WebSocket API - binaryType و bufferedAmount WebSocket API - binaryType and bufferedAmount

• WebSocket API - افزونه ها و پروتکل ها WebSocket API - extensions and protocols

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

• ایجاد یک اتصال WebSocket Establishing a WebSocket connection

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

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

• شی رویداد onopen نسبتاً ساده است The onopen event object is rather simple

• استفاده از رویداد 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

• رویداد نزدیک - آیا می دانستید؟ The Close event - did you know?

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

• رویداد خطا - آیا می دانستید؟ The Error event - did you know?

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

• شی رویداد خطا و جزئیات بسته شدن مبهم طراحی شده اند The error event object, and closure details are designed to be vague

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

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

• WebSocket API ساده است The WebSocket API is simplistic

• رابط CloseEvent و MessageEvent The CloseEvent and MessageEvent interface

• خلاصه ای از رابط های CloseEvent و MessageEvent Summary of CloseEvent and MessageEvent interfaces

• تایم اوت Timeout

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

• ارسال داده با استفاده از WebSockets Sending data using WebSockets

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

• دست دادن پایانی The closing handshake

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

• آرگومان "reason" برای متد ()close The "reason" argument to the close() method

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

• پروتکل WebSocket در مقابل WebSocket API WebSocket protocol vs WebSocket API

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

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

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

• سخنرانی سرگرم کننده - بررسی کد WebSocket سرور زنده Fun lecture - examining Live Server WebSocket code

• Outro و کد پروژه Outro and project code

• WebSockets API Quiz WebSockets API Quiz

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

• معرفی بخش Section intro

• HTTP/1.1 چگونه داده ها را مدیریت می کند How HTTP/1.1 handles data

• معنی \r\n Meaning of \r\n

• HTTP/1.1 هیچ مفهومی از "فریم" ندارد HTTP/1.1 has no concepts of "frames"

• HTTP/2 چگونه داده ها را مدیریت می کند How HTTP/2 handles data

• جوک دودویی - متوجه شدید؟ Binary joke - do you get it?

• گرفتن کلیدهای SSL/TLS و پیکربندی Wireshark برای گرفتن ترافیک HTTP/2 Capturing SSL/TLS keys and configuring Wireshark to capture HTTP/2 traffic

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

• کد پروژه Project code

• WebSocket ها می توانند از HTTP/2 استفاده کنند WebSockets can use HTTP/2

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

• فریم های دودویی HTTP/2 - یک "FRAME" چگونه به نظر می رسد HTTP/2 Binary Frames - What a "FRAME" looks like

• فریم ها - HTTP/1.1 و HTTP/2 و WebSockets Frames - HTTP/1.1 and HTTP/2 and WebSockets

• قاب های WebSocket - 6 نوع WebSocket frames - the 6 types

• بررسی یک قاب بسته WebSocket - opcode 0x8 Examining a WebSocket closure frame - opcode 0x8

• بررسی یک قاب پینگ WebSocket - کد عملیاتی 0x9 Examining a WebSocket ping frame - opcode 0x9

• WebSockets - پینگ و پنگ WebSockets - ping & pong

• اندازه هدر قاب WebSocket - حداقل و حداکثر WebSocket frame header size - min and max

• تکه تکه شدن داده های WebSocket WebSocket data fragmentation

• نینجا نقدی شوید Become a review ninja

• تکه تکه شدن و جریان Fragmentation and streaming

• سوال: بدون هیچ شناسه جریان، WebSockets چگونه تحویل منظم را تضمین می کند Question: with no stream ID's, how does WebSockets guarantee orderly delivery

• بیت های رزرو شده WebSocket برای چه مواردی استفاده می شوند؟ What are WebSocket Reserved Bits used for

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

• چرا تمایز بین قاب های کنترلی و غیر کنترلی مهم است؟ Why is the distinction between control and non-control frames important?

• بیت نقاب Masking Bit

• پوشش - مقدمه Masking - introduction

• WebSocket RFC در مورد ماسکینگ چه می گوید؟ What does the WebSocket RFC say about masking?

• نمونه ای از مسمومیت کش Example of cache poisoning

• چرا ماسک کردن از مسمومیت کش جلوگیری می کند؟ Why masking prevents cache poisoning

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

• پروتکل WebSocket اعداد 126 و 127 را به عنوان پرچم رزرو کرده است WebSocket protocol has reserved the numbers 126 and 127 as flags

• مثال - اگر حجم بار 128 بایت باشد چه؟ EXAMPLE - what if payload is 128 bytes in length?

• حداکثر اندازه یک بار قاب WebSocket Maximum size of a WebSocket frame payload

• محدودیت های عملی در اندازه قاب WebSocket Practical limitations on WebSocket frame size

• اگر یک فریم WebSocket بزرگتر از حداکثر اندازه بخش TCP باشد چه؟ What if a WebSocket frame is LARGER than the TCP maximum segment size?

• هدر طول بار محموله از نظر اندازه متغیر است Payload length header is variable in size

• HTTP در مقابل WebSockets HTTP vs WebSockets

• WebSocket ها حالت دار هستند WebSockets are stateful

• WebSockets از پخش پشتیبانی می کند WebSockets support broadcasting

• Outro Outro

• لینک ساخت سرور WebSocket The link to building a WebSocket server

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

تست مفاهیم پیشرفته WebSockets WebSockets Advanced Concepts Test

• تست پیشرفته WebSocket WebSocket Advanced Test

AJAX، نظرسنجی، رویدادهای ارسال شده توسط سرور و CORS AJAX, Polling, Server-Sent Events and CORS

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

• محدودیت در اتصالات همزمان WebSocket ONE مشتری می تواند به سرور WS ایجاد کند Limits on concurrent WebSocket connections ONE client can make to a WS server

• محدودیت در اتصالات WebSocket همزمان که یک سرور می تواند باز کند Limits on concurrent WebSocket connections a SERVER can open

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

• محدودیت در نظرسنجی کوتاه بیش از حد Limitations on excessive short-polling

• Long Polling - جایگزینی برای WebSockets Long Polling - an alternative to WebSockets

• WebSockets برای جایگزینی نظرسنجی در نظر گرفته شده است WebSockets are intended to replace polling

• رویدادهای ارسال شده توسط سرور - جایگزینی برای WebSockets Server-Sent Events - an alternative to WebSockets

• Server-Sent-Events در مقابل نظرسنجی طولانی HTTP Server-Sent-Events vs HTTP long polling

• رویدادهای ارسال شده توسط سرور در مقابل WebSockets Server-Sent Events vs WebSockets

• پیشگفتار: روش CONNECT چیست Preface: what is the CONNECT method

• سوکت های وب از طریق HTTP/2 WebSockets over HTTP/2

• خلاصه ای از نحوه بوت استرپ WebSocket ها از طریق HTTP/2 Summary of how to bootstrap WebSockets over HTTP/2

• چگونه مرورگرها و سرورها تصمیم می گیرند از HTTP/2 استفاده کنند How browsers and servers decide to use HTTP/2

• آیا HTTP/2 جایگزین WebSocket ها می شود؟ Does HTTP/2 replace WebSockets

• HTTP/2 هنوز یک مدل درخواست/پاسخ است HTTP/2 is still a request/response model

• وب سوکت ها از طریق HTTP/3 WebSockets over HTTP/3

• چگونه مرورگرها و سرورها تصمیم می گیرند از HTTP/3 استفاده کنند How browsers and servers decide to use HTTP/3

• WebSocket API ارتقاء به HTTP/2 و HTTP/3 را برای شما انجام خواهد داد. The WebSocket API will handle the upgrade to HTTP/2 and HTTP/3 for you

• آیا HTTP/3 جایگزین WebSocket ها می شود؟ Does HTTP/3 replace WebSockets?

• CORS و WebSockets CORS and WebSockets

• مقیاس بندی WebSockets Scaling WebSockets

• مقیاس بندی WebSockets یک کار بی اهمیت نیست Scaling WebSockets is no trivial task

• مقیاس بندی، CORS، AJAX، رای گیری و رویدادهای ارسال شده توسط سرور Scaling, CORS, AJAX, Polling and Server-Sent Events

Outro Outro

• Outro Outro

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