244 lines
12 KiB
HTML
244 lines
12 KiB
HTML
<!doctype html>
|
||
<html lang="fa" dir="rtl">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>ارائه WebSocket و Socket Programming</title>
|
||
<link rel="stylesheet" href="styles.css" />
|
||
</head>
|
||
<body>
|
||
<main class="deck" id="deck">
|
||
<section class="slide active title-slide" data-title="شروع">
|
||
<div class="kicker">پروژه مهندسی اینترنت</div>
|
||
<h1>چتروم ساده با WebSocket</h1>
|
||
<p class="subtitle">نمایش Socket Programming و ارتباط Real-time در وب</p>
|
||
|
||
<div class="hero-grid">
|
||
<img class="hero-img glass-media" src="assets/home.png" alt="نمای صفحه چتروم" />
|
||
<div class="talk-track glass-panel">
|
||
<span>مسیر ارائه</span>
|
||
<strong>History → Polling → Handshake → OSI → Architecture → Demo</strong>
|
||
<div class="signal-board">
|
||
<div class="signal"><i>1</i><div><b>Handshake</b><span>HTTP Upgrade</span></div></div>
|
||
<div class="signal"><i>2</i><div><b>Channel</b><span>Persistent TCP</span></div></div>
|
||
<div class="signal"><i>3</i><div><b>Frames</b><span>Full-duplex</span></div></div>
|
||
<div class="signal"><i>4</i><div><b>Broadcast</b><span>Room delivery</span></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<aside class="notes">معرفی سریع پروژه و مسیر ارائه.</aside>
|
||
</section>
|
||
|
||
<section class="slide" data-title="History">
|
||
<div class="kicker">History</div>
|
||
<h2>چرا WebSocket لازم شد؟</h2>
|
||
<p class="subtitle">مسیر تکامل از HTTP کلاسیک تا اتصال پایدار دوطرفه</p>
|
||
|
||
<div class="timeline-panel">
|
||
<div class="image-focus glass-panel">
|
||
<img src="assets/websocket-history.svg" alt="تاریخچه WebSocket" />
|
||
</div>
|
||
<div class="timeline-cards point-column">
|
||
<article><small>HTTP</small><div><b>Request / Response</b><ul><li>ساده</li><li>بدون Server Push</li></ul></div></article>
|
||
<article><small>AJAX</small><div><b>Polling</b><ul><li>درخواست تکراری</li><li>هزینه شبکه بیشتر</li></ul></div></article>
|
||
<article><small>LONG</small><div><b>Long Polling</b><ul><li>اتصال منتظر</li><li>پیچیدگی بیشتر</li></ul></div></article>
|
||
<article><small>WS</small><div><b>WebSocket</b><ul><li>اتصال پایدار</li><li>پیام دوطرفه</li></ul></div></article>
|
||
</div>
|
||
</div>
|
||
<aside class="notes">توضیح کوتاه درباره نیاز به دریافت لحظهای داده.</aside>
|
||
</section>
|
||
|
||
<section class="slide" data-title="Cost">
|
||
<div class="kicker">Resource Cost</div>
|
||
<h2>هزینه هر روش برای سرور</h2>
|
||
<p class="subtitle">هر روش، فشار متفاوتی روی Network، CPU، memory و socket دارد</p>
|
||
|
||
<div class="resource-grid point-cards">
|
||
<article><b>Classic HTTP</b><ul><li>درخواست جداگانه</li><li>پردازش header</li><li>پایان چرخه</li></ul></article>
|
||
<article><b>Polling</b><ul><li>درخواست زیاد</li><li>پاسخهای خالی</li><li>سربار Network</li></ul></article>
|
||
<article><b>Long Polling</b><ul><li>اتصال باز</li><li>نگهداری state</li><li>مصرف buffer</li></ul></article>
|
||
<article><b>WebSocket</b><ul><li>یک اتصال پایدار</li><li>فریم سبک</li><li>state فعال</li></ul></article>
|
||
</div>
|
||
|
||
<div class="quote glass-panel">Polling → درخواست تکراری · Long Polling → انتظار طولانی · WebSocket → کانال پایدار</div>
|
||
<aside class="notes">مقایسه فشرده هزینهها.</aside>
|
||
</section>
|
||
|
||
<section class="slide" data-title="Handshake">
|
||
<div class="kicker">HTTP Upgrade Handshake</div>
|
||
<h2>WebSocket چطور شروع میشود؟</h2>
|
||
<p class="subtitle">ابتدا HTTP، سپس پاسخ 101 و بعد WebSocket Frames</p>
|
||
|
||
<div class="upgrade-map">
|
||
<div class="endpoint glass-panel"><span>Client</span><b>Browser</b><ul><li>ساخت WebSocket</li><li>درخواست Upgrade</li></ul></div>
|
||
<div class="upgrade-steps">
|
||
<div>1. GET + Upgrade</div>
|
||
<div>2. 101 Switching Protocols</div>
|
||
<div>3. WebSocket Frames</div>
|
||
</div>
|
||
<div class="endpoint glass-panel"><span>Server</span><b>FastAPI</b><ul><li>پذیرش Upgrade</li><li>نگهداری socket</li></ul></div>
|
||
</div>
|
||
|
||
<div class="split">
|
||
<div class="diagram-card glass-panel">
|
||
<img src="assets/websocket-handshake.svg" alt="HTTP Upgrade Handshake" />
|
||
</div>
|
||
<div class="code-stack ltr">
|
||
<pre><code>GET /ws/general/ali HTTP/1.1
|
||
Upgrade: websocket
|
||
Connection: Upgrade
|
||
Sec-WebSocket-Key: ...</code></pre>
|
||
<pre><code>HTTP/1.1 101 Switching Protocols
|
||
Upgrade: websocket
|
||
Connection: Upgrade</code></pre>
|
||
</div>
|
||
</div>
|
||
<aside class="notes">نمایش handshake و تبدیل HTTP به WebSocket.</aside>
|
||
</section>
|
||
|
||
<section class="slide" data-title="HTTP Versions">
|
||
<div class="kicker">HTTP Versions</div>
|
||
<h2>WebSocket در نسخههای HTTP</h2>
|
||
<p class="subtitle">مدل آموزشی پروژه روی HTTP/1.1 Upgrade تمرکز دارد</p>
|
||
|
||
<div class="version-row point-cards">
|
||
<article><span>HTTP/1.1</span><b>Upgrade + 101</b><ul><li>مدل کلاسیک</li><li>یک TCP connection</li><li>ساده برای آموزش</li></ul></article>
|
||
<article><span>HTTP/2</span><b>Extended CONNECT</b><ul><li>روی یک stream</li><li>بدون Upgrade کلاسیک</li><li>پیچیدهتر</li></ul></article>
|
||
<article><span>HTTP/3</span><b>QUIC + CONNECT</b><ul><li>بدون TCP</li><li>روی QUIC</li><li>مدرنتر</li></ul></article>
|
||
</div>
|
||
<div class="focus-line glass-panel"><b>HTTP/1.1:</b> Upgrade → 101 → WebSocket Frames</div>
|
||
<aside class="notes">تفاوت نسخهها در یک نگاه.</aside>
|
||
</section>
|
||
|
||
<section class="slide" data-title="OSI">
|
||
<div class="kicker">OSI Model</div>
|
||
<h2>جایگاه WebSocket در شبکه</h2>
|
||
<p class="subtitle">WebSocket در لایه Application استفاده میشود؛ TCP/IP حمل داده را انجام میدهد</p>
|
||
|
||
<div class="osi-board">
|
||
<div class="osi-stack glass-panel">
|
||
<div class="osi-layer active"><b>Layer 7</b><span>WebSocket + JSON</span></div>
|
||
<div class="osi-layer"><b>Layer 6</b><span>UTF-8 text</span></div>
|
||
<div class="osi-layer"><b>Layer 5</b><span>Long-lived session</span></div>
|
||
<div class="osi-layer transport"><b>Layer 4</b><span>TCP reliable stream</span></div>
|
||
<div class="osi-layer"><b>Layer 3</b><span>IP routing</span></div>
|
||
<div class="osi-layer"><b>Layer 2/1</b><span>Ethernet / Wi-Fi</span></div>
|
||
</div>
|
||
<div class="layer-note glass-panel point-column">
|
||
<div><i class="metric-icon">A</i><b>Application</b><ul><li>اتاق</li><li>کاربر</li><li>پیام</li></ul></div>
|
||
<div><i class="metric-icon">T</i><b>Transport</b><ul><li>TCP</li><li>تحویل قابل اعتماد</li></ul></div>
|
||
<div><i class="metric-icon">N</i><b>Network</b><ul><li>IP</li><li>مسیریابی</li></ul></div>
|
||
</div>
|
||
</div>
|
||
<aside class="notes">تفکیک لایه کاربرد از لایههای انتقال و شبکه.</aside>
|
||
</section>
|
||
|
||
<section class="slide" data-title="Architecture">
|
||
<div class="kicker">Project Architecture</div>
|
||
<h2>معماری پروژه چتروم</h2>
|
||
<p class="subtitle">هر تب مرورگر یک WebSocket connection دارد</p>
|
||
|
||
<div class="topology">
|
||
<div class="node-column">
|
||
<div class="node glass-panel"><b>Client A</b><span>Browser tab</span></div>
|
||
<div class="node glass-panel"><b>Client B</b><span>Browser tab</span></div>
|
||
</div>
|
||
<div class="server-node glass-panel">
|
||
<b>FastAPI WebSocket Endpoint</b>
|
||
<p>/ws/{room}/{user}</p>
|
||
<div class="room-badge">ConnectionManager</div>
|
||
<div class="room-badge">Broadcast داخل همان room</div>
|
||
</div>
|
||
<div class="node-column">
|
||
<div class="node glass-panel"><b>Room: general</b><span>A · B · C</span></div>
|
||
<div class="node glass-panel"><b>Room: class</b><span>D · E</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mini-points">
|
||
<span>Browser UI</span>
|
||
<span>FastAPI endpoint</span>
|
||
<span>Room Manager</span>
|
||
<span>Broadcast</span>
|
||
</div>
|
||
<aside class="notes">نمای معماری و نقش ConnectionManager.</aside>
|
||
</section>
|
||
|
||
<section class="slide" data-title="Flow">
|
||
<div class="kicker">Message Flow</div>
|
||
<h2>جریان پیام در پروژه</h2>
|
||
<p class="subtitle">از ورود کاربر تا نمایش پیام بدون refresh</p>
|
||
|
||
<div class="pipeline">
|
||
<div class="pipe-step glass-panel"><i class="step-dot">1</i><b>Join</b><span>name + room</span></div>
|
||
<div class="pipe-step glass-panel"><i class="step-dot">2</i><b>Upgrade</b><span>HTTP → WebSocket</span></div>
|
||
<div class="pipe-step glass-panel"><i class="step-dot">3</i><b>Send</b><span>JSON content</span></div>
|
||
<div class="pipe-step glass-panel"><i class="step-dot">4</i><b>Broadcast</b><span>room sockets</span></div>
|
||
<div class="pipe-step glass-panel"><i class="step-dot">5</i><b>Render</b><span>بدون refresh</span></div>
|
||
</div>
|
||
|
||
<div class="flow">
|
||
<div>نام و اتاق</div>
|
||
<div>WebSocket در JS</div>
|
||
<div>HTTP Upgrade</div>
|
||
<div>قبول در FastAPI</div>
|
||
<div>Room Manager</div>
|
||
<div>JSON message</div>
|
||
<div>Broadcast</div>
|
||
<div>نمایش پیام</div>
|
||
</div>
|
||
<aside class="notes">جریان اجرایی پیام در پروژه.</aside>
|
||
</section>
|
||
|
||
<section class="slide" data-title="Pros Cons">
|
||
<div class="kicker">Trade-offs</div>
|
||
<h2>مزایا و محدودیتها</h2>
|
||
<p class="subtitle">WebSocket برای Real-time عالی است، اما state سرور را بیشتر میکند</p>
|
||
|
||
<div class="metrics">
|
||
<article class="metric-card glass-panel"><i class="metric-icon">↔</i><b>Full-duplex</b><ul><li>ارسال دوطرفه</li><li>بدون انتظار request بعدی</li></ul></article>
|
||
<article class="metric-card glass-panel"><i class="metric-icon">↓</i><b>Low latency</b><ul><li>تاخیر کم</li><li>فریم سبکتر</li></ul></article>
|
||
<article class="metric-card glass-panel"><i class="metric-icon">!</i><b>Server state</b><ul><li>socket باز</li><li>مدیریت disconnect</li></ul></article>
|
||
</div>
|
||
|
||
<div class="mini-points">
|
||
<span>Chat</span>
|
||
<span>Notifications</span>
|
||
<span>Live dashboard</span>
|
||
<span>Online game</span>
|
||
</div>
|
||
<aside class="notes">مزایا و هزینههای عملیاتی.</aside>
|
||
</section>
|
||
|
||
<section class="slide" data-title="Demo">
|
||
<div class="kicker">Demo</div>
|
||
<h2>برنامه اجرای دمو</h2>
|
||
<p class="subtitle">دو تب، یک room، پیام Real-time</p>
|
||
|
||
<div class="demo-layout">
|
||
<img class="glass-media" src="assets/home.png" alt="نمای دمو" />
|
||
<ol class="glass-panel">
|
||
<li>اجرای <code>uvicorn app.main:app --reload</code></li>
|
||
<li>باز کردن دو tab</li>
|
||
<li>ورود دو user به یک room</li>
|
||
<li>ارسال message</li>
|
||
<li>نمایش بدون refresh</li>
|
||
<li>تغییر online users</li>
|
||
</ol>
|
||
</div>
|
||
<aside class="notes">جمعبندی و اجرای دمو.</aside>
|
||
</section>
|
||
</main>
|
||
|
||
<div class="controls" aria-hidden="true">
|
||
<button id="prev" title="قبلی">‹</button>
|
||
<span id="counter">1 / 10</span>
|
||
<button id="next" title="بعدی">›</button>
|
||
</div>
|
||
<div class="hint">← → حرکت · N یادداشت · F تمامصفحه</div>
|
||
<div class="progress"><span id="progressBar"></span></div>
|
||
<div class="speaker-notes" id="speakerNotes"></div>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|