andros/html-over-websockets-with-django-and-htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Load home page

Browse Source
This commit is contained in:
Andros Fenollosa 2021-11-12 18:59:01 +01:00
parent 35e173697b
commit 04b1e5bf6c
8 changed files with 108 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/website/consumers.py Normal file
View File

@ -0,0 +1,41 @@
import json
from channels.generic.websocket import AsyncWebsocketConsumer
from asgiref.sync import sync_to_async
from .views import page_talks
class WebsiteConsumer(AsyncWebsocketConsumer):
async def connect(self):
'''Connect user'''
self.room_name = self.scope["url_route"]["kwargs"]["room_id"]
self.room_group_name = "root_%s" % self.room_name
# Join room group
await self.channel_layer.group_add(self.room_group_name, self.channel_name)
# Send success connection
await self.accept()
# Send Home page
await self.channel_layer.group_send(
self.room_group_name,
{
"type": "page_talks"
}
)
async def disconnect(self, close_code):
''' Cliente se desconecta '''
# Leave room group
await self.channel_layer.group_discard(self.room_group_name, self.channel_name)
async def receive(self, text_data):
pass
def _get_talks(self):
return page_talks()
async def page_talks(self, event):
''' Send Home page '''
html = await sync_to_async(self._get_talks)()
await self.send(text_data=html)

7
app/website/routing.py Normal file
View File

@ -0,0 +1,7 @@
from django.urls import re_path
from . import consumers
websocket_urlpatterns = [
re_path(r'ws/pages/(?P<room_id>\w+)/$', consumers.WebsiteConsumer),
]

16
app/website/templates/layouts/base.html
View File

@ -17,6 +17,20 @@
<script defer src="{% static "js/htmx.min.js" %}"></script>
</head>
<body>
{% block content %}{% endblock %}
<div class="container">
<header>
<nav>
<ul>
<li><strong>HTML over WebSockets with htmx</strong></li>
</ul>
<ul>
<li><a href="#">Events</a></li>
<li><a href="#">Profiles</a></li>
<li><a href="#">About</a></lif>
</ul>
</nav>
</header>
<main hx-ws="connect:ws:{{ DOMAIN }}/ws/pages/{{ room_random }}/" id="page"></main>
</div>
</body>
</html>

3
app/website/templates/pages/about.html Normal file
View File

@ -0,0 +1,3 @@
<main id="page">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis dignissimos dolor inventore laudantium libero optio quo reprehenderit repudiandae sapiente similique. Delectus dolorum enim fuga fugiat ipsam nam recusandae sequi sint.
</main>

5
app/website/templates/pages/posts.html
View File

@ -1,5 +0,0 @@
{% extends 'layouts/base.html' %}
{% block content %}
Hola
{% endblock %}

9
app/website/templates/pages/talks.html Normal file
View File

@ -0,0 +1,9 @@
<main id="page">
{% for talk in talks %}
<article>
<header>{{ talk.title }}</header>
<p></p>
<footer>Author {{ talk.author.full_name }} - {{ talk.category.name }}</footer>
</article>
{% endfor %}
</main>

20
app/website/views.py
View File

@ -1,5 +1,23 @@
from django.shortcuts import render
from django.template.loader import render_to_string
from random import randint
from django.conf import settings
from .models import Talk
from asgiref.sync import sync_to_async
def index(request):
return render(request, "pages/posts.html")
"""Render layout page"""
return render(request, "layouts/base.html", {
"room_random": randint(1000000, 9999999),
"DOMAIN": settings.DOMAIN,
})
def page_talks():
return render_to_string("pages/talks.html", {
"talks": Talk.objects.order_by("title")[:5]
})
def page_about():
return render_to_string("pages/about.html", {})

18
event/asgi.py
View File

@ -6,11 +6,21 @@ It exposes the ASGI callable as a module-level variable named ``application``.
For more information on this file, see
https://docs.djangoproject.com/en/3.2/howto/deployment/asgi/
"""
import os
from django.core.asgi import get_asgi_application
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "event.settings")
import django
application = get_asgi_application()
django.setup()
from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
from django.core.asgi import get_asgi_application
from app.website.routing import websocket_urlpatterns
application = ProtocolTypeRouter(
{
"websocket": AuthMiddlewareStack(URLRouter(websocket_urlpatterns)),
}
)