PricingLoginStart free
FastAPI Backend Development Bootcamp · Ders

Gerçek Zamanlı Sohbet Uygulaması Oluşturma

FastAPI'de WebSocket özelliklerini gösteren basit bir gerçek zamanlı sohbet uygulaması geliştirin.

3. ders / 410 adım

Gerçek Zamanlı Sohbet Uygulaması Oluşturma, CoddyKit'te ücretsiz bir FastAPI Backend Development Bootcamp dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, FastAPI Backend Development Bootcamp öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. FastAPI Backend Development Bootcamp kursu toplamda 4 dersten oluşur.

Real-time Chat App Overview

Kendi gerçek zamanlı sohbet uygulamanızı oluşturmaya hoş geldiniz! Bu ders, FastAPI'de WebSockets hakkında öğrendiğimiz her şeyi bir araya getiriyor.

  • Birden fazla sohbet bağlantısını yöneten bir FastAPI sunucusu oluşturacağız.
  • İstemciler, mesajları anında gönderip almak için WebSockets aracılığıyla bağlanacaklar.
  • Hem sunucu tarafı (FastAPI) hem de basit bir istemci tarafı (HTML/JavaScript) uygulamasını göreceksiniz.

Gerçek zamanlı iletişimi iş başında görmeye hazır olun!

Managing Chat Connections

Bir sohbet uygulaması için sunucumuzun tüm aktif WebSocket bağlantılarını takip etmesi gerekir. Bir kullanıcı mesaj gönderdiğinde, sunucu bunu diğer herkese yayınlayacaktır.

Bağlı istemcilere mesaj ekleme, kaldırma ve yayınlama işlemlerini yönetmek için basit bir ConnectionManager sınıfı kullanacağız.

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

Şimdi istemcilerin bağlanacağı FastAPI uç noktasını oluşturalım. Bu uç nokta, ConnectionManager sınıfımızı kullanacak.

Bir istemci bağlandığında onu ekleyeceğiz. Bir mesaj gönderdiğinde onu yayınlayacağız. Bağlantısını kestiğinde ise onu kaldıracağız.

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

Sohbet uygulamamızın basit bir kullanıcı arayüzüne ihtiyacı var. Mesaj göndermek için bir girdi alanı ve bunları görüntülemek için bir div kullanarak temel HTML'den yararlanacağız.

Bu, istemci tarafı etkileşimimiz için temel oluşturmaktadır.

<!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

Şimdi, FastAPI WebSocket sunucusuna bağlanmak için HTML'imize JavaScript ekleyelim. Sayfa yüklendiği anda bir bağlantı açacağız.

Eğer farklıysa localhost:8000 adresini kendi sunucu adresinizle değiştirmeyi unutmayın!

<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

Kullanıcıların bir mesaj yazıp sunucuya gönderebilmeleri gerekir. Girdiyi yakalayan ve WebSocket bağlantısı aracılığıyla gönderen bir JavaScript işlevi oluşturacağız.

Bu işlev, form gönderildiğinde çağrılır.

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

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

Receiving & Displaying Messages

Bir sohbet uygulamasının temeli, mesajları almak ve bunları görüntülemektir. Yeni mesajları listemize eklemek için ws.onmessage olay işleyicisini uygulayacağız.

<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

FastAPI sohbet sunucumuz için eksiksiz Python kodu burada. Bunu main.py olarak kaydedin ve uvicorn main:app --reload komutunu kullanarak çalıştırın.

Bu sunucu bağlantıları dinleyecek, mesajları yayınlayacak ve kullanıcı giriş/çıkışlarını duyuracaktır.

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

Temel bir sohbet uygulaması oluşturdunuz! ConnectionManager'ın broadcast yöntemini ve FastAPI uç noktasının mantığını göz önünde bulundurun.

İstemci A sunucuya bir mesaj gönderirse, İstemci B'nin mesajı aldığından emin olmak için bir sonraki adımda ne olur?

İnteraktif derste cevapla

Chat App Summary

Tebrikler! FastAPI WebSockets kullanarak temel bir gerçek zamanlı sohbet uygulaması oluşturdunuz.

  • Bir ConnectionManager ile birden fazla aktif WebSocket bağlantısını yönetmeyi öğrendiniz.
  • Gelen ve giden mesajları işlemek için bir FastAPI WebSocket uç noktası uyguladınız.
  • Sohbet mesajlarına bağlanmak, göndermek ve almak için basit bir HTML/JavaScript istemcisi oluşturdunuz.

Bu proje, gerçek zamanlı iletişim için WebSocket'lerin gücünü göstermektedir. Buradan yola çıkarak kullanıcı kimlik doğrulaması, kalıcı sohbet geçmişi ve daha güçlü kullanıcı arayüzü/deneyimi (UI/UX) gibi özellikler ekleyebilirsiniz.

Başlamak ücretsiz

Yapay zeka eğitmeniyle FastAPI Backend Development Bootcamp öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar
21
Dersler
84
Ücretsiz öğrenmeye başlaTüm kursu görüntüle

Sıkça Sorulan Sorular

“Gerçek Zamanlı Sohbet Uygulaması Oluşturma” dersi ücretsiz mi?

Evet — “Gerçek Zamanlı Sohbet Uygulaması Oluşturma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve FastAPI Backend Development Bootcamp kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. FastAPI Backend Development Bootcamp kursu toplamda 4 dersten oluşur.

“Gerçek Zamanlı Sohbet Uygulaması Oluşturma” dersinde ne öğreneceğim?

FastAPI'de WebSocket özelliklerini gösteren basit bir gerçek zamanlı sohbet uygulaması geliştirin. FastAPI Backend Development Bootcamp ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

FastAPI Backend Development Bootcamp öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te FastAPI Backend Development Bootcamp, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Gerçek Zamanlı Sohbet Uygulaması Oluşturma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu FastAPI Backend Development Bootcamp dersinde kod yazıp çalıştırabilir miyim?

Evet. Her FastAPI Backend Development Bootcamp dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. WebSocket Protokolü Temelleri
  2. FastAPI'de WebSockets Uygulama
  3. Gerçek Zamanlı Sohbet Uygulaması Oluşturma
  4. Yayınla/Abone Ol Arka Düzlemi ile WebSockets'i Ölçekleme
← FastAPI Backend Development Bootcamp Sayfasına Dön