Python Chat Tutorial with Django and React
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 src/App.js with:
Next, run 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.
Visit 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:
Then, edit 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:
https://djoser.readthedocs.io/en/latest/sample_usage.html
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):
Install stream-chat:
Create a custom serializer in auth/serializers.py with the following logic:
And last, use the custom serializer by updating your settings.py file:
Rerun your migration:
To verify that it works, hit the login endpoint with a POST request:
Both the auth_token and 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 djors-cors-header middleware:
And finally, add the following to your settings.py file:
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 src/ directory:
- AuthedRoute.js
- UnauthedRoute.js
- withSession.js
- Login.js
- Chat.js
App.js
AuthedRoute.js
UnauthedRoute.js
withSession.js
Login.js
Chat.js
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 settings.py:
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:
Final Thoughts
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! ✌