Table of Contents

1. Challenge

   Getting Started

   Welcome to this guided lab on building a real-time chat application with FastAPI and WebSockets! Traditional web applications rely on a request-response model, where the client always initiates communication. WebSockets break this pattern by establishing a persistent, bidirectional connection between the client and server.

   In this lab, you'll start with a basic FastAPI application and a simple HTML/JavaScript frontend. You'll then build the WebSocket backend, starting from a simple connection and progressively adding security, state management, and multi-room capabilities.

   To keep the project organized, all the chat logic you write has be contained within the app/chat.py file, which has been provided for you.

   Running the Application

   You can run the application to test the application throughout the lab. In the Terminal tab, start the server by running the following command:

   fastapi dev --host 0.0.0.0
   

   The command will start the application and you can view your progress in the Web Browser.

2. Challenge

   Establishing the Initial WebSocket Endpoint

   The core of your application is the WebSocket endpoint. Unlike a standard HTTP endpoint, a WebSocket endpoint manages a long-lived connection. FastAPI makes this incredibly simple with its WebSocket class and the @router.websocket() decorator.

   In this step, you'll create a basic endpoint that accepts a connection and registers it with the main application so clients can reach it. A function in a module doesn't do anything until it's connected to the main application. By including the router, you're telling FastAPI to check this module for incoming requests that match its routes.

3. Challenge

   Securing the Connection with JWT

   An open WebSocket is a security risk. You must ensure that only authenticated users can connect. To do this, you'll use JSON Web Tokens (JWT). The client receives a token from a standard REST endpoint and passes it to the WebSocket endpoint when initiating a connection.

   You'll implement this using FastAPI's powerful dependency injection system. You'll create a reusable function that validates the token and provides user information to our endpoint. Now apply the dependency. When you add it to the endpoint's function signature, FastAPI automatically enforces the security check on every connection attempt.

4. Challenge

   Managing Connections and Broadcasting Messages

   A chat application must keep track of who is connected and be able to send messages to them. Since each WebSocket connection is a separate object handled by a separate function call, you need a centralized, shared object to manage state across all connections. This is a good use case for a singleton class, which you'll call ConnectionManager. Now that the manager tracks connections, the next step is to add methods to send messages. Finally, put the pieces together. The WebSocket endpoint will delegate all connection and messaging tasks to the ConnectionManager instance.

5. Challenge

   Implementing User Presence Notifications

   A key feature for any chat app is showing who is in the room. You'll implement this by broadcasting a system message whenever a user joins or leaves. To do this, extend the ConnectionManager and update the endpoint logic. With the user list available, you can announce when a new person arrives. To complete the presence feature, you'll also announce when someone leaves.