Django Push Notifications with Channels: Real-time Updates using WebSockets (2023)

Here is an example of how to implement push notifications using Django Channels with HTML templates:\n\n1. Install the required packages:\n\npip install channels\npip install channels_redis\n\n\n2. Create a new Django project and app:\n\ndjango-admin startproject push_notifications\ncd push_notifications\npython manage.py startapp notifications\n\n\n3. Update the project settings:\npython\n# push_notifications/settings.py\n\nINSTALLED_APPS = [\n ...\n 'channels',\n 'notifications',\n ...\n]\n\nCHANNEL_LAYERS = {\n 'default': {\n 'BACKEND': 'channels_redis.core.RedisChannelLayer',\n 'CONFIG': {\n 'hosts': [('localhost', 6379)],\n },\n },\n}\n\n\n4. Create a new consumer for handling notifications:\npython\n# notifications/consumers.py\n\nfrom channels.generic.websocket import AsyncWebsocketConsumer\nimport json\n\nclass NotificationConsumer(AsyncWebsocketConsumer):\n async def connect(self):\n await self.channel_layer.group_add(\n 'notifications',\n self.channel_name\n )\n await self.accept()\n\n async def disconnect(self, close_code):\n await self.channel_layer.group_discard(\n 'notifications',\n self.channel_name\n )\n\n async def receive(self, text_data):\n text_data_json = json.loads(text_data)\n message = text_data_json['message']\n\n await self.channel_layer.group_send(\n 'notifications',\n {\n 'type': 'notification_message',\n 'message': message\n }\n )\n\n async def notification_message(self, event):\n message = event['message']\n await self.send(text_data=json.dumps({\n 'message': message\n }))\n\n\n5. Update the routing configuration:\npython\n# push_notifications/routing.py\n\nfrom django.urls import re_path\nfrom notifications.consumers import NotificationConsumer\n\nwebsocket_urlpatterns = [\n re_path(r'ws/notifications/$', NotificationConsumer.as_asgi()),\n]\n\n\n6. Create an HTML template to display notifications:\nhtml\n\n\n<!DOCTYPE html>\n<html>\n<head>\n <title>Push Notifications</title>\n <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>\n <script>\n var socket = new WebSocket('ws://' + window.location.host + '/ws/notifications/');\n\n socket.onmessage = function(e) {\n var data = JSON.parse(e.data);\n $('#notifications').append('<li>' + data.message + '</li>');\n };\n\n function sendNotification() {\n var message = $('#message').val();\n socket.send(JSON.stringify({'message': message}));\n }\n </script>\n</head>\n<body>\n <input type="text" id="message" placeholder="Enter notification message">\n <button onclick="sendNotification()">Send Notification</button>\n <ul id="notifications"></ul>\n</body>\n</html>\n\n\n7. Create a view to render the HTML template:\npython\n# notifications/views.py\n\nfrom django.shortcuts import render\n\ndef notifications_view(request):\n return render(request, 'notifications.html')\n\n\n8. Add a URL pattern for the notifications view:\npython\n# push_notifications/urls.py\n\nfrom django.urls import path\nfrom notifications.views import notifications_view\n\nurlpatterns = [\n ...\n path('notifications/', notifications_view, name='notifications'),\n ...\n]\n\n\n9. Run the Django development server:\n\npython manage.py runserver\n\n\n10. Access the notifications view in your browser:\n\nhttp://localhost:8000/notifications/\n\n\nYou should now be able to send and receive push notifications using Django Channels.