FastAPI Backend Development Bootcamp · درس

بناء تطبيق دردشة في الوقت الفعلي

طوّروا تطبيق دردشة بسيطًا في الوقت الفعلي يوضّح إمكانات WebSocket في FastAPI.

بناء تطبيق دردشة في الوقت الفعلي درس مجاني في FastAPI Backend Development Bootcamp على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في FastAPI Backend Development Bootcamp، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة FastAPI Backend Development Bootcamp 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Real-time Chat App Overview

Welcome to building your very own real-time chat application! This lesson brings together everything we've learned about WebSockets in FastAPI.

We'll create a FastAPI server that manages multiple chat connections.
Clients will connect via WebSockets to send and receive messages instantly.
You'll see both the server-side (FastAPI) and a simple client-side (HTML/JavaScript) implementation.

Get ready to see real-time communication in action!

Managing Chat Connections

For a chat application, our server needs to keep track of all active WebSocket connections. When a user sends a message, the server will broadcast it to everyone else.

We'll use a simple ConnectionManager class to handle adding, removing, and broadcasting messages to connected clients.

from typing import List
from fastapi import WebSocket

class ConnectionManager:
    def __init__(self):
        self.active_connections: List[WebSocket] = []

    async def connect(self, websocket: WebSocket):
        await websocket.accept()
        self.active_connections.append(websocket)

    def disconnect(self, websocket: WebSocket):
        self.active_connections.remove(websocket)

    async def send_personal_message(self, message: str, websocket: WebSocket):
        await websocket.send_text(message)

    async def broadcast(self, message: str):
        for connection in self.active_connections:
            await connection.send_text(message)

FastAPI WebSocket Endpoint

Now let's create the FastAPI endpoint that clients will connect to. This endpoint will use our ConnectionManager.

When a client connects, we add them. When they send a message, we broadcast it. If they disconnect, we remove them.

from fastapi import FastAPI, WebSocket, WebSocketDisconnect

# ... ConnectionManager class from previous scene ...

app = FastAPI()
manager = ConnectionManager()

@app.websocket("/ws/{client_id}")
async def websocket_endpoint(websocket: WebSocket, client_id: int):
    await manager.connect(websocket)
    try:
        while True:
            data = await websocket.receive_text()
            message = f"Client #{client_id} says: {data}"
            await manager.broadcast(message)
    except WebSocketDisconnect:
        manager.disconnect(websocket)
        await manager.broadcast(f"Client #{client_id} left the chat")

Client-Side HTML Structure

Our chat application needs a simple user interface. We'll use basic HTML for an input field to send messages and a div to display them.

This is the foundation for our client-side interaction.

<!DOCTYPE html>
<html>
    <head>
        <title>Chat App</title>
    </head>
    <body>
        <h1>FastAPI Chat</h1>
        <form action="" onsubmit="sendMessage(event)">
            <input type="text" id="messageText" autocomplete="off"/>
            <button>Send</button>
        </form>
        <ul id='messages'>
        </ul>
    </body>
</html>

Connecting with JavaScript

Now, let's add JavaScript to our HTML to connect to the FastAPI WebSocket server. We'll open a connection as soon as the page loads.

Remember to replace localhost:8000 with your server address if it's different!

<script>
    var ws = new WebSocket("ws://localhost:8000/ws/1");

    ws.onopen = function(event) {
        console.log("Connected to WebSocket server!");
    };

    ws.onclose = function(event) {
        console.log("Disconnected from WebSocket server.");
    };

    ws.onerror = function(error) {
        console.error("WebSocket Error: ", error);
    };
</script>

Sending Messages from Client

Users need to be able to type a message and send it to the server. We'll create a JavaScript function that captures the input and sends it via the WebSocket connection.

This function is called when the form is submitted.

<script>
    // ... WebSocket connection setup ...

    function sendMessage(event) {
        var input = document.getElementById("messageText");
        ws.send(input.value);
        input.value = '';
        event.preventDefault();
    }
</script>

Receiving & Displaying Messages

The core of a chat application is receiving messages and displaying them. We'll implement the ws.onmessage event handler to append new messages to our list.

<script>
    // ... WebSocket connection & sendMessage function ...

    ws.onmessage = function(event) {
        var messages = document.getElementById('messages');
        var message = document.createElement('li');
        var content = document.createTextNode(event.data);
        message.appendChild(content);
        messages.appendChild(message);
    };
</script>

Full FastAPI Chat Server

Here's the complete Python code for our FastAPI chat server. Save this as main.py and run it using uvicorn main:app --reload.

This server will listen for connections, broadcast messages, and announce user joins/leaves.

from typing import List
from fastapi import FastAPI, WebSocket, WebSocketDisconnect
from fastapi.responses import HTMLResponse

class ConnectionManager:
    def __init__(self):
        self.active_connections: List[WebSocket] = []

    async def connect(self, websocket: WebSocket):
        await websocket.accept()
        self.active_connections.append(websocket)

    def disconnect(self, websocket: WebSocket):
        self.active_connections.remove(websocket)

    async def broadcast(self, message: str):
        for connection in self.active_connections:
            await connection.send_text(message)

app = FastAPI()
manager = ConnectionManager()

html = """
<!DOCTYPE html>
<html>
    <head>
        <title>Chat App</title>
    </head>
    <body>
        <h1>FastAPI Chat</h1>
        <form action="" onsubmit="sendMessage(event)">
            <input type="text" id="messageText" autocomplete="off"/>
            <button>Send</button>
        </form>
        <ul id='messages'>
        </ul>
        <script>
            var ws = new WebSocket("ws://localhost:8000/ws/1"); // Client ID is 1 for this example

            ws.onopen = function(event) {
                console.log("Connected to WebSocket server!");
            };

            ws.onmessage = function(event) {
                var messages = document.getElementById('messages');
                var message = document.createElement('li');
                var content = document.createTextNode(event.data);
                message.appendChild(content);
                messages.appendChild(message);
            };

            ws.onclose = function(event) {
                console.log("Disconnected from WebSocket server.");
            };

            ws.onerror = function(error) {
                console.error("WebSocket Error: ", error);
            };

            function sendMessage(event) {
                var input = document.getElementById("messageText");
                ws.send(input.value);
                input.value = '';
                event.preventDefault();
            }
        </script>
    </body>
</html>
"""

@app.get("/")
async def get():
    return HTMLResponse(html)

@app.websocket("/ws/{client_id}")
async def websocket_endpoint(websocket: WebSocket, client_id: int):
    await manager.connect(websocket)
    await manager.broadcast(f"Client #{client_id} joined the chat")
    try:
        while True:
            data = await websocket.receive_text()
            message = f"Client #{client_id} says: {data}"
            await manager.broadcast(message)
    except WebSocketDisconnect:
        manager.disconnect(websocket)
        await manager.broadcast(f"Client #{client_id} left the chat")

Quick Chat Logic Check

You've built a basic chat app! Consider the ConnectionManager's broadcast method and the FastAPI endpoint's logic.

If Client A sends a message to the server, what happens next to ensure Client B receives it?

Chat App Summary

Congratulations! You've successfully built a basic real-time chat application using FastAPI WebSockets.

You learned to manage multiple active WebSocket connections with a ConnectionManager.
You implemented a FastAPI WebSocket endpoint to handle incoming and outgoing messages.
You created a simple HTML/JavaScript client to connect, send, and receive chat messages.

This project demonstrates the power of WebSockets for real-time communication. From here, you can add features like user authentication, persistent chat history, and more robust UI/UX.

الأسئلة الشائعة

هل درس «بناء تطبيق دردشة في الوقت الفعلي» مجاني؟

نعم — نص درس «بناء تطبيق دردشة في الوقت الفعلي» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة FastAPI Backend Development Bootcamp، انتقل إلى CoddyKit PRO. تتضمن دورة FastAPI Backend Development Bootcamp 4 دروس في المجموع.

ماذا ستتعلم في «بناء تطبيق دردشة في الوقت الفعلي»؟

طوّروا تطبيق دردشة بسيطًا في الوقت الفعلي يوضّح إمكانات WebSocket في FastAPI. تتمرن على FastAPI Backend Development Bootcamp مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ FastAPI Backend Development Bootcamp؟

لا تُشترط خبرة سابقة. FastAPI Backend Development Bootcamp على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «بناء تطبيق دردشة في الوقت الفعلي»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس FastAPI Backend Development Bootcamp هذا؟

نعم. كل درس في FastAPI Backend Development Bootcamp يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى FastAPI Backend Development Bootcamp