django-commons · Chiemezuo · Oct 8, 2025 · Oct 14, 2025 · Oct 14, 2025 · Oct 14, 2025
diff --git a/docs/changes.rst b/docs/changes.rst
@@ -16,6 +16,7 @@ Pending
 * Upgraded CI ``postgis`` version to 17-3.5.
 * Added how to generate the documentation locally to the contributing
   documentation.
+* Added Django Channels chat app to the example project.
 
 6.0.0 (2025-07-22)
 ------------------

diff --git a/example/asgi.py b/example/asgi.py
@@ -9,8 +9,23 @@
 
 import os
 
+from channels.auth import AuthMiddlewareStack
+from channels.routing import ProtocolTypeRouter, URLRouter
+from channels.security.websocket import AllowedHostsOriginValidator
 from django.core.asgi import get_asgi_application
 
+from .async_.routing import websocket_urlpatterns
+
 os.environ.setdefault("DJANGO_SETTINGS_MODULE", "example.async_.settings")
+# Initialize Django ASGI application early to ensure the AppRegistry
+# is populated before importing code that may import ORM models.
+django_asgi_app = get_asgi_application()
 
-application = get_asgi_application()
+application = ProtocolTypeRouter(
+    {
+        "http": django_asgi_app,
+        "websocket": AllowedHostsOriginValidator(
+            AuthMiddlewareStack(URLRouter(websocket_urlpatterns))
+        ),
+    }
+)
diff --git a/example/async_/consumers.py b/example/async_/consumers.py
@@ -0,0 +1,36 @@
+# This is the consumer logic for the Django Channels "Web Socket" chat app
+import json
+
+from channels.generic.websocket import AsyncWebsocketConsumer
+
+
+class ChatConsumer(AsyncWebsocketConsumer):
+    async def connect(self):
+        self.room_name = self.scope["url_route"]["kwargs"]["room_name"]
+        self.room_group_name = f"chat_{self.room_name}"
+
+        # Join room group
+        await self.channel_layer.group_add(self.room_group_name, self.channel_name)
+
+        await self.accept()
+
+    async def disconnect(self, close_code):
+        # Leave room group
+        await self.channel_layer.group_discard(self.room_group_name, self.channel_name)
+
+    # Receive message from WebSocket
+    async def receive(self, text_data):
+        text_data_json = json.loads(text_data)
+        message = text_data_json["message"]
+
+        # Send message to room group
+        await self.channel_layer.group_send(
+            self.room_group_name, {"type": "chat.message", "message": message}
+        )
+
+    # Receive message from room group
+    async def chat_message(self, event):
+        message = event["message"]
+
+        # Send message to WebSocket
+        await self.send(text_data=json.dumps({"message": message}))
diff --git a/example/async_/routing.py b/example/async_/routing.py
@@ -0,0 +1,8 @@
+# This is the routing logic for the Django Channels "Web Socket" chat app
+from django.urls import re_path
+
+from . import consumers
+
+websocket_urlpatterns = [
+    re_path(r"ws/chat/(?P<room_name>\w+)/$", consumers.ChatConsumer.as_asgi()),
+]
diff --git a/example/async_/views.py b/example/async_/views.py
@@ -1,9 +1,18 @@
 from django.contrib.auth.models import User
 from django.http import JsonResponse
+from django.shortcuts import render
 
 
 async def async_db_view(request):
     names = []
     async for user in User.objects.all():
         names.append(user.username)
     return JsonResponse({"names": names})
+
+
+def async_chat_index(request):
+    return render(request, "chat/index.html")
+
+
+def async_chat_room(request, room_name):
+    return render(request, "chat/room.html", {"room_name": room_name})
diff --git a/example/settings.py b/example/settings.py
@@ -70,6 +70,14 @@
 WSGI_APPLICATION = "example.wsgi.application"
 ASGI_APPLICATION = "example.asgi.application"
 
+CHANNEL_LAYERS = {
+    "default": {
+        "BACKEND": "channels_redis.core.RedisChannelLayer",
+        "CONFIG": {
+            "hosts": [("127.0.0.1", 6379)],
+        },
+    }
+}
 
 # Cache and database
 

diff --git a/example/templates/chat/index.html b/example/templates/chat/index.html
@@ -0,0 +1,27 @@
+<!-- example/templates/chat/index.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Chat Rooms</title>
+</head>
+<body>
+  What chat room would you like to enter?<br>
+  <input type="text" id="room-name-input" size="100"><br>
+  <input type="button" id="room-name-submit" value="Enter">
+
+  <script>
+    document.querySelector('#room-name-input').focus();
+    document.querySelector('#room-name-input').onkeyup = function(e) {
+      if (e.key === 'Enter') { // enter, return
+        document.querySelector('#room-name-submit').click()
+      }
+    }
+    document.querySelector('#room-name-submit').onclick = function(e) {
+      var roomName = document.querySelector('#room-name-input').value;
+      window.location.pathname = 'async/chat/' + roomName + '/';
+    }
+  </script>
+</body>
+</html>
diff --git a/example/templates/chat/room.html b/example/templates/chat/room.html
@@ -0,0 +1,49 @@
+<!-- example/templates/chat/room.html -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Chat Room</title>
+  </head>
+  <body>
+    <textarea id="chat-log" cols="100" rows="20"></textarea><br>
+    <input type="text" id="chat-message-input" size="100"><br>
+    <input type="button" id="chat-message-submit" value="Send">
+    {{ room_name|json_script:"room-name" }}
+    <script>
+      const roomName = JSON.parse(document.getElementById('room-name').textContent);
+
+      const chatSocket = new WebSocket(
+        'ws://'
+        + window.location.host
+        + '/ws/chat/'
+        + roomName
+        + '/'
+      );
+
+      chatSocket.onmessage = function(e) {
+        const data = JSON.parse(e.data);
+        document.querySelector('#chat-log').value += (data.message + '\n');
+      };
+
+      chatSocket.onclose = function(e) {
+        console.error('Chat socket closed unexpectedly');
+      }
+      document.querySelector('#chat-message-input').focus();
+      document.querySelector('#chat-message-input').onkeyup = function(e) {
+        if (e.key === 'Enter') { // enter, return
+          document.querySelector('#chat-message-submit').click()
+        }
+      };
+
+      document.querySelector('#chat-message-submit').onclick = function(e) {
+        const messageInputDom = document.querySelector('#chat-message-input');
+        const message = messageInputDom.value;
+        chatSocket.send(JSON.stringify({
+          'message': message
+        }));
+        messageInputDom.value = '';
+      }
+    </script>
+  </body>
+</html>
diff --git a/example/templates/index.html b/example/templates/index.html
@@ -16,6 +16,7 @@ <h1>Index of Tests</h1>
         <li><a href="{% url 'turbo' %}">Hotwire Turbo</a></li>
         <li><a href="{% url 'htmx' %}">htmx</a></li>
         <li><a href="{% url 'bad_form' %}">Bad form</a></li>
+        <li><a href="{% url 'async_chat' %}">Chat app</a></li>
       </ul>
       <p><a href="/admin/">Django Admin</a></p>
     {% endcache %}

diff --git a/example/urls.py b/example/urls.py
@@ -1,3 +1,4 @@
+from async_.views import async_chat_index, async_chat_room
 from django.contrib import admin
 from django.urls import path
 from django.views.generic import TemplateView
@@ -20,6 +21,8 @@
     ),
     path("jinja/", jinja2_view, name="jinja"),
     path("async/", async_home, name="async_home"),
+    path("async/chat/", async_chat_index, name="async_chat"),
+    path("async/chat/<str:room_name>/", async_chat_room, name="room"),
     path("async/db/", async_db, name="async_db"),
     path("async/db-concurrent/", async_db_concurrent, name="async_db_concurrent"),
     path("jquery/", TemplateView.as_view(template_name="jquery/index.html")),

diff --git a/requirements_dev.txt b/requirements_dev.txt
@@ -7,6 +7,8 @@ Jinja2
 # Django Async
 daphne
 whitenoise  # To avoid dealing with static files
+channels
+channels_redis
 
 # Testing