Realtime updates in Django using HTMX and websockets.
Project description
Trigger HTMX events usign Django Channels and websockets
An example project can be found at https://github.com/paulik123/django-htmx-live-trigger-example
This app assumes you have working Django + Channels project.
If you don't know how to set it up, you can follow this tutorial:
https://channels.readthedocs.io/en/latest/tutorial/part_1.html
Installation:
pip install django-htmx-live-trigger
Then add django_htmx_live_trigger to you INSTALLED_APPS
INSTALLED_APPS = [
...,
"django_htmx_live_trigger",
]
Then add HTMXEventsConsumer to your websocket routing in asgi.py
from django.urls import re_path
from django_htmx_live_trigger.consumers import HTMXEventsConsumer
...
application = ProtocolTypeRouter(
{
"http": django_asgi_app,
"websocket": AllowedHostsOriginValidator(
AuthMiddlewareStack(
URLRouter([
# ...
re_path(r"ws/events/(?P<group_name>\w+)/$", HTMXEventsConsumer.as_asgi()),
])
)
),
}
)
Usage:
- Add
<script src="{% static 'django_htmx_live_trigger/js/htmx-ws-events.js' %}"></script>at the end of your body (after htmx). - Add the
hx-ext="ws-events"andws-events-connect="/ws/events/<group_name>/"attributes to your<body>.
Then, wherever you want in you project, you can trigger the events like so:
from django_htmx_live_trigger import trigger
trigger("<group_name>", "<event-name>")
You can also trigger multiple events at once like so:
from django_htmx_live_trigger import trigger
import json
trigger("<group_name>", json.dumps({"event1": "value1", "event2": "value2"}))
Example
...
<body hx-ext="ws-events" ws-events-connect="/ws/events/notifications/">
<div hx-get="{% url 'fetch_notifications' %}" hx-trigger="new-notification from:body"></div>
<script src="https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js"></script>
<script src="{% static 'django_htmx_live_trigger/js/htmx-ws-events.js' %}"></script>
</body>
...
from django_htmx_live_trigger import trigger
class Notificaiton(models.Model):
...
def save(self, *args, **kwargs):
is_new = self.pk is None
super().save(*args, **kwargs)
if is_new:
trigger("notifications", "new-notification")
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file django_htmx_live_trigger-0.6.tar.gz.
File metadata
- Download URL: django_htmx_live_trigger-0.6.tar.gz
- Upload date:
- Size: 8.7 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.0.1 CPython/3.11.2
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
99b4b3cca6a0c3a9c4a9d5b1741bc1047070cd354f9d10ce9922c81085713c00
|
|
| MD5 |
9db9a3cd092782b22bd23c55b3384bac
|
|
| BLAKE2b-256 |
628efdd1831a0168eed61948bcace00e68eb275cbb80fd2d1c4806ee3d920682
|
File details
Details for the file django_htmx_live_trigger-0.6-py3-none-any.whl.
File metadata
- Download URL: django_htmx_live_trigger-0.6-py3-none-any.whl
- Upload date:
- Size: 8.7 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.0.1 CPython/3.11.2
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
8a0f4ffdec39a11839958c01a990159061a4431930b453c9d60072509aeac7e5
|
|
| MD5 |
d23939c73807785dfd01a5cace6c75e2
|
|
| BLAKE2b-256 |
517b5e661dbfd2ad0c6913d66ee55fe1db4456996dbb8d4a756c3db35e620b81
|
