diff --git a/presentation.md b/docs/presentation.md similarity index 62% rename from presentation.md rename to docs/presentation.md index a13028a..0e5c350 100644 --- a/presentation.md +++ b/docs/presentation.md @@ -1,14 +1,17 @@ # ارائه: چت‌روم ساده با WebSocket -## اسلاید ۱ - عنوان پروژه +## عنوان پروژه + +![معماری چت‌روم](./screenshots/home.png) **چت‌روم ساده با WebSocket** این پروژه برای درس مهندسی اینترنت آماده شده است و هدف آن نمایش ارتباط بلادرنگ بین مرورگر و سرور با استفاده از FastAPI و WebSocket است. -![معماری چت‌روم](docs/screenshots/home.png) -## اسلاید ۲ - چرا WebSocket به وجود آمد؟ +## چرا WebSocket به وجود آمد؟ + +![تاریخچه WebSocket](./images/websocket-history.svg) وب در ابتدا بیشتر بر پایه مدل درخواست و پاسخ HTTP کار می‌کرد. مرورگر یک درخواست می‌فرستاد، سرور پاسخ می‌داد و ارتباط همان‌جا تمام می‌شد. @@ -16,9 +19,8 @@ قبل از WebSocket معمولا از روش‌هایی مثل polling و long polling استفاده می‌شد. این روش‌ها قابل استفاده بودند، اما باعث تکرار زیاد درخواست‌های HTTP و مصرف منابع بیشتر می‌شدند. -![تاریخچه WebSocket](docs/images/websocket-history.svg) -## اسلاید ۳ - تاریخچه کوتاه +## تاریخچه کوتاه - **HTTP کلاسیک:** برای دریافت صفحه و ارسال فرم مناسب بود، اما برای ارسال لحظه‌ای داده از سرور به مرورگر طراحی نشده بود. - **AJAX و polling:** امکان درخواست‌های پس‌زمینه را فراهم کرد، ولی مرورگر همچنان باید مرتب از سرور سوال می‌پرسید. @@ -26,7 +28,9 @@ - **استاندارد WebSocket:** در RFC 6455 به عنوان یک پروتکل استاندارد برای ارتباط دوطرفه و پایدار معرفی شد. - **کاربردهای امروز:** چت، بازی آنلاین، داشبورد زنده، ویرایش هم‌زمان، اعلان‌ها و کنترل تجهیزات IoT. -## اسلاید ۴ - WebSocket چگونه از HTTP شروع می‌شود؟ +## WebSocket چگونه از HTTP شروع می‌شود؟ + +![فرایند ارتقای HTTP](./images/websocket-handshake.svg) WebSocket از ابتدا یک ارتباط جدا از HTTP نیست. ارتباط با یک درخواست HTTP معمولی شروع می‌شود که از سرور می‌خواهد پروتکل را تغییر دهد. @@ -46,9 +50,8 @@ Sec-WebSocket-Key: ... بعد از این پاسخ، همان اتصال TCP دیگر مثل HTTP عادی استفاده نمی‌شود و داده‌ها در قالب فریم‌های WebSocket جابه‌جا می‌شوند. -![فرایند ارتقای HTTP](docs/images/websocket-handshake.svg) -## اسلاید ۵ - بعد از ارتقا چه اتفاقی می‌افتد؟ +## بعد از ارتقا چه اتفاقی می‌افتد؟ بعد از تبدیل ارتباط: @@ -59,9 +62,11 @@ Sec-WebSocket-Key: ... به همین دلیل به WebSocket ارتباط **دوطرفه کامل** گفته می‌شود. -## اسلاید ۶ - جایگاه WebSocket در مدل OSI +## جایگاه WebSocket در مدل OSI -WebSocket معمولا در لایه کاربرد بررسی می‌شود، چون برنامه تصمیم می‌گیرد پیام‌ها چه معنایی دارند. +![جایگاه WebSocket در مدل OSI](./images/websocket-osi.svg) + +وب‌سوکت معمولا در لایه کاربرد بررسی می‌شود، چون برنامه تصمیم می‌گیرد پیام‌ها چه معنایی دارند. در یک ارتباط معمول بین مرورگر و سرور: @@ -71,9 +76,8 @@ WebSocket معمولا در لایه کاربرد بررسی می‌شود، چ - IP بسته‌ها را بین میزبان‌ها مسیریابی می‌کند. - Ethernet یا Wi-Fi داده را روی شبکه واقعی حمل می‌کند. -![جایگاه WebSocket در مدل OSI](docs/images/websocket-osi.svg) -## اسلاید ۷ - نگاه شبکه‌ای ساده +## نگاه شبکه‌ای ساده مسیر داده در این پروژه را می‌توان این‌طور ساده کرد: @@ -88,7 +92,9 @@ WebSocket معمولا در لایه کاربرد بررسی می‌شود، چ کد پروژه بیشتر در بالاترین بخش این زنجیره کار می‌کند. پیام JSON ساخته می‌شود، از طریق WebSocket فرستاده می‌شود و جزئیات انتقال در لایه‌های پایین‌تر توسط سیستم‌عامل و شبکه انجام می‌شود. -## اسلاید ۸ - معماری پروژه +## معماری پروژه + +![معماری پروژه](./images/chatroom-architecture.svg) این پروژه سه بخش اصلی دارد: @@ -98,67 +104,50 @@ WebSocket معمولا در لایه کاربرد بررسی می‌شود، چ وقتی یک کاربر پیام می‌فرستد، سرور پیام را از socket همان کاربر می‌گیرد و آن را برای همه socketهای همان اتاق پخش می‌کند. -![معماری پروژه](docs/images/chatroom-architecture.svg) -## اسلاید ۹ - جریان پیام در پروژه +## جریان پیام در پروژه 1. کاربر نام و اتاق را وارد می‌کند. -2. JavaScript یک شیء `WebSocket` می‌سازد. +2. جاوااسکریپت یک شیء `WebSocket` می‌سازد. 3. مرورگر درخواست HTTP Upgrade را ارسال می‌کند. -4. FastAPI اتصال WebSocket را قبول می‌کند. +4. برنامه‌ی FastAPI اتصال WebSocket را قبول می‌کند. 5. مدیر اتصال، کاربر را در لیست اتاق ذخیره می‌کند. 6. پیام به صورت JSON از مرورگر به سرور فرستاده می‌شود. 7. سرور پیام را برای کاربران همان اتاق پخش می‌کند. 8. مرورگرها پیام جدید را بدون تازه‌سازی صفحه نمایش می‌دهند. -## اسلاید ۱۰ - مزایا و معایب +## مزایا و معایب -WebSocket برای سیستم‌های بلادرنگ بسیار کاربردی است، اما برای همه صفحه‌های وب انتخاب لازم یا مناسب نیست. +![مزایا و معایب WebSocket](./images/websocket-pros-cons.svg) -![مزایا و معایب WebSocket](docs/images/websocket-pros-cons.svg) +وب‌سوکت برای سیستم‌های بلادرنگ بسیار کاربردی است، اما برای همه صفحه‌های وب انتخاب لازم یا مناسب نیست. -## اسلاید ۱۱ - مزایا -- تاخیر کم، چون ارتباط باز می‌ماند. -- امکان ارسال فوری داده از سمت سرور به مرورگر. -- مناسب برای چت، اعلان، ابزارهای همکاری، بازی و داشبورد زنده. -- کاهش سربار سرآیندهای تکراری HTTP بعد از دست‌دهی اولیه. -- مدل برنامه‌نویسی ساده برای ارتباط پیوسته و دوطرفه. ++ **مزایا** + - تاخیر کم، چون ارتباط باز می‌ماند. + - امکان ارسال فوری داده از سمت سرور به مرورگر. + - مناسب برای چت، اعلان، ابزارهای همکاری، بازی و داشبورد زنده. + - کاهش سربار سرآیندهای تکراری HTTP بعد از دست‌دهی اولیه. + - مدل برنامه‌نویسی ساده برای ارتباط پیوسته و دوطرفه. -## اسلاید ۱۲ - معایب ++ **معایب** + - اتصال‌های طولانی‌مدت از منابع سرور استفاده می‌کنند. + - مقیاس‌پذیری روی چند سرور به طراحی بیشتر نیاز دارد. + - قطع اتصال، اتصال دوباره و خطاهای شبکه باید مدیریت شوند. + - بعضی پراکسی‌ها یا دیواره‌های آتش ممکن است تنظیم درست برای WebSocket بخواهند. + - برای صفحه‌های ساده CRUD معمولا لازم نیست. -- اتصال‌های طولانی‌مدت از منابع سرور استفاده می‌کنند. -- مقیاس‌پذیری روی چند سرور به طراحی بیشتر نیاز دارد. -- قطع اتصال، اتصال دوباره و خطاهای شبکه باید مدیریت شوند. -- بعضی پراکسی‌ها یا دیواره‌های آتش ممکن است تنظیم درست برای WebSocket بخواهند. -- برای صفحه‌های ساده CRUD معمولا لازم نیست. +## برنامه اجرای دمو -## اسلاید ۱۳ - چرا پروژه ساده نگه داشته شده است؟ +1. سرور را با دستور زیر اجرا کنید: -در این پروژه عمدا ثبت‌نام، پایگاه داده، احراز هویت، تاریخچه پیام‌ها و پیچیدگی‌های استقرار اضافه نشده‌اند. +```bash +uvicorn app.main:app --reload +``` -هدف این است که رفتار اصلی WebSocket واضح دیده شود: - -- باز شدن اتصال -- ورود به اتاق -- ارسال پیام -- پخش پیام برای کاربران اتاق -- بسته شدن اتصال - -این سادگی پروژه را برای ارائه کلاسی مناسب‌تر می‌کند. - -## اسلاید ۱۴ - برنامه اجرای دمو - -1. سرور را با دستور `uvicorn app.main:app --reload` اجرا کنید. 2. برنامه را در دو تب مرورگر باز کنید. 3. در هر تب یک نام متفاوت وارد کنید. 4. هر دو کاربر وارد یک اتاق شوند. 5. از یک تب پیام ارسال کنید. 6. دریافت فوری پیام در تب دوم را نشان دهید. 7. یکی از کاربران را قطع کنید و تغییر فهرست کاربران آنلاین را نمایش دهید. - -## اسلاید ۱۵ - جمع‌بندی - -WebSocket مشکل ارتباط بلادرنگ در وب را با تبدیل یک اتصال HTTP به یک کانال پایدار و دوطرفه حل می‌کند. - -در این چت‌روم، همین مفهوم با یک بخش سرور کوچک FastAPI و یک رابط فارسی ساده نمایش داده شده است. diff --git a/docs/presentation.pdf b/docs/presentation.pdf new file mode 100644 index 0000000..ab88701 Binary files /dev/null and b/docs/presentation.pdf differ