Django Push Notifications Example Using WebSockets and Channels (Without Redis)

To\u0020implement\u0020push\u0020notifications\u0020using\u0020Django\u0020channels\u0020without\u0020Redis,\u0020you\u0020can\u0020use\u0020the\u0020ASGI\u0020server\u0020provided\u0020by\u0020Django\u0020channels,\u0020which\u0020is\u0020based\u0020on\u0020Daphne.\u0020Here's\u0020an\u0020example\u0020of\u0020how\u0020you\u0020can\u0020set\u0020it\u0020up:\n\n1.\u0020Install\u0020Django\u0020channels\u0020and\u0020its\u0020dependencies:\n\u0020\u0020\n\u0020\u0020pip\u0020install\u0020channels\n\u0020\u0020\n\n2.\u0020Create\u0020a\u0020new\u0020Django\u0020project:\n\u0020\u0020\n\u0020\u0020django-admin\u0020startproject\u0020push_notifications\n\u0020\u0020cd\u0020push_notifications\n\u0020\u0020\n\n3.\u0020Create\u0020a\u0020new\u0020Django\u0020app:\n\u0020\u0020\n\u0020\u0020python\u0020manage.py\u0020startapp\u0020notifications\n\u0020\u0020\n\n4.\u0020Update\u0020the\u0020project's\u0020settings.py\u0020file:\n\u0020\u0020python\n\u0020\u0020INSTALLED_APPS\u0020=\u0020[\n\u0020\u0020\u0020\u0020#\u0020...\n\u0020\u0020\u0020\u0020'channels',\n\u0020\u0020\u0020\u0020'notifications',\n\u0020\u0020]\n\n\u0020\u0020CHANNEL_LAYERS\u0020=\u0020{\n\u0020\u0020\u0020\u0020'default':\u0020{\n\u0020\u0020\u0020\u0020\u0020\u0020'BACKEND':\u0020'channels.layers.InMemoryChannelLayer',\n\u0020\u0020\u0020\u0020},\n\u0020\u0020}\n\n\u0020\u0020ASGI_APPLICATION\u0020=\u0020'push_notifications.routing.application'\n\u0020\u0020\n\n5.\u0020Create\u0020a\u0020new\u0020file\u0020routing.py\u0020in\u0020the\u0020project's\u0020root\u0020directory:\n\u0020\u0020python\n\u0020\u0020from\u0020channels.routing\u0020import\u0020ProtocolTypeRouter,\u0020URLRouter\n\u0020\u0020from\u0020django.urls\u0020import\u0020path\n\u0020\u0020from\u0020notifications.consumers\u0020import\u0020NotificationConsumer\n\n\u0020\u0020application\u0020=\u0020ProtocolTypeRouter({\n\u0020\u0020\u0020\u0020'websocket':\u0020URLRouter([\n\u0020\u0020\u0020\u0020\u0020\u0020path('ws/notifications/',\u0020NotificationConsumer.as_asgi()),\n\u0020\u0020\u0020\u0020]),\n\u0020\u0020})\n\u0020\u0020\n\n6.\u0020Create\u0020a\u0020new\u0020file\u0020consumers.py\u0020inside\u0020the\u0020notifications\u0020app\u0020directory:\n\u0020\u0020python\n\u0020\u0020import\u0020json\n\u0020\u0020from\u0020channels.generic.websocket\u0020import\u0020AsyncWebsocketConsumer\n\n\u0020\u0020class\u0020NotificationConsumer(AsyncWebsocketConsumer):\n\u0020\u0020\u0020\u0020async\u0020def\u0020connect(self):\n\u0020\u0020\u0020\u0020\u0020\u0020self.room_group_name\u0020=\u0020'notifications'\n\n\u0020\u0020\u0020\u0020\u0020\u0020await\u0020self.channel_layer.group_add(\n\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020self.room_group_name,\n\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020self.channel_name\n\u0020\u0020\u0020\u0020\u0020\u0020)\n\n\u0020\u0020\u0020\u0020\u0020\u0020await\u0020self.accept()\n\n\u0020\u0020\u0020\u0020async\u0020def\u0020disconnect(self,\u0020close_code):\n\u0020\u0020\u0020\u0020\u0020\u0020await\u0020self.channel_layer.group_discard(\n\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020self.room_group_name,\n\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020self.channel_name\n\u0020\u0020\u0020\u0020\u0020\u0020)\n\n\u0020\u0020\u0020\u0020async\u0020def\u0020receive(self,\u0020text_data):\n\u0020\u0020\u0020\u0020\u0020\u0020data\u0020=\u0020json.loads(text_data)\n\u0020\u0020\u0020\u0020\u0020\u0020message\u0020=\u0020data.get('message')\n\n\u0020\u0020\u0020\u0020\u0020\u0020await\u0020self.channel_layer.group_send(\n\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020self.room_group_name,\n\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020{\n\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020'type':\u0020'notify',\n\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020'message':\u0020message\n\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020},\n\u0020\u0020\u0020\u0020\u0020\u0020)\n\n\u0020\u0020\u0020\u0020async\u0020def\u0020notify(self,\u0020event):\n\u0020\u0020\u0020\u0020\u0020\u0020message\u0020=\u0020event['message']\n\n\u0020\u0020\u0020\u0020\u0020\u0020await\u0020self.send(text_data=json.dumps({\n\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020'message':\u0020message\n\u0020\u0020\u0020\u0020\u0020\u0020}))\n\u0020\u0020\n\n7.\u0020Update\u0020the\u0020urls.py\u0020file\u0020of\u0020the\u0020project:\n\u0020\u0020python\n\u0020\u0020from\u0020django.urls\u0020import\u0020path\n\u0020\u0020from\u0020notifications\u0020import\u0020views\n\n\u0020\u0020urlpatterns\u0020=\u0020[\n\u0020\u0020\u0020\u0020#\u0020...\n\u0020\u0020\u0020\u0020path('notifications/',\u0020views.notifications,\u0020name='notifications'),\n\u0020\u0020]\n\u0020\u0020\n\n8.\u0020Create\u0020a\u0020new\u0020file\u0020views.py\u0020inside\u0020the\u0020notifications\u0020app\u0020directory:\n\u0020\u0020python\n\u0020\u0020from\u0020django.shortcuts\u0020import\u0020render\n\n\u0020\u0020def\u0020notifications(request):\n\u0020\u0020\u0020\u0020return\u0020render(request,\u0020'notifications.html')\n\u0020\u0020\n\n9.\u0020Create\u0020a\u0020new\u0020HTML\u0020template\u0020file\u0020notifications.html\u0020inside\u0020the\u0020templates\u0020directory\u0020of\u0020the\u0020notifications\u0020app:\n\u0020\u0020html\n\u0020\u0020<!DOCTYPE\u0020html>\n\u0020\u0020<html>\n\u0020\u0020<head>\n\u0020\u0020\u0020\u0020<title>Push\u0020Notifications</title>\n\u0020\u0020</head>\n\u0020\u0020<body>\n\u0020\u0020\u0020\u0020<h1>Push\u0020Notifications</h1>\n\u0020\u0020\u0020\u0020\n\u0020\u0020\u0020\u0020<input\u0020type="text"\u0020id="messageInput"\u0020placeholder="Enter\u0020a\u0020message">\n\u0020\u0020\u0020\u0020<button\u0020id="sendButton">Send</button>\n\n\u0020\u0020\u0020\u0020<script>\n\u0020\u0020\u0020\u0020\u0020\u0020var\u0020socket\u0020=\u0020new\u0020WebSocket('ws://' + window.location.host + '/ws/notifications/');\n\n\u0020\u0020\u0020\u0020\u0020\u0020socket.onmessage\u0020=\u0020function(e)\u0020{\n\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020var\u0020data\u0020=\u0020JSON.parse(e.data);\n\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020showMessage(data.message);\n\u0020\u0020\u0020\u0020\u0020\u0020};\n\n\u0020\u0020\u0020\u0020\u0020\u0020document.getElementById('sendButton').addEventListener('click',\u0020function()\u0020{\n\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020var\u0020message\u0020=\u0020document.getElementById('messageInput').value;\n\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020socket.send(JSON.stringify({\u0020'message':\u0020message\u0020}));\n\u0020\u0020\u0020\u0020\u0020\u0020});\n\n\u0020\u0020\u0020\u0020\u0020\u0020function\u0020showMessage(message)\u0020{\n\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020var\u0020div\u0020=\u0020document.createElement('div');\n\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020div.innerHTML\u0020=\u0020message;\n\u0020\u0020\u0020\u0020\u0020\u0020\u0020\u0020document.body.appendChild(div);\n\u0020\u0020\u0020\u0020\u0020\u0020}\n\u0020\u0020\u0020\u0020</script>\n\u0020\u0020</body>\n\u0020\u0020</html>\n\u0020\u0020\n\n10.\u0020Run\u0020the\u0020development\u0020server:\n\u0020\u0020\n\u0020\u0020python\u0020manage.py\u0020runserver\n\u0020\u0020\n\nNow,\u0020you\u0020can\u0020access\u0020the\u0020push\u0020notifications\u0020page\u0020at\u0020http://localhost:8000/notifications/. Enter a message in the input field and click the "Send" button. The message will be sent to all connected clients and will be displayed on the page in real-time.