DEV Community

Cover image for Python Chat Tutorial with Django and React

Python Chat Tutorial with Django and React

Nick Parsons on May 08, 2019

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 ...
Collapse
 
clinggit profile image
Chia Ling

Thanks for putting this together. I was able to complete steps 1-5. When I tried to complete Step 6 I get the following error message:

Error: userToken does not have a user_id or is not matching with user.id
StreamChat.setUser
node_modules/stream-chat/dist/browser.es.js:3186
new App
localhost:3001/static/js/main.chun...

163 | constructor(props) {
164 |   super(props);
165 |   this.client = new stream_chat__WEBPACK_IMPORTED_MODULE_2__["StreamChat"]("<removed>");
> 166 |   this.client.setUser({
167 |     id: "cool-sky-9",
168 |     name: "Cool Sky",
169 |     image: "https://getstream.io/random_svg/?id=cool-sky-9&name=Cool+sky"
Enter fullscreen mode Exit fullscreen mode

Any suggestions on what I might be doing wrong?

Collapse
 
danieltolczyk profile image
DanielTolczyk • Edited

I ran into this same issue. Couldn't figure out if it was because the chat app was named auth but not listed as an installed app, or if it was because the UnauthedRoute.js has the function name as the one in AuthedRoute.js. If it has something to do with the encoded user id in the generated token not matching the cool-sky-9 id user listed in the demo. Did everything I could to troubleshoot it and couldn't figure it out. I just know that no API call is being made. Honestly at a loss here on getting this to work.

Edit: I figure it out! The issue is that the key on the backend is being generated with obj.user.id in the serializer. This needs to be changed to obj.user.username if you want to match the username on the front end. In this particular demo cool-sky-9 or whatever have you. This will let you authenticate. The only issue you should run into after this is that you need your API keys from the CHAT part of the website. To have the chat functionality there is a free trial otherwise it's $499 a month from what I saw. So if you're looking at this for a personal project or something fun make sure you don't get charged!

Collapse
 
isaidspaghetti profile image
Taylor Graham

I had the same issue and this was the solution. The 'id' value from client.setUser must match the argument for client.createToken

const streamToken = client.createToken('exactNameHere');

await client.setUser(
{
id: 'exactNameHere'
},

Collapse
 
xjdevto profile image
xjdevto

Same error here.

Error: userToken does not have a user_id or is not matching with user.id

All I changed:

mychat/settings.py on line 47 and 48 => 4tk***, zgbw6*********************************
chat-frontend/src/Chat.js on line 17 => this.client = new StreamChat("60XXX");

Collapse
 
calag4n profile image
calag4n

I have the same error, did you guys find a fix ?

Great tuto though.

Collapse
 
nickparsons profile image
Nick Parsons

Happy to help. Any chance your API key is mixed up / not the same between your app and server-side code? This would throw that kind of error.

Collapse
 
zedgr profile image
ZED

I have the same issue and I am using the following:

For the Frontend
this.client = new StreamChat("69XXX");

For the Backend at settings.py
STREAM_API_KEY = "g4eXXXXXXXXX"
STREAM_API_SECRET = "4wyXXXXXXXXX..."

Collapse
 
clinggit profile image
Chia Ling

I have the Chat.js and settings.py files updated with the same API key. Is there somewhere else the API key needs to be set that I missed?

Thread Thread
 
rhenter profile image
Rafael Henter • Edited

The problem is that the Django User ID is an integer and the Chat is missing some code.
Following my examples:

github.com/rhenter/stream-chat-api
github.com/rhenter/stream-chat-react

PS: In the React Project I didn't create a Custom Readme, so you must to add you credentials on Chat.js if you wore to try to use

Collapse
 
tschellenbach profile image
Thierry

nice job on the writing Nick.

Collapse
 
nickparsons profile image
Nick Parsons

Thank you!

Collapse
 
joemcmahon profile image
Joe McMahon

Thanks for reminding me how easy it is to do APIs with Django! I have an upcoming project that needs an admin frontend, a batch-ish portion, and an API all three; going with Django will make it easy to just get it done.

Collapse
 
dumdum profile image
dum dum • Edited

How to deploy it on Heroku?
Should I use 2 plans?
Or I can deploy it in one plan?

I want to use Django with React, but got confused about the deployment, and how to set Static and Media, and combining templates and components.

Because React and Django have different folder location.

Especially, I've developed an app using Django, and want to using React on the way and not from the start.

Or I should stick with only Jquery Ajax instead of React for my front end?

Please advise. Thanks

Collapse
 
rajasimon profile image
Raja Simon

At this stage, Django Channels ( WebSocket support ) is more matured and can able to use in production.

Collapse
 
tschellenbach profile image
Thierry

Django Channels work, but the performance just isn't great. It's a good fit if your app is small. If it grows you'll want to use C++, Java, Elixir or Golang (my favorite) for websockets in order to be cost effective.

Collapse
 
jheld profile image
Jason Held

What benchmarks are you using to determine the performance evaluation?

True, synchronous code running on an internal thread executor on an event loop will be slower than fully async, but still curious.

And which version of channels did you try most recently?

Collapse
 
kaileyoliver profile image
Kailey Oliver

Building a live chat app is a fun and a proper challenge. It's not your simple management system and its something unique. Thanks Nick for sharing this tutorial.

Collapse
 
rogerortiza profile image
Roger

Nice tuto, Thanks!

Collapse
 
nickparsons profile image
Nick Parsons

Happy to put it out in the wild! Enjoy!

Collapse
 
nickparsons profile image
Nick Parsons

Have questions? Drop them here! I'm happy to help you out!

Collapse
 
steelwolf180 profile image
Max Ong Zong Bao

Cool way to use it as I had problems in using web sockets with Django in the past.

Due to the complexity and rewrite of the libraries with very little tutorial information.

Collapse
 
codeperfectplus profile image
Deepak Raj

Website to Learn Python, Machine Learning And Data Science.
bit.ly/codeperfectplus

Collapse
 
omarkhatib profile image
Omar

Thanks it's Helpfull.

Collapse
 
devanghingu profile image
Devang Hingu

umm. Actually i stuck it my final year project idea. i just spent 1.5 month on DJANGO. and done one project(with crud). if you have any idea please, share with me.

Collapse
 
sudarshansb143 profile image
sudarshan

You can use Flask also