Django and HTMX #21 - WebSocket Notifications with the HTMX WebSocket Extension and django-channels
In this video, we look at how to use HTMX's WebSocket extension along with Django, and create a notification system where the Django backend sends HTML notifications through the websocket and the HTMX extension swaps these into the DOM.
We will use Django Channels to facilitate the websocket connection and send the HTML content over that connection.
Notifications are fired to logged-in users when a NEW USER SIGNS UP - this is done by using a Django Signal to hook into the User model's save method, and send a message over the Channel Layer.
Starter code can be found here: github.com/bugbytes-io/django...
Final code for the video is on the 'final' branch: github.com/bugbytes-io/django...
📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
02:55 Setting up Django-channels
05:46 Installing HTMX Websocket extension
08:03 Creating a Consumer class in Django-channels
09:46 Creating a web socket routing configuration with Django-channels
12:52 Consumer instances and channel layers
16:53 Adding channels to groups in Django-channels
19:41 Using Django signal to get new user signups
21:50 Use channel layer to send message to all channels in a group
26:22 Returning HTML from the consumer for the HTMX Websocket extension
31:01 Rejecting websocket connection for unauthenticated users
33:10 Indicating the number of notifications on the client-side
37:16 Clearing all notifications
☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:
ko-fi.com/bugbytes
▶️ Full Playlist:
• Django & HTMX
𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: bugbytes.io/posts/
👾 Github: github.com/bugbytes-io/django...
🐦 Twitter: / bugbytesio
📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
Starter Code: github.com/bugbytes-io/django...
Django Channels: channels.readthedocs.io/en/st...
Channels Tutorial Pt 2: channels.readthedocs.io/en/st...
HTMX WebSocket extension: htmx.org/extensions/web-sockets/
Consumer Classes: channels.readthedocs.io/en/st...
Channel Layers: channels.readthedocs.io/en/st...
Django Signals: docs.djangoproject.com/en/4.1...
Tailwind Elements Alerts: tailwind-elements.com/docs/st...
#django #python #htmx #websocket
Пікірлер: 98
Hello sir, I hope this message finds you well. I am an avid viewer of your channel and have learned a great deal from your tutorials on Django and the Django htmx series. I was particularly impressed by your coverage of the basics and intermediate topics and would love to see more advanced content on this subject. It would be amazing if you could consider starting a new series on advanced topics in the Django Rest Framework for example web-socket in DRF. I believe this would not only benefit myself but also your other viewers who are looking to take their skills to the next level. Your clear and concise teaching styler makes it easy for people like me to understand complex topics, and I have no doubt that a series on advanced Django Rest Framework topics would be incredibly valuable. Thank you for all the hard work you put into creating quality content for your viewers. I am truly grateful for all the knowledge you have imparted thus far.
@peterevance
Жыл бұрын
Indeed, Bug bytes is a gem in the django community!
@bugbytes3923
Жыл бұрын
Thank you both! Much appreciated. DRF is definitely on my list of things to do, so it will happen - hopefully in summer I think!
Amazing! I've been waiting for a tutorial like this for ages. Thanks!
@bugbytes3923
Жыл бұрын
Great, hope it was useful! Thanks.
Rarely do you see such great topics and such a brilliant presentation. Thanks!
@bugbytes3923
Жыл бұрын
Thanks very much, I appreciate that!
Thank you. I guess how many times I am going to rewatch this tutorial. Great job.
@bugbytes3923
Жыл бұрын
Thanks a lot man, and thanks for watching!
Fantastic tutorial, thank you for creating this. I understand how Channels and HTMX can work together much more now!
@bugbytes3923
Жыл бұрын
Thank you, glad the video was helpful!
Your videos are one of the best in django niche.
@bugbytes3923
Жыл бұрын
Thanks a lot Krystian! Glad to hear that! Thanks for the support.
Very nice tutorial (and tutorials on the rest of this youtube channel). 🙂 This websockets with htmx was exactly what i wanted to know for my own project. thanks! Keep it up!
🙌 another great tutorial, thank you!
@bugbytes3923
Жыл бұрын
Thanks very much!
Really good presentation with live coding. Thank you for making such a good video.
@bugbytes3923
Жыл бұрын
Thank you very much, and thanks for watching!
With you around ... have got no issue with django Thanks for all you do boss man
@bugbytes3923
Жыл бұрын
Thanks a lot man! Glad you like the content.
Thankyou for this amazing tutorial .
@bugbytes3923
Жыл бұрын
Thanks a lot!
Thanks a lot for this super detailed video on the complex and very interesting topic! Keep up the good work! Instantly subscribed.
@bugbytes3923
Жыл бұрын
Thanks a lot for subscribing! And thank you for watching, I'll do some more websocket/channels stuff soon!
@hazadus
Жыл бұрын
@@bugbytes3923 It would be great!
Great content!
@bugbytes3923
Жыл бұрын
Thank you!
Thank you good Sir.
Thank you for these amazing videos. I also really enjoyed your ORM videos. I hope you will make some more tutorials for django channels as well ❤
@bugbytes3923
4 ай бұрын
Hey, thanks a lot for the comment, really glad to hear it! Will do a django channels course soon!
i'm rails lover-developer, but i think django is a interesting framework, i have saw a lot of videos about it, and django seems rails, you have a new subscriber
@bugbytes3923
10 ай бұрын
Thanks a lot for subscribing! Rails is cool too!
Great video! thanks
@bugbytes3923
8 ай бұрын
Thanks a lot!
Great Lesson sir, learnt alot
@bugbytes3923
Жыл бұрын
Thank you as ever!
Really AWESOME contents ~ !!! 👍
@bugbytes3923
Жыл бұрын
Thank you! Much appreciated
Excellent !
@bugbytes3923
Жыл бұрын
Many thanks!
Great and to the point as usual
@bugbytes3923
Жыл бұрын
Thanks a lot! Glad it was useful. And I will do!
Really clear video, thanks. I'm not usually a fan of video how-to's; I prefer written guides but this was very succinct and useful. I'm using HTMX for the first time in my projects and it's exciting to see how web sockets can be used.
@bugbytes3923
Жыл бұрын
Thanks a lot - I'm glad the video was helpful! Best of luck with your HTMX journey.
@FGvelo
Жыл бұрын
@@bugbytes3923 am gabriel from nigeria... just want you to know that you are my hero .. just know that
@bugbytes3923
Жыл бұрын
@@FGvelo Thanks a lot! :)
Brilliant!
@bugbytes3923
Жыл бұрын
Thank you!
Tanks for all these video, there are some probably to see a video about how to set and manage cookies with django
@bugbytes3923
Жыл бұрын
Thank you! Some stuff on sessions and cookies is in the pipeline!
Websockets really well explained. I'm looking forward for the developpement of a full featured websocket application.
@bugbytes3923
Жыл бұрын
Thanks a lot! I'll get on this one soon!
Very interesting video, I appreceate your time
@bugbytes3923
Жыл бұрын
Thanks a lot!
Thank you 👍🏾
@bugbytes3923
Жыл бұрын
You're welcome! Many thanks!
As usual, this was awesome. Wonder who this would have looked with hyperscript and its socket function and or together with HTMX.
@bugbytes3923
Жыл бұрын
I'll need to look into that!
Thats great thanks you
@bugbytes3923
Жыл бұрын
You're welcome!
Good thank you
@bugbytes3923
Жыл бұрын
You're welcome!
Спасибо за видео бро, я не взял себе твой код полностью, но ты подал отличную идею реализации уведомлений, как раз сейчас работаю над такой задачей. Так держать, с меня лайк и подписка!
@bugbytes3923
Жыл бұрын
Спасибо! :)
Cool!! 😳
@bugbytes3923
Жыл бұрын
Thanks!
Thank you...the dropdown is not working for me. Is there something I need to install for tailswind to work?
@user-jf5zr2wz2z
3 ай бұрын
same to me I don't know what happened
Thanks. I love the details in your videos. Request: Could you do a FastAPI/HTMX with Websockets video? I'd love to see a cool example of making a request to the FastAPI endpoint from an HTMX page then streaming back the content from the server to the html page. Thanks!
Thanks for the video. Did you hear about Flet ? Are you going to do a video about it ? keep up the good work
@bugbytes3923
Жыл бұрын
I've not used Flet yet. Will definitely look into it though - any app ideas, feel free to let me know ;)
Thanks for sharing this video. who to keep the list of notifications, since the user refreshes the page all notifications will be gone.
Cool video! You rock :) If you don't mind, I continue giving you video ideas: Where to put Business logic (models, managers, services...). Which one is better, why? What do you prefer? 🙂
@bugbytes3923
Жыл бұрын
Thanks a lot! And thanks for your suggestions - this is a very interesting one, so I'll add it to my list. Very opinionated topic though ... 😁
@MagnusAnand
Жыл бұрын
@@bugbytes3923 It is indeed 🙂
Another excellent video! Just fyi you may want to update the git with another tw-elements cdn link as the one in there can't be found.
@bugbytes3923
Жыл бұрын
Thanks Peter! I'll update the repo 👍
Are we using channels for notifications with external applications? Could we do the same with signals only, if we do not need to notify externally?
Hi, I have a doubt. How are you targeting the response to display in the notification? I’m trying hx-target but it is not working. The response is printing in the console on event subscription.
I am doing same process as you are doing but I am not getting output on the terminal like of connect,disconnect and that specific.. in memory thing.
finally the most waited tutorial really thanks but the source code is not available
@bugbytes3923
Жыл бұрын
My apologies - I've made the repository public now: github.com/bugbytes-io/django-htmx-websockets
Trying to adapt the code to a personal project. I stumble on the front end rendering. How do you create the relationship from "partials/notification.html" to your navbar.html? It seems you are referring to the id of the divs (in partials and navbar). This connection is not happening with me. The only alternative I found is to use {%include %} but you dont seem to use it in your code... and {%include %} seem to actually render the notification template even if no user is created. The only difference with your code is that I am not using Tailwind. But this shouldnt impact the rendering. or could it? (great stuff by the way!)
Hi @bugbites, Could you please do a video on htmx sse with django?
why in the github repo the app is set as an WSGI¿?
Please how much will it cost to add Django real chat and notifications to my project
I am getting error, not found /ws/notifications also no messages are sent, my code is exact copy of yours, can you please help me?
please if you can make a video on how we can deploy this app on server it will be very helpful
@bugbytes3923
4 ай бұрын
There are some deployment videos in the pipeline, so hopefully soon! Thanks for the suggestion.
le dejo mis dieses
can i hear notification sound
@bugbytes3923
10 ай бұрын
You would have to extend the code from the video, but that is possible, yes. On the client-side, when the WebSocket message is received, you could trigger an action.
there is no login page and signup page
@bugbytes3923
7 ай бұрын
To keep the video a bit more concise, this is not included.
@user-nu4qi2hl1e
7 ай бұрын
@@bugbytes3923 please change in ur github i want that also soo that i am able to that notification part