The intent of this repository is to show how you can use websockets in django with htmx.
This cashier_q app is a simplified customer queue management software for retails store.
The root view is what the customer see on a screen waiting for the next available cashier, the screen alternate between 2 states : "Please Wait" and "Cashier Nºx".
The /cashier_buttons view simulate the physical buttons which is pressed to change the screen state, you can also change language.
The key here is to understand the interactions between the views and the CashierConsumer:
-
The browser sends a POST request to the demo_cashier_action view, including the cashier parameter and the value of the selected language.
-
Django processes the POST request and sends a message to the CashierConsumer using the channel layer (redis powered) to update the displayed cashier number.
{"type": "cashier.message", "num_cashier": num_cashier, "language": language}
-
Django returns an HTTP 204 response (No Content) to indicate that the request was successful but there is no additional information to send back.
-
The CashierConsumer receives the message. Look at the type of the message above, this type is bound to the function cashier_message in the consumer, if the type was ' bob.sponge' is will be bound to the function bob_sponge in the consumer
-
The browser updates the displayed message using out-of-band (OOB) swapping to show the new cashier number.
-
After 3 seconds, the timer that was started when the button was clicked sends a message to the CashierConsumer using the channel layer to reset the displayed cashier number to 0 . The CashierConsumer receives the message and updates the displayed message using out-of-band swap to show the "Wait please" message.
If you are interested to know how the channel layer (and websockets) works in Django : https://channels.readthedocs.io/en/stable/index.html
If you want to run this app you must have Redis installed somewhere, defaults settings for redis in this demo are localhost/6379
Main screen is at : http://127.0.0.1:8000/
Buttons are at : http://127.0.0.1:8000/cashier_buttons