6.2 KiB
چتروم ساده با WebSocket
این پروژه برای درس مهندسی اینترنت آماده شده است و هدف اصلی آن نمایش یک نمونه ساده از برنامهنویسی Socket / WebSocket در قالب یک چتروم تحت وب است. در این برنامه چند کاربر میتوانند با مرورگر وارد یک اتاق مشترک شوند و پیامها را به صورت همزمان دریافت کنند. رابط کاربری فارسی است و از فونت وزیرمتن استفاده میکند.
اعضای گروه
- علیرضا خسروی
- مرتضی خانبابائی
- امیرحسین خلیلی
هدف پروژه
هدف پروژه، تمرکز روی نحوه کار WebSocket است. برخلاف ارتباط معمول HTTP که در آن مرورگر درخواست میفرستد و سرور پاسخ میدهد، در WebSocket یک ارتباط پایدار بین مرورگر و سرور باز میماند. به همین دلیل سرور میتواند پیام جدید را همان لحظه برای همه کاربران حاضر در اتاق ارسال کند.
امکانات
- اتصال کاربران به سرور با WebSocket
- پشتیبانی از چند اتاق گفتگو
- ارسال پیام به همه کاربران حاضر در همان اتاق
- نمایش پیامهای ورود و خروج کاربران
- نمایش فهرست کاربران آنلاین هر اتاق
- رابط کاربری فارسی، راستبهچپ و ساده
- مسیر کمکی
/api/roomsبرای مشاهده اتاقهای فعال - مسیر
/healthبرای بررسی روشن بودن سرور
تکنولوژیهای استفادهشده
- Python
- FastAPI
- WebSocket
- Uvicorn
- HTML
- CSS
- JavaScript
ساختار پروژه
chatroom_completed/
├── app/
│ ├── main.py
│ ├── static/
│ │ ├── index.html
│ │ ├── style.css
│ │ ├── app.js
│ │ └── Vazirmatn[wght].woff2
│ └── websocket/
│ ├── chat.py
│ └── manager.py
├── requirements.txt
└── README.md
توضیح فایلهای اصلی
فایل app/main.py
نقطه شروع برنامه FastAPI است. در این فایل فایلهای استاتیک فرانتاند سرو میشوند، مسیر WebSocket به برنامه اضافه میشود و چند مسیر ساده مثل / و /health تعریف شدهاند.
فایل app/websocket/chat.py
مسیر اصلی WebSocket در این فایل قرار دارد:
ws://localhost:8000/ws/{room_id}/{client_id}
این فایل اتصال کاربر را میپذیرد، پیامهای دریافتی را میخواند و پیامها را برای کاربران همان اتاق پخش میکند.
فایل app/websocket/manager.py
این فایل اتصالهای فعال را نگه میدارد. هر اتاق یک لیست از کاربران متصل دارد. وظایف اصلی آن شامل اتصال کاربر، قطع اتصال، ارسال پیام و گرفتن فهرست کاربران آنلاین است.
فایل app/static/app.js
کد JavaScript مرورگر است. این فایل یک شیء WebSocket میسازد، پیامها را به سرور میفرستد و پیامهای برگشتی سرور را در صفحه نمایش میدهد.
روش اجرا
ابتدا وابستگیها را نصب کنید:
python -m venv .venv
در ویندوز PowerShell:
.\.venv\Scripts\activate
در Linux یا macOS:
source .venv/bin/activate
سپس:
pip install -r requirements.txt
uvicorn app.main:app --reload
بعد از اجرا، این آدرس را در مرورگر باز کنید:
http://localhost:8000
اگر پورت 8000 روی سیستم شما اشغال بود، میتوانید برنامه را روی پورت دیگری اجرا کنید:
uvicorn app.main:app --reload --port 8010
روش آزمایش
- آدرس
http://localhost:8000را در دو تب مرورگر باز کنید. - در هر تب یک نام متفاوت وارد کنید.
- در هر دو تب نام اتاق یکسان باشد، مثلا
عمومی. - دکمه اتصال را بزنید.
- از یک تب پیام بفرستید و دریافت همزمان آن را در تب دیگر مشاهده کنید.
نمونه آدرس WebSocket
ws://localhost:8000/ws/عمومی/علی
اگر پروژه روی HTTPS اجرا شود، مرورگر به جای ws از wss استفاده میکند.
روند کار WebSocket در این پروژه
- کاربر در صفحه HTML نام و اتاق را وارد میکند.
- فایل
app.jsیک اتصال WebSocket به سرور باز میکند. - سرور در
chat.pyاتصال را قبول میکند. - فایل
manager.pyکاربر را به لیست کاربران همان اتاق اضافه میکند. - وقتی کاربر پیامی میفرستد، سرور پیام را دریافت میکند.
- سرور همان پیام را برای همه اتصالهای فعال در همان اتاق ارسال میکند.
- مرورگر پیام جدید را بدون Refresh شدن صفحه نمایش میدهد.
نکته آموزشی
این پروژه عمدا ساده نگه داشته شده است. در آن ثبتنام، پایگاه داده، ذخیره تاریخچه پیامها و احراز هویت پیادهسازی نشدهاند، چون هدف اصلی پروژه نمایش ارتباط زنده با WebSocket است.
پیشنهادهای توسعه
- ذخیره پیامها در SQLite یا PostgreSQL
- اضافه کردن صفحه ورود کاربران
- نمایش وضعیت تایپ کردن
- ارسال پیام خصوصی
- محدود کردن نام اتاقها و نام کاربران
- اضافه کردن Dockerfile برای اجرای سادهتر