FastAPI Backend Development Bootcamp · レッスン

リアルタイムチャットアプリケーションの構築

FastAPIにおけるWebSocketの機能を実証する、シンプルなリアルタイムチャットアプリケーションを開発します。

「リアルタイムチャットアプリケーションの構築」はCoddyKit上の無料FastAPI Backend Development Bootcampレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これは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時間対応のAIチューター）、FastAPI Backend Development Bootcampコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 FastAPI Backend Development Bootcampコースには全4レッスンが含まれています。

「リアルタイムチャットアプリケーションの構築」で何を学びますか？

FastAPIにおけるWebSocketの機能を実証する、シンプルなリアルタイムチャットアプリケーションを開発します。ブラウザで直接実行するハンズオンコードでFastAPI Backend Development Bootcampを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

FastAPI Backend Development Bootcampを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFastAPI Backend Development Bootcampは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「リアルタイムチャットアプリケーションの構築」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFastAPI Backend Development Bootcampレッスンでコードを書いて実行できますか？

はい。すべてのFastAPI Backend Development Bootcampレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← FastAPI Backend Development Bootcampに戻る