Django Push Notifications Example: Socket-powered Real-time Updates with HTML Templates (2023)

Here is an example of how to implement push notifications using Django Channels with a HTML template:\n\n1. Install required packages:\n - Django Channels: pip install channels\n - Redis: pip install channels_redis\n\n2. Create a new Django project and app:\n \n $ django-admin startproject myproject\n $ cd myproject\n $ python manage.py startapp myapp\n \n\n3. Configure Django Channels in settings.py:\n python\n INSTALLED_APPS = [\n ...\n 'channels',\n 'myapp',\n ]\n\n CHANNEL_LAYERS = {\n 'default': {\n 'BACKEND': 'channels_redis.core.RedisChannelLayer',\n 'CONFIG': {\n 'hosts': [('localhost', 6379)],\n },\n },\n }\n \n\n4. Create a new file routing.py in the project directory:\n python\n from django.urls import path\n from myapp.consumers import NotificationConsumer\n\n websocket_urlpatterns = [\n path('ws/notifications/', NotificationConsumer.as_asgi()),\n ]\n \n\n5. Update asgi.py to include the routing configuration:\n python\n import os\n from django.core.asgi import get_asgi_application\n from channels.routing import ProtocolTypeRouter, URLRouter\n from myproject import routing\n\n os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'myproject.settings')\n\n application = ProtocolTypeRouter({\n "http": get_asgi_application(),\n "websocket": URLRouter(routing.websocket_urlpatterns),\n })\n \n\n6. Create a new file consumers.py in the myapp directory:\n python\n from channels.generic.websocket import AsyncWebsocketConsumer\n import json\n\n class NotificationConsumer(AsyncWebsocketConsumer):\n async def connect(self):\n await self.accept()\n\n async def disconnect(self, close_code):\n pass\n\n async def receive(self, text_data):\n text_data_json = json.loads(text_data)\n message = text_data_json['message']\n\n # Send notification to all connected clients\n await self.channel_layer.group_send(\n 'notifications',\n {\n 'type': 'notification',\n 'message': message\n }\n )\n\n async def notification(self, event):\n message = event['message']\n\n # Send notification to current client\n await self.send(text_data=json.dumps({\n 'message': message\n }))\n \n\n7. Update the urls.py file in the project directory:\n python\n from django.urls import path\n from myapp.views import HomeView\n\n urlpatterns = [\n path('', HomeView.as_view(), name='home'),\n ]\n \n\n8. Create a new file views.py in the myapp directory:\n python\n from django.views.generic import TemplateView\n\n class HomeView(TemplateView):\n template_name = 'home.html'\n \n\n9. Create a new file home.html in the templates directory:\n html\n <!DOCTYPE html>\n <html>\n <head>\n <title>Push Notifications Example</title>\n <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>\n <script>\n var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";\n var ws_path = ws_scheme + '://' + window.location.host + '/ws/notifications/';\n var socket = new WebSocket(ws_path);\n\n socket.onmessage = function(e) {\n var data = JSON.parse(e.data);\n var message = data.message;\n // Display the received notification\n $('#notification').text(message);\n };\n </script>\n </head>\n <body>\n <h1>Push Notifications Example</h1>\n <div id="notification"></div>\n </body>\n </html>\n \n\n10. Start the development server:\n \n $ python manage.py runserver\n \n\nNow, when you open the homepage (http://localhost:8000/), it will connect to the WebSocket and display any received notifications in the <div id="notification"> element. You can send notifications by using JavaScript to send a message to the WebSocket endpoint (/ws/notifications/). For example:\njavascript\nsocket.send(JSON.stringify({\n 'message': 'New notification!'\n}));\n\n\nNote: Make sure Redis is running on localhost:6379 as configured in settings.py.