•over 1 year ago
This tutorial will explain how to build a chat application with Python, Django and React.
Unlike other tutorials, I’m not using Python/Django for WebSocket connections. While doing so may seem cool from a tech perspective, it's pretty sluggish and expensive – especially if you have a halfway decent number of users. Languages such as C++, Go and Elixir are much better at handling the core of chat.
In this tutorial, we will use Stream, an API for chat that takes care of WebSocket connections and other heavy lifting using Go, Raft and RocksDB.
The GitHub repo for the code below can be found at https://github.com/GetStream/python-chat-example.
Let's code! 🤓
Step 1 – React Chat Demo UI
Before we start thinking about the Python chat side of things let's spin up a simple React frontend, so we have something nice and visual to look at:
Replace the code in
yarn start to see the chat in action!
Step 2 - Django/Python Setup (skip if you already have it)
Make sure you have Python 3.7 up and running.
If that does not work, please try this snippet:
Now that you’re in your virtual env you should see python 3 when you run:
To kick off a new Django project, use the following snippet:
And to start your app:
Now, when you open
http://localhost:8000, you should see this:
Step 3 - User Auth
As a next step lets setup Django’s user auth.
http://localhost:8000/admin/ and login. Voila!
You should see the Django admin screen as shown below:
Step 4 - Django Rest Framework
One of my favorite packages for integrating react with Django is Django Rest Framework. To make everything work, we will need to create endpoints for:
- User Signup
- User Login
We could build those ourselves; however, there is a package called Djoser that has already solved this problem. It configured the necessary API endpoints for user registration, login, password reset, etc.
To install Djoser, use the following snippet:
urls.py and change the file to contain:
Once complete, edit
settings.py and make the following changes:
For more on the API endpoints that Djoser exposes, have a look at this:
Now, let’s go ahead and test the registration endpoint:
Step 5 - Generating Tokens to Access Stream's Chat Server
Now we need to customize the Djoser views to generate tokens for Stream. Let’s get started.
Let's organize our files a bit and create a chat app folder in our project (make sure that you are in the correct directory):
Create a custom serializer in
auth/serializers.py with the following logic:
And last, use the custom serializer by updating your
Rerun your migration:
To verify that it works, hit the login endpoint with a POST request:
stream_token should be returned.
Step 6 - Integrating Auth in React
Adding an auth later to the frontend is an essential step for obvious reasons. In our case, it’s especially useful because we can fetch a user token from the backend API (powered by Python) and dynamically use it when sending messages.
First, install the CORS middleware package for Django:
Then, modify your
settings.py to reference the
And finally, add the following to your
The next step requires a few modifications to be made to your frontend. To start, you will want to ensure that you have all of the dependencies installed via yarn:
Next, create the following files within your
Be sure to replace
YOUR_STREAM_APP_ID with a valid Stream App ID which can be found on the dashboard.
Restart your frontend application and you should be hit with an auth wall! Enter your email and password and a token will be requested and stored in local storage.
Step 7 - Sending a Message from the Python chat server
Occasionally, you will want to write to the chat API using your backend Python-based server. Here’s a quick management command that you can use:
Verify that installed apps looks like this in
Next, create the directory
chat/management/commands. In that directory, add a file called
broadcast.py with this content:
You can try posting a message to the chat like this:
And you should see a response like this:
I hope you enjoyed this tutorial on building a chat application with Django, Python and React!
For an interactive tour of Stream Chat, please have a look at our API Tutorial on the Stream website. If you are interested in digging into the code for Stream Chat React Components, the full docs can be found here. If you are interested in building chat on top of Stream, we offer various SDKs for popular languages and frameworks with our latest being iOS (Swift).
Happy coding! ✌