docs(slides): improve slides images and theme
This commit is contained in:
@@ -1,241 +1,143 @@
|
||||
<!doctype html>
|
||||
<html lang="fa" dir="rtl">
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>ارائه WebSocket و Socket Programming</title>
|
||||
<title>WebSocket Protocol</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>
|
||||
<section class="slide active center-slide" data-title="Title">
|
||||
<div class="center-content">
|
||||
<h1>Websocket Protocol</h1>
|
||||
<p class="subtitle">Socket Programming with a FastAPI real-time demo chat app</p>
|
||||
<p class="members">Amirhossein Khalili • Morteza Khanbabaie • Alireza Khosravi</p>
|
||||
</div>
|
||||
<aside class="notes">معرفی سریع پروژه و مسیر ارائه.</aside>
|
||||
<aside class="notes">Open with the project name and explain that the presentation focuses on WebSocket concepts through a simple chatroom implementation.</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>
|
||||
<section class="slide" data-title="Timeline">
|
||||
<h2>WebSocket History Timeline</h2>
|
||||
<p class="subtitle">The communication model evolved from simple request/response to persistent real-time channels.</p>
|
||||
<div class="timeline-only glass-panel">
|
||||
<div class="timeline-method"><span>Classic HTTP</span><small>1991</small></div>
|
||||
<div class="timeline-method"><span>Polling</span><small>1995+</small></div>
|
||||
<div class="timeline-method"><span>Long Polling</span><small>2006</small></div>
|
||||
<div class="timeline-method"><span>WebSocket</span><small>2011</small></div>
|
||||
<div class="timeline-method"><span>Real-time Web</span><small>2010s+</small></div>
|
||||
</div>
|
||||
<aside class="notes">توضیح کوتاه درباره نیاز به دریافت لحظهای داده.</aside>
|
||||
<aside class="notes">Use this slide to name the major approaches only. The next slides explain how each mechanism works and what it costs.</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>
|
||||
<section class="slide protocol-slide" data-title="HTTP">
|
||||
<h2>HTTP</h2>
|
||||
<p class="subtitle">A short-lived request/response cycle with no native live push.</p>
|
||||
<div class="protocol-layout">
|
||||
<div class="protocol-visual glass-panel">
|
||||
<img src="assets/http-mechanism.svg" alt="HTTP request response mechanism" />
|
||||
</div>
|
||||
<div class="protocol-points glass-panel">
|
||||
<article><b>Mechanism</b><ul><li>One request returns one response</li><li>The connection closes after the exchange</li></ul></article>
|
||||
<article><b>Cost</b><ul><li>Every update needs a new HTTP cycle</li><li>The server cannot push live data by itself</li></ul></article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quote glass-panel">Polling → درخواست تکراری · Long Polling → انتظار طولانی · WebSocket → کانال پایدار</div>
|
||||
<aside class="notes">مقایسه فشرده هزینهها.</aside>
|
||||
<aside class="notes">HTTP is excellent for normal pages, forms, and APIs. Its basic model is not optimized for continuous server-to-client updates.</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>
|
||||
<section class="slide protocol-slide" data-title="Polling">
|
||||
<h2>Polling</h2>
|
||||
<p class="subtitle">The browser repeatedly asks the server for new data.</p>
|
||||
<div class="protocol-layout">
|
||||
<div class="protocol-visual glass-panel">
|
||||
<img src="assets/polling-mechanism.svg" alt="Polling repeated request mechanism" />
|
||||
</div>
|
||||
<div class="protocol-points glass-panel">
|
||||
<article><b>Mechanism</b><ul><li>The client checks on a fixed timer</li><li>The server answers even when nothing changed</li></ul></article>
|
||||
<article><b>Cost</b><ul><li>Many empty requests waste network work</li><li>Latency depends on the timer interval</li></ul></article>
|
||||
</div>
|
||||
<div class="endpoint glass-panel"><span>Server</span><b>FastAPI</b><ul><li>پذیرش Upgrade</li><li>نگهداری socket</li></ul></div>
|
||||
</div>
|
||||
<aside class="notes">Polling is simple but wasteful. Short intervals improve latency but increase server and network cost.</aside>
|
||||
</section>
|
||||
|
||||
<div class="split">
|
||||
<div class="diagram-card glass-panel">
|
||||
<section class="slide protocol-slide" data-title="Long Polling">
|
||||
<h2>Long Polling</h2>
|
||||
<p class="subtitle">The server holds the request until an update is available.</p>
|
||||
<div class="protocol-layout">
|
||||
<div class="protocol-visual glass-panel">
|
||||
<img src="assets/long-polling-mechanism.svg" alt="Long Polling held request mechanism" />
|
||||
</div>
|
||||
<div class="protocol-points glass-panel">
|
||||
<article><b>Mechanism</b><ul><li>The server keeps the request open</li><li>The client reconnects after each response</li></ul></article>
|
||||
<article><b>Cost</b><ul><li>Open requests consume server state</li><li>Reconnect and timeout handling is required</li></ul></article>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="notes">Long Polling reduces empty responses compared with Polling, but it still works through repeated HTTP request cycles.</aside>
|
||||
</section>
|
||||
|
||||
<section class="slide protocol-slide" data-title="WebSocket">
|
||||
<h2>WebSocket</h2>
|
||||
<p class="subtitle">An HTTP Upgrade creates one persistent Full-duplex channel.</p>
|
||||
<div class="protocol-layout">
|
||||
<div class="protocol-visual 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 class="protocol-points glass-panel">
|
||||
<article><b>Mechanism</b><ul><li>HTTP Upgrade switches the protocol</li><li>Frames move both ways on one socket</li></ul></article>
|
||||
<article><b>Cost</b><ul><li>Each client keeps a live connection</li><li>Scaling needs connection-aware design</li></ul></article>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="notes">نمایش handshake و تبدیل HTTP به WebSocket.</aside>
|
||||
<aside class="notes">This is the key WebSocket slide. The browser starts with HTTP, upgrades the connection, and then both client and server can send frames whenever needed.</aside>
|
||||
</section>
|
||||
|
||||
<section class="slide image-slide" data-title="OSI">
|
||||
<h2>WebSocket in the OSI Model</h2>
|
||||
<p class="subtitle">Application semantics at Layer 7, reliable byte delivery through TCP/IP.</p>
|
||||
<div class="single-visual glass-panel">
|
||||
<img src="assets/websocket-osi.svg" alt="WebSocket in OSI model" />
|
||||
</div>
|
||||
<aside class="notes">WebSocket is an application-layer protocol. It uses TCP for reliable transport and IP for routing. The lower layers do not know what a chat message or room is.</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>
|
||||
<h2>HTTP Versions in WebSocket</h2>
|
||||
<p class="subtitle">Different HTTP versions start WebSocket connections differently.</p>
|
||||
<div class="version-row point-cards detailed-version-row">
|
||||
<article><span>HTTP/1.1</span><b>Upgrade + 101 Switching Protocols</b><ul><li>The browser sends a normal GET request with <code>Upgrade: websocket</code>.</li><li>The server replies <code>101 Switching Protocols</code> if it accepts.</li><li>After that, the same TCP connection carries WebSocket frames both ways.</li><li>This is the classic and easiest model to understand.</li></ul></article>
|
||||
<article><span>HTTP/2</span><b>Extended CONNECT over a Stream</b><ul><li>HTTP/2 does not use the old connection-level Upgrade flow.</li><li>It uses Extended CONNECT, so WebSocket traffic lives inside one HTTP/2 stream.</li><li>Other HTTP/2 streams can share the same underlying connection.</li><li>Support depends more on servers, clients, and proxies.</li></ul></article>
|
||||
<article><span>HTTP/3</span><b>CONNECT over QUIC</b><ul><li>HTTP/3 runs on QUIC over UDP instead of TCP.</li><li>WebSocket uses a CONNECT-based mapping similar in idea to HTTP/2.</li><li>QUIC streams reduce transport-level head-of-line blocking.</li><li>It is modern, but the demo is easier to explain with HTTP/1.1.</li></ul></article>
|
||||
</div>
|
||||
<div class="focus-line glass-panel"><b>HTTP/1.1:</b> Upgrade → 101 → WebSocket Frames</div>
|
||||
<aside class="notes">تفاوت نسخهها در یک نگاه.</aside>
|
||||
<aside class="notes">The project is best explained with HTTP/1.1 Upgrade. HTTP/2 and HTTP/3 support WebSocket through different mechanisms.</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>
|
||||
<section class="slide image-slide" data-title="FastAPI Architecture">
|
||||
<h2>Project Architecture</h2>
|
||||
<p class="subtitle">Browsers connect to one WebSocket endpoint; ConnectionManager groups sockets by room.</p>
|
||||
<div class="single-visual glass-panel">
|
||||
<img src="assets/chatroom-architecture.svg" alt="WebSocket chatroom architecture" />
|
||||
</div>
|
||||
<aside class="notes">تفکیک لایه کاربرد از لایههای انتقال و شبکه.</aside>
|
||||
<aside class="notes">Explain the code structure: FastAPI serves the frontend, the WebSocket endpoint accepts connections, and the manager stores active clients by room before broadcasting messages.</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>
|
||||
<section class="slide" data-title="Takeaways">
|
||||
<h2>Keynotes and Takeaways</h2>
|
||||
<p class="subtitle">The essential points to remember from the project.</p>
|
||||
<div class="takeaway-grid point-cards">
|
||||
<article><b>HTTP is request/response</b><ul><li>Simple</li><li>Stateless</li><li>Not ideal for live push</li></ul></article>
|
||||
<article><b>Polling simulates real-time</b><ul><li>Easy</li><li>Wasteful</li><li>Interval-based latency</li></ul></article>
|
||||
<article><b>WebSocket keeps a channel</b><ul><li>Persistent</li><li>Full-duplex</li><li>Low latency</li></ul></article>
|
||||
<article><b>Server design matters</b><ul><li>Connection state</li><li>Disconnect handling</li><li>Scaling strategy</li></ul></article>
|
||||
</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>
|
||||
<aside class="notes">End with the central idea: WebSocket is useful when real-time bidirectional communication matters, but it moves responsibility to the server to manage long-lived connections.</aside>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div class="controls" aria-hidden="true">
|
||||
<button id="prev" title="قبلی">‹</button>
|
||||
<button id="prev" title="Previous"><</button>
|
||||
<span id="counter">1 / 10</span>
|
||||
<button id="next" title="بعدی">›</button>
|
||||
<button id="next" title="Next">></button>
|
||||
</div>
|
||||
<div class="hint">← → حرکت · N یادداشت · F تمامصفحه</div>
|
||||
<div class="hint">Left / Right to move - N for notes - F for fullscreen</div>
|
||||
<div class="progress"><span id="progressBar"></span></div>
|
||||
<div class="speaker-notes" id="speakerNotes"></div>
|
||||
<script src="script.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user