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

  • @abbaskareem5281
    @abbaskareem5281 Жыл бұрын

    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

    @peterevance

    Жыл бұрын

    Indeed, Bug bytes is a gem in the django community!

  • @bugbytes3923

    @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!

  • @vincentrandon8124
    @vincentrandon8124 Жыл бұрын

    Amazing! I've been waiting for a tutorial like this for ages. Thanks!

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Great, hope it was useful! Thanks.

  • @sultanal-otaibi6179
    @sultanal-otaibi6179 Жыл бұрын

    Rarely do you see such great topics and such a brilliant presentation. Thanks!

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks very much, I appreciate that!

  • @dmitrymikhailovnicepianomu8688
    @dmitrymikhailovnicepianomu8688 Жыл бұрын

    Thank you. I guess how many times I am going to rewatch this tutorial. Great job.

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks a lot man, and thanks for watching!

  • @danielfactorial
    @danielfactorial Жыл бұрын

    Fantastic tutorial, thank you for creating this. I understand how Channels and HTMX can work together much more now!

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thank you, glad the video was helpful!

  • @krystian-magdziarz
    @krystian-magdziarz Жыл бұрын

    Your videos are one of the best in django niche.

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks a lot Krystian! Glad to hear that! Thanks for the support.

  • @mr_don_key
    @mr_don_key2 ай бұрын

    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!

  • @Bartburger02
    @Bartburger02 Жыл бұрын

    🙌 another great tutorial, thank you!

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks very much!

  • @DarshModi-il5et
    @DarshModi-il5et Жыл бұрын

    Really good presentation with live coding. Thank you for making such a good video.

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thank you very much, and thanks for watching!

  • @FGvelo
    @FGvelo Жыл бұрын

    With you around ... have got no issue with django Thanks for all you do boss man

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks a lot man! Glad you like the content.

  • @developer-pf2fl
    @developer-pf2fl Жыл бұрын

    Thankyou for this amazing tutorial .

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks a lot!

  • @hazadus
    @hazadus Жыл бұрын

    Thanks a lot for this super detailed video on the complex and very interesting topic! Keep up the good work! Instantly subscribed.

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks a lot for subscribing! And thank you for watching, I'll do some more websocket/channels stuff soon!

  • @hazadus

    @hazadus

    Жыл бұрын

    @@bugbytes3923 It would be great!

  • Жыл бұрын

    Great content!

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thank you!

  • @juanbetancourt5106
    @juanbetancourt5106 Жыл бұрын

    Thank you good Sir.

  • @gurjika
    @gurjika4 ай бұрын

    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

    @bugbytes3923

    4 ай бұрын

    Hey, thanks a lot for the comment, really glad to hear it! Will do a django channels course soon!

  • @haroldpepete
    @haroldpepete10 ай бұрын

    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

    @bugbytes3923

    10 ай бұрын

    Thanks a lot for subscribing! Rails is cool too!

  • @mariocortes2670
    @mariocortes26708 ай бұрын

    Great video! thanks

  • @bugbytes3923

    @bugbytes3923

    8 ай бұрын

    Thanks a lot!

  • @JustinSpryce
    @JustinSpryce Жыл бұрын

    Great Lesson sir, learnt alot

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thank you as ever!

  • @ChinseokLee
    @ChinseokLee Жыл бұрын

    Really AWESOME contents ~ !!! 👍

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thank you! Much appreciated

  • @ProfeDuilio
    @ProfeDuilio Жыл бұрын

    Excellent !

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Many thanks!

  • @mahmoudabdelaziz8940
    @mahmoudabdelaziz8940 Жыл бұрын

    Great and to the point as usual

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks a lot! Glad it was useful. And I will do!

  • @melipon3
    @melipon3 Жыл бұрын

    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

    @bugbytes3923

    Жыл бұрын

    Thanks a lot - I'm glad the video was helpful! Best of luck with your HTMX journey.

  • @FGvelo

    @FGvelo

    Жыл бұрын

    @@bugbytes3923 am gabriel from nigeria... just want you to know that you are my hero .. just know that

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    @@FGvelo Thanks a lot! :)

  • @AliHassan-wc6nb
    @AliHassan-wc6nb Жыл бұрын

    Brilliant!

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thank you!

  • @antonioinochi9170
    @antonioinochi9170 Жыл бұрын

    Tanks for all these video, there are some probably to see a video about how to set and manage cookies with django

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thank you! Some stuff on sessions and cookies is in the pipeline!

  • @fernandtape9363
    @fernandtape9363 Жыл бұрын

    Websockets really well explained. I'm looking forward for the developpement of a full featured websocket application.

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks a lot! I'll get on this one soon!

  • @raffritter6766
    @raffritter6766 Жыл бұрын

    Very interesting video, I appreceate your time

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks a lot!

  • @aashayamballi
    @aashayamballi Жыл бұрын

    Thank you 👍🏾

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    You're welcome! Many thanks!

  • @khunjohn1054
    @khunjohn1054 Жыл бұрын

    As usual, this was awesome. Wonder who this would have looked with hyperscript and its socket function and or together with HTMX.

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    I'll need to look into that!

  • @ahmedhashim5043
    @ahmedhashim5043 Жыл бұрын

    Thats great thanks you

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    You're welcome!

  • @frameff9073
    @frameff9073 Жыл бұрын

    Good thank you

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    You're welcome!

  • @user-wz4vg8po6b
    @user-wz4vg8po6b Жыл бұрын

    Спасибо за видео бро, я не взял себе твой код полностью, но ты подал отличную идею реализации уведомлений, как раз сейчас работаю над такой задачей. Так держать, с меня лайк и подписка!

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Спасибо! :)

  • @101kawsar
    @101kawsar Жыл бұрын

    Cool!! 😳

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks!

  • @knowislamproject
    @knowislamproject Жыл бұрын

    Thank you...the dropdown is not working for me. Is there something I need to install for tailswind to work?

  • @user-jf5zr2wz2z

    @user-jf5zr2wz2z

    3 ай бұрын

    same to me I don't know what happened

  • @jacobgoldenart
    @jacobgoldenart6 ай бұрын

    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!

  • @MayasMess
    @MayasMess Жыл бұрын

    Thanks for the video. Did you hear about Flet ? Are you going to do a video about it ? keep up the good work

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    I've not used Flet yet. Will definitely look into it though - any app ideas, feel free to let me know ;)

  • @khalidseflan301
    @khalidseflan301 Жыл бұрын

    Thanks for sharing this video. who to keep the list of notifications, since the user refreshes the page all notifications will be gone.

  • @MagnusAnand
    @MagnusAnand Жыл бұрын

    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

    @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

    @MagnusAnand

    Жыл бұрын

    @@bugbytes3923 It is indeed 🙂

  • @Peterstavrou
    @Peterstavrou Жыл бұрын

    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

    @bugbytes3923

    Жыл бұрын

    Thanks Peter! I'll update the repo 👍

  • @MazingerZ-Koji
    @MazingerZ-Koji Жыл бұрын

    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?

  • @anujsh
    @anujsh9 ай бұрын

    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.

  • @rushabhshah12200
    @rushabhshah12200 Жыл бұрын

    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.

  • @fadyghalayiny2825
    @fadyghalayiny2825 Жыл бұрын

    finally the most waited tutorial really thanks but the source code is not available

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    My apologies - I've made the repository public now: github.com/bugbytes-io/django-htmx-websockets

  • @philippemele5334
    @philippemele5334 Жыл бұрын

    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!)

  • @ajeeshas1203
    @ajeeshas12037 ай бұрын

    Hi @bugbites, Could you please do a video on htmx sse with django?

  • @eliotnavarro8443
    @eliotnavarro8443 Жыл бұрын

    why in the github repo the app is set as an WSGI¿?

  • @davidbilidam953
    @davidbilidam9536 ай бұрын

    Please how much will it cost to add Django real chat and notifications to my project

  • @hurairaidrees2776
    @hurairaidrees27766 ай бұрын

    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?

  • @alexdin1565
    @alexdin15654 ай бұрын

    please if you can make a video on how we can deploy this app on server it will be very helpful

  • @bugbytes3923

    @bugbytes3923

    4 ай бұрын

    There are some deployment videos in the pipeline, so hopefully soon! Thanks for the suggestion.

  • @logan76able
    @logan76able Жыл бұрын

    le dejo mis dieses

  • @halimahussein9490
    @halimahussein949010 ай бұрын

    can i hear notification sound

  • @bugbytes3923

    @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.

  • @user-nu4qi2hl1e
    @user-nu4qi2hl1e7 ай бұрын

    there is no login page and signup page

  • @bugbytes3923

    @bugbytes3923

    7 ай бұрын

    To keep the video a bit more concise, this is not included.

  • @user-nu4qi2hl1e

    @user-nu4qi2hl1e

    7 ай бұрын

    @@bugbytes3923 please change in ur github i want that also soo that i am able to that notification part