Django and HTMX #21 - WebSocket Notifications with the HTMX WebSocket Extension and django-channels

[@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]

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!

[@haroldpepete]

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]

Thanks a lot for subscribing! Rails is cool too!

[@krystian-magdziarz]

Your videos are one of the best in django niche.

[@bugbytes3923]

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

[@vincentrandon8124]

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

[@bugbytes3923]

Great, hope it was useful! Thanks.

[@FGvelo]

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.

[@abbas9257]

Best Django channel ever!

[@bugbytes3923]

@@abbas9257 thanks so much for the kind words!

[@sultanal-otaibi6179]

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

[@bugbytes3923]

Thanks very much, I appreciate that!

[@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]

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

[@dmitrymikhailovnicepianomu8688]

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!

[@gurjika]

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]

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

[@mr_don_key]

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!

[@DarshModi-il5et]

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

[@bugbytes3923]

Thank you very much, and thanks for watching!

[@hazadus]

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!

[@fernandtape9363]

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!

[@antonioinochi9170]

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!

[@Bartburger02]

🙌 another great tutorial, thank you!

[@bugbytes3923]

Thanks very much!

[@khunjohn1054]

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!

[@developer-pf2fl]

Thankyou for this amazing tutorial .

[@bugbytes3923]

Thanks a lot!

[@raffritter6766]

Very interesting video, I appreceate your time

[@bugbytes3923]

Thanks a lot!

Great content!

[@bugbytes3923]

Thank you!

[@mahmoudabdelaziz8940]

Great and to the point as usual

[@bugbytes3923]

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

[@ChinseokLee]

Really AWESOME contents ~ !!! 👍

[@bugbytes3923]

Thank you! Much appreciated

[@JustinSpryce]

Great Lesson sir, learnt alot

[@bugbytes3923]

Thank you as ever!

[@mariocortes2670]

Great video! thanks

[@bugbytes3923]

Thanks a lot!

[@АлексейБочкарев-ь6х]

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

[@bugbytes3923]

Спасибо! :)

[@jacobgoldenart]

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]

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

[@ProfeDuilio]

Excellent !

[@bugbytes3923]

Many thanks!

[@aashayamballi]

Thank you 👍🏾

[@bugbytes3923]

You're welcome! Many thanks!

[@AliHassan-wc6nb]

Brilliant!

[@bugbytes3923]

Thank you!

[@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]

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 🙂

[@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]

Thanks Peter! I'll update the repo 👍

[@juanbetancourt5106]

Thank you good Sir.

[@fidelischukwunyere3142]

Thanks for this clear tutorial. But I just noticed that for some reason, htmx doesn't pick up the boostrap stylings I've when rendering the partial. Until after a full page reload.

[@ahmedhashim5043]

Thats great thanks you

[@bugbytes3923]

You're welcome!

[@101kawsar]

Cool!! 😳

[@bugbytes3923]

Thanks!

[@frameff9073]

Good thank you

[@bugbytes3923]

You're welcome!

[@knowislamproject]

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

[@ntwarioscar]

same to me I don't know what happened

[@fadyghalayiny2825]

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

[@khalidseflan301]

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

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

[@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?

[@ajeeshas1203]

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

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

[@ioandraghici3538]

Is it possible to send a custom HTMX trigger via Websockets?

[@alexdin1565]

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

[@bugbytes3923]

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

[@Huraira_idrees]

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?

[@davidbilidam953]

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

[@eliotnavarro8443]

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

[@RitvikChauhan-z3z]

there is no login page and signup page

[@bugbytes3923]

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

[@RitvikChauhan-z3z]

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

[@Tungdang-tv7sd]

how to body tabele htmx

[@logan76able]

le dejo mis dieses

[@halimahussein9490]

can i hear notification sound

[@bugbytes3923]

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.

[@tochimclaren]

Every time some covers Django channels. They gloss over it quickly. Making it difficult to understand what they are even saying. It's so annoying it's like they show you look at this cool stuff I made and that's just it. Terrible terrible tutor you are.

[@bugbytes3923]

@@tochimclaren sorry to hear that. I suggest checking out the Django-channels docs before you watch videos, if you don’t understand things.

[@tochimclaren]

@@bugbytes3923 Yeah that's what I'm doing right now. Just saying the mind of lots of your subscribers. As a tutor, you TEACH. That's the most important part. The teaching.

[@bugbytes3923]

@@tochimclaren There are videos that are not designed for beginners though... we cannot always focus on fundamentals in every video. The feedback for this video has been entirely positive, except for your comment. I hope the docs can help though!

[@tochimclaren]

@@bugbytes3923 👍