Build Real-Time Apps: FastAPI, Next.js, and WebSockets

Introduction to Real-Time Applications

Real-time applications are changing how we interact with the internet. Forget constantly refreshing your browser; these apps push updates to you the moment they happen. Think live chat, collaborative documents, or real-time data dashboards. They create a more engaging and interactive user experience, making them essential in today’s fast-paced digital world. Building these apps might sound complex, but with the right tools, it’s totally achievable! We’re going to dive into how you can create your own real-time application using FastAPI, Next.js, and WebSockets. These technologies combine to provide a robust and efficient way to handle real-time communication, blending backend power with frontend reactivity.

Let’s break down why these technologies are the perfect match for real-time applications. FastAPI , our backend hero, is a modern, fast (high-performance), web framework for building APIs with Python 3.7+ based on standard Python type hints. It’s designed to be easy to use, increase development speed, and reduce errors. Next.js , on the frontend, is a React framework that enables features like server-side rendering and static site generation. This means you get a fast and SEO-friendly application. And finally, WebSockets provide the real-time communication channel, enabling bidirectional data flow between the server and the client. Unlike traditional HTTP requests, WebSockets maintain a persistent connection, allowing the server to push updates to the client instantly.

Why should you care about building real-time applications? Because they open up a world of possibilities! Imagine building a live sports score tracker, a collaborative drawing application, or a real-time stock market dashboard. These applications require instant updates and seamless communication between the server and the client. By mastering the combination of FastAPI, Next.js, and WebSockets, you’ll be equipped to create innovative and engaging user experiences that stand out. So, whether you’re a seasoned developer or just starting, this guide will walk you through the process of building your own real-time application, step by step. Get ready to level up your development skills and create something amazing!

Setting Up FastAPI for WebSockets

First, let’s get our hands dirty with FastAPI and set it up to handle WebSockets. FastAPI will act as our backend, managing the WebSocket connections and broadcasting messages to connected clients. To start, make sure you have Python installed (version 3.7 or higher is recommended). Then, you’ll need to install FastAPI and uvicorn , an ASGI server that will run our application. Open your terminal and run:

pip install fastapi uvicorn websockets

Now that we have the necessary packages installed, let’s create a basic FastAPI application that supports WebSockets. Create a file named main.py and add the following code:

from fastapi import FastAPI, WebSocket

app = FastAPI()

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
 await websocket.accept()
 while True:
 data = await websocket.receive_text()
 await websocket.send_text(f"Message text was: {data}")

In this code, we’re creating a FastAPI application and defining a WebSocket endpoint at /ws . The websocket_endpoint function is decorated with @app.websocket("/ws") , which tells FastAPI that this function should handle WebSocket connections to that endpoint. Inside the function, we first accept the WebSocket connection using await websocket.accept() . Then, we enter an infinite loop that listens for incoming messages from the client using await websocket.receive_text() . When a message is received, we send it back to the client with a prefix using await websocket.send_text(f"Message text was: {data}") .

To run the FastAPI application, use the following command in your terminal:

uvicorn main:app --reload

This command starts the uvicorn server, tells it to run the app object from the main.py file, and enables the --reload flag, which automatically reloads the server whenever you make changes to the code. With the FastAPI backend set up, you’re now ready to move on to the Next.js frontend and connect it to the WebSocket endpoint. Keep the backend running as we proceed to the next step!

Integrating Next.js for the Frontend

Alright, let’s shift our focus to the frontend and integrate Next.js to create a user interface that interacts with our FastAPI WebSocket endpoint. Next.js will provide the structure and reactivity needed to display real-time updates to the user. First, if you haven’t already, make sure you have Node.js and npm (or yarn) installed. Then, create a new Next.js project using the following command:

npx create-next-app my-realtime-app
cd my-realtime-app

This will set up a basic Next.js application in a directory named my-realtime-app . Now, let’s modify the pages/index.js file to connect to our FastAPI WebSocket endpoint and display incoming messages. Replace the contents of pages/index.js with the following code:

import { useState, useEffect } from 'react';

export default function Home() {
 const [messages, setMessages] = useState([]);
 const [ws, setWs] = useState(null);

 useEffect(() => {
 const newWs = new WebSocket('ws://localhost:8000/ws');

 newWs.onopen = () => {
 console.log('Connected to WebSocket server');
 };

 newWs.onmessage = (event) => {
 setMessages(prevMessages => [...prevMessages, event.data]);
 };

 newWs.onclose = () => {
 console.log('Disconnected from WebSocket server');
 };

 setWs(newWs);

 return () => {
 newWs.close();
 };
 }, []);

 return (
 <div>
 <h1>Real-Time Messages</h1>
 <ul>
 {messages.map((message, index) => (
 <li key={index}>{message}</li>
 ))}
 </ul>
 </div>
 );
}

In this code, we’re using the useState and useEffect hooks from React to manage the WebSocket connection and the list of messages. The useEffect hook is used to establish the WebSocket connection when the component mounts. Inside the hook, we create a new WebSocket object, passing in the URL of our FastAPI WebSocket endpoint ( ws://localhost:8000/ws ). We then define event handlers for onopen , onmessage , and onclose to handle different WebSocket events. When a message is received, we update the messages state using the setMessages function, which causes the component to re-render and display the new message. The component renders a heading and an unordered list of messages.

To run the Next.js application, use the following command in your terminal:

npm run dev

This will start the Next.js development server, and you can view the application in your browser at http://localhost:3000 . You should see a heading that says “Real-Time Messages” and an empty list. Now, if you send a message to the FastAPI WebSocket endpoint (you can use a WebSocket client like Postman or wscat), you should see the message appear in the list in real-time! With the Next.js frontend connected to the FastAPI backend, you’ve successfully created a basic real-time application. Get ready to explore more advanced features and customization options!

Enhancing the Application with User Input

So far, we’ve got a real-time application that displays messages sent from the server. But what about allowing users to send their own messages? Let’s enhance our application by adding a user input field and a button to send messages to the FastAPI backend. First, let’s modify the pages/index.js file in our Next.js project to include an input field and a button. Update the pages/index.js file with the following code:

import { useState, useEffect } from 'react';

export default function Home() {
 const [messages, setMessages] = useState([]);
 const [ws, setWs] = useState(null);
 const [newMessage, setNewMessage] = useState('');

 useEffect(() => {
 const newWs = new WebSocket('ws://localhost:8000/ws');

 newWs.onopen = () => {
 console.log('Connected to WebSocket server');
 };

 newWs.onmessage = (event) => {
 setMessages(prevMessages => [...prevMessages, event.data]);
 };

 newWs.onclose = () => {
 console.log('Disconnected from WebSocket server');
 };

 setWs(newWs);

 return () => {
 newWs.close();
 };
 }, []);

 const sendMessage = () => {
 if (ws && newMessage) {
 ws.send(newMessage);
 setNewMessage('');
 }
 };

 return (
 <div>
 <h1>Real-Time Messages</h1>
 <ul>
 {messages.map((message, index) => (
 <li key={index}>{message}</li>
 ))}
 </ul>
 <input
 type="text"
 value={newMessage}
 onChange={(e) => setNewMessage(e.target.value)}
 />
 <button onClick={sendMessage}>Send</button>
 </div>
 );
}

In this code, we’ve added a new state variable newMessage to store the value of the input field. We’ve also added an input field and a button to the component. The input field is bound to the newMessage state variable using the value and onChange props. Whenever the user types something into the input field, the setNewMessage function is called to update the newMessage state. The button has an onClick handler that calls the sendMessage function. The sendMessage function checks if the WebSocket connection is open and if there is a message to send. If both conditions are true, it sends the message to the server using ws.send(newMessage) and clears the input field by calling setNewMessage('') .

Now, let’s modify the FastAPI backend to handle incoming messages from the client and broadcast them to all connected clients. Update the main.py file with the following code:

from fastapi import FastAPI, WebSocket
from typing import List

app = FastAPI()

connected_clients: List[WebSocket] = []

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
 await websocket.accept()
 connected_clients.append(websocket)
 try:
 while True:
 data = await websocket.receive_text()
 for client in connected_clients:
 await client.send_text(f"Client says: {data}")
 except Exception:
 connected_clients.remove(websocket)

In this code, we’ve added a list called connected_clients to store all connected WebSocket clients. When a new client connects to the WebSocket endpoint, we add it to the list. When a message is received from a client, we iterate over the list of connected clients and send the message to each client. We also added a try...except block to handle exceptions that may occur when a client disconnects. If an exception occurs, we remove the client from the list of connected clients.

Now, run both the Next.js frontend and the FastAPI backend. You should be able to type a message into the input field, click the “Send” button, and see the message appear in the list of messages in real-time. If you open the application in multiple browser windows, you should see the messages appear in all windows simultaneously! With this enhancement, you’ve created a fully functional real-time chat application. Awesome!

Deploying Your Real-Time Application

Now that you’ve built an amazing real-time application, it’s time to share it with the world! Deploying your application involves a few steps, including choosing a hosting platform, configuring your environment, and deploying your code. Let’s start with the backend. For the FastAPI backend, you can use platforms like Heroku, AWS Elastic Beanstalk, or Google Cloud Run. These platforms provide a scalable and reliable environment for running your Python application. To deploy to Heroku, you’ll need to create a Procfile in the root directory of your project with the following content:

web: uvicorn main:app --host=0.0.0.0 --port=${PORT}

This tells Heroku how to run your application. You’ll also need to create a requirements.txt file that lists all the dependencies of your project. You can generate this file using the following command:

pip freeze > requirements.txt

Then, you can create a Heroku app, push your code to Heroku, and deploy your application. For the Next.js frontend, you can use platforms like Vercel, Netlify, or AWS Amplify. These platforms are specifically designed for deploying modern web applications and provide features like continuous deployment, automatic scaling, and global CDN. To deploy to Vercel, simply connect your GitHub repository to Vercel, and Vercel will automatically build and deploy your application whenever you push changes to your repository. Make sure to set the environment variables for your Next.js application, such as the URL of your FastAPI backend.

Once your application is deployed, you can access it using the URL provided by the hosting platform. Share the URL with your friends, family, and colleagues, and let them experience the magic of your real-time application! Congratulations on successfully building and deploying your real-time application using FastAPI, Next.js, and WebSockets! You’ve now gained valuable skills and knowledge that you can use to create even more amazing applications in the future. Keep exploring, keep learning, and keep building!

Conclusion

In this comprehensive guide, we’ve walked through the process of building a real-time application using FastAPI, Next.js, and WebSockets. We started by setting up the FastAPI backend to handle WebSocket connections, then integrated the Next.js frontend to create a user interface that interacts with the backend. We enhanced the application by adding user input and broadcasting messages to all connected clients. Finally, we discussed how to deploy your application to a hosting platform and share it with the world.

By mastering the combination of FastAPI, Next.js, and WebSockets, you’re now equipped to create innovative and engaging user experiences that stand out. Real-time applications are becoming increasingly popular, and the skills you’ve learned in this guide will be invaluable in your development career. So, go forth and build amazing real-time applications that solve real-world problems and delight your users! Remember to always keep exploring new technologies and techniques, and never stop learning. The world of web development is constantly evolving, and there’s always something new to discover. Happy coding!