django push notification example using socket full exmaple with html template 2023 only using channels

Sure! Here's an example of how to implement push notifications using Django Channels with HTML templates:

1. Install the necessary packages:

   • Django Channels: pip install channels
   • Redis: pip install channels_redis

2. Configure Django Channels in your project's settings.py:

   # settings.py
   
   # Add Channels to the installed apps
   INSTALLED_APPS = [
       ...
       'channels',
   ]
   
   # Set the ASGI application
   ASGI_APPLICATION = 'project_name.routing.application'
   
   # Configure Channels to use Redis as the channel layer
   CHANNEL_LAYERS = {
       'default': {
           'BACKEND': 'channels_redis.core.RedisChannelLayer',
           'CONFIG': {
               'hosts': [('localhost', 6379)],
           },
       },
   }
   

3. Create a new Django app for handling push notifications:

   $ python manage.py startapp push_notifications
   

4. Create a new file called routing.py in your project's directory:

   # routing.py
   
   from django.urls import re_path
   from push_notifications.consumers import NotificationConsumer
   
   websocket_urlpatterns = [
       re_path(r'ws/notifications/$', NotificationConsumer.as_asgi()),
   ]
   

5. Create a new file called consumers.py in the push_notifications app directory:

   # consumers.py
   
   import json
   from asgiref.sync import async_to_sync
   from channels.generic.websocket import WebsocketConsumer
   
   class NotificationConsumer(WebsocketConsumer):
       def connect(self):
           self.accept()
   
       def disconnect(self, close_code):
           pass
   
       def receive(self, text_data):
           text_data_json = json.loads(text_data)
           message = text_data_json['message']
   
           # Send the received message to all connected clients
           async_to_sync(self.channel_layer.group_send)(
               'notifications',
               {
                   'type': 'notification',
                   'message': message
               }
           )
   
       def notification(self, event):
           message = event['message']
   
           # Send the received message to the WebSocket
           self.send(text_data=json.dumps({
               'message': message
           }))
   

6. Update your project's urls.py file to include the WebSocket URL pattern:

   # urls.py
   
   from django.urls import path
   from django.conf.urls import url, include
   from project_name.routing import websocket_urlpatterns
   
   urlpatterns = [
       ...
       url(r'^ws/', include(websocket_urlpatterns)),
   ]
   

7. Create an HTML template for displaying the push notification:

   <!-- notification.html -->
   
   <div id="notification"></div>
   
   <script>
   var socket = new WebSocket('ws://' + window.location.host + '/ws/notifications/');
   
   socket.onmessage = function(e) {
       var data = JSON.parse(e.data);
       document.getElementById('notification').innerHTML = data.message;
   };
   </script>
   

8. Finally, create a view that renders the HTML template:

   # views.py
   
   from django.shortcuts import render
   
   def notification_view(request):
       return render(request, 'notification.html')
   

That's it! Now you can use the NotificationConsumer to send push notifications to all connected clients by sending a message to the WebSocket endpoint. Clients will receive the notifications and update the notification HTML element accordingly