Django Channels & Websockets with Htmx - Real-Time Chat app - Part 3

Поділитися
Вставка
  • Опубліковано 9 січ 2025

КОМЕНТАРІ • 65

  • @ajudmeister
    @ajudmeister  7 місяців тому +2

    ⚠ The htmx script tag in the header should not have the defer attribute, as the htmx extension requires it to be loaded beforehand and depends on it. The defer attribute means the script is executed only after the HTML document has been fully parsed.
    In the base.html file get rid of the "defer" in , so just

  • @frankwang0721
    @frankwang0721 8 місяців тому +1

    dude, there's nothing I can't say but you are AMAZING!

  • @zb9458
    @zb9458 9 місяців тому +1

    Wow great stuff! HTMX really shines here. Amazing stuff Andreas!

    • @ajudmeister
      @ajudmeister  9 місяців тому

      Yea htmx makes it very simple and straightforward. Thank you

  • @hoschi60
    @hoschi60 4 місяці тому

    Danke!

  • @Armin-q6p
    @Armin-q6p 9 місяців тому +1

    Excellent stuff, it really helps me a lot, thx

  • @Dutch-linux
    @Dutch-linux 7 місяців тому +1

    I am trying to create a click game like mobwars or like mafia wars used to be.. how do i make a clan chat where members of a clan only chat with the clan and they auto join when logged in ??

    • @ajudmeister
      @ajudmeister  7 місяців тому

      Check out the Group Chat tutorial: ua-cam.com/video/mfpzFemewDQ/v-deo.html.

  • @sacredgr0v3
    @sacredgr0v3 2 місяці тому

    Do you generate html for each user in group ? As I understood you call group_send and for each user in group apllies logic from message_handler, isn't it ?

    • @ajudmeister
      @ajudmeister  2 місяці тому

      Yes exactly. The group_send sends the same event to all members in the group, and the message_handler renders a individual code partial for each user.

  • @SmartLingua-f3s
    @SmartLingua-f3s 9 місяців тому

    Amazing stack, thanks for your dedication! I wonder if Hyperscript can be used instead of JS sprinkle...

    • @ajudmeister
      @ajudmeister  9 місяців тому +1

      For some things hyperscript is fantastic like resetting the input field, for other things, especially when there is more logic involved, it is harder to use. Also hyperscript is still young, so there are not many resources available.

  • @madhangopal5878
    @madhangopal5878 9 місяців тому

    Your video was good. But I have few doubts.
    1) when I am using WiFi may be some time loss connection on that time. ws protocol was not able to communicate through server from client end. In this case what is your opinion.

    • @madhangopal5878
      @madhangopal5878 9 місяців тому

      How to handle this situation

    • @ajudmeister
      @ajudmeister  9 місяців тому

      You can implement logic in your HTMX views to handle reconnection attempts. This could involve detecting when the connection is lost and automatically attempting to reconnect to the WebSocket server using JavaScript. You can use the onerror event handler of the WebSocket object to detect connection errors and trigger reconnection attempts.

  • @GotJi-it1es
    @GotJi-it1es 8 місяців тому +1

    thank you for your great video. But while I was following along with you until minute 10, I encountered a problem where I couldn't connect to the websocket. How should I fix this?

    • @ajudmeister
      @ajudmeister  8 місяців тому +1

      So you don’t get the handshake? Is htmx installed? Is the routing set up correctly? The problem could also be from a spelling mistake somewhere

    • @GotJi-it1es
      @GotJi-it1es 7 місяців тому

      @@ajudmeister Thank you for your response. I have encountered a problem. I put 'defer' with htmx.js .... 🥲🥲

    • @Qubit-sj6qo
      @Qubit-sj6qo 7 місяців тому +1

      @@ajudmeister Hii, first of all this is such an informative series, I have learnt till now. Everything was working properly untill I tried to set the websocket connection. It didnt work for some reason even after following each step. Its not completing the handshake, htmx is installled, routing is good. I have checked so many times, couldnt find any spelling mistake anyways. Can I contact you by mail or somewhere as I have been stuck here since 3 days :

    • @ajudmeister
      @ajudmeister  7 місяців тому +1

      @@Qubit-sj6qo yes sure, send me the code pieces you have to ajudmeister@gmail.com then I can have a look .

    • @twiceasviewtiful
      @twiceasviewtiful 7 місяців тому

      @@ajudmeister I get now why some people encountered a problem. It stems from django starter assets repo. Url for htmx in base.html contains different url and defer.

  • @ashinrajm9209
    @ashinrajm9209 8 місяців тому

    if am using react as frontend which extension do i need to use??
    i have seen lot of packages in npm for it.

    • @ajudmeister
      @ajudmeister  8 місяців тому +1

      Hi, you can use WebSocket API directly in React to communicate with Django Channels, or the react-websocket package.

    • @ashinrajm9209
      @ashinrajm9209 8 місяців тому

      Thanks for this😁
      do you have any community or other platform to interact with you??

    • @ajudmeister
      @ajudmeister  8 місяців тому

      ​@@ashinrajm9209 I am not connected to any community or platform

  • @kailasvs73
    @kailasvs73 5 місяців тому

    TypeError: Group name must be a valid unicode string with length < 100 containing only ASCII alphanumerics, hyphens, underscores, or periods, not demo
    my group name is demo still showing this error what may be the reason

    • @ajudmeister
      @ajudmeister  5 місяців тому

      @@kailasvs73 Maybe you are not adding it as a string with quotes: “demo” ?

    • @kailasvs73
      @kailasvs73 5 місяців тому +1

      @@ajudmeister its solved actually iam passing chatroom id instead of chatroom name
      thanks for revert

  • @jdg24g
    @jdg24g 3 місяці тому

    Mine stayed in that I have to reload the page for it to send the message. I don't know where I might have gone wrong

    • @jdg24g
      @jdg24g 3 місяці тому

      I'm stuck at minute 15:10

    • @ajudmeister
      @ajudmeister  3 місяці тому

      Somehow your htmx call doesn’t work. It’s saved in the database, that’s why when you reload you see it, it just doesn’t send the message straight back. Maybe a typo somewhere? You can also send me the code then I can have a look

  • @syedadilfazal6588
    @syedadilfazal6588 2 місяці тому

    How do we implement a Restframework on it , I want to integrate it with a react native frontend

    • @ajudmeister
      @ajudmeister  2 місяці тому +1

      @@syedadilfazal6588 I will look into the Restframework in a future tutorial, but you would need to rewrite the functions to work with APIs. Maybe there are tools out there which can do that for you.

    • @syedadilfazal6588
      @syedadilfazal6588 2 місяці тому

      @ Yeah I am trying on that thanks . And will be waiting for the tutorial with Restframework

  • @alone3759
    @alone3759 8 місяців тому

    my http server not working when iam using daphne server if i use daphne server seprate terminal it doesnot relode the code changes

    • @ajudmeister
      @ajudmeister  8 місяців тому

      does your website not work at all with Daphne? There might be some configurations issues then. But if you just don't see the code changes you have made, you need to restart the server. Daphne doesn't support automatic code reloading like Django's development server does.

  • @kaizer3937
    @kaizer3937 8 місяців тому

    will there be similar videos about django-channels-restframework?

  • @salo_kh
    @salo_kh 8 місяців тому +1

    I love it

  • @kaizer3937
    @kaizer3937 8 місяців тому

    For some reason, after sending a message, it is duplicated under the previous ones, although one message is created in the database

    • @ajudmeister
      @ajudmeister  8 місяців тому

      Hmm, does this happen before implementing the channel layer?

    • @kaizer3937
      @kaizer3937 8 місяців тому +1

      @@ajudmeister I already fixed it, thanks, I made a mistake in the templates

    • @overarchingenigma
      @overarchingenigma 7 місяців тому +1

      @@kaizer3937what kind of mistake? I have the same issue

    • @vaig655477
      @vaig655477 4 місяці тому

      @@overarchingenigma For me it was in consumers.py in receive method. I deleted self.send and other stuff that was already in message_handler

  • @IqbalArain-io3du
    @IqbalArain-io3du 9 місяців тому

    thanks Andres 😽

  • @frameff9073
    @frameff9073 9 місяців тому +1

    good thank you

  • @mahmoudramadan6581
    @mahmoudramadan6581 9 місяців тому

    Great ✅✅✅

  • @IqbalArain-io3du
    @IqbalArain-io3du 9 місяців тому

    Do you ❤ plan to upload video about multiple user roles example: [ teacher, admin, student, parent ].

    • @ajudmeister
      @ajudmeister  9 місяців тому

      Do you mean different chatrooms for specific user groups?

    • @IqbalArain-io3du
      @IqbalArain-io3du 9 місяців тому

      ​I mean handling multiple user types.
      For example:
      A django project for a school that deals with different types of users and their roles. [Admin, Teacher, Parent, Student].
      Each user type has very specific roles that they can perform.
      I hope I am able to put this into words.
      Best Regards ❤

    • @ajudmeister
      @ajudmeister  9 місяців тому +1

      I might build a project around it but no plans so far. One way to do this is to create individual tables for different roles so they can have unique properties. Then you can apply selected permissions and authentication to them. Django also allows you to group people together in Groups based on their roles and with specific permissions. It really depends on the project what the best approach would be.

  • @SpeedCodes-oc7ed
    @SpeedCodes-oc7ed 9 місяців тому

    thats amazing :D

    • @ajudmeister
      @ajudmeister  9 місяців тому

      Thank you!

    • @SpeedCodes-oc7ed
      @SpeedCodes-oc7ed 9 місяців тому

      @@ajudmeister Mr Jud what do you prefer alpine ajax or htmx? and why?

    • @ajudmeister
      @ajudmeister  9 місяців тому

      @@SpeedCodes-oc7ed I haven't tried Alpine AJAX yet, but from what I understand it returns Jason, not html. I still prefer htmx as the syntax is very simple to use and with the html response you get it integrates seamlessly into a Django project. But if you prefer a Jason response then Alpine AJAX is a great option and is super lightweight if you are already using Alpine JS.

  • @screenplay4u
    @screenplay4u 9 місяців тому

    Can you please just tell me how to connect websocket with django

    • @ajudmeister
      @ajudmeister  9 місяців тому

      Install asgi server, add server to installed apps, change to asgi application, add the websocket connection in your asgi.py file. See instructions in the video