django push notification to html site full example 2023 using channels

To send push notifications to an HTML site using Django Channels, you need to follow these steps:

Install Django Channels using the following command:
```
pip install channels
```

Create a new Django project:

django-admin startproject push_notification_demo

Create a new Django app within the project:

cd push_notification_demo
python manage.py startapp push_notifications

Update the project's settings to include Channels:

# push_notification_demo/settings.py

INSTALLED_APPS = [
    ...
    'channels',
    'push_notifications',
]

CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels.layers.InMemoryChannelLayer',
    },
}

Create a new file called consumers.py inside the push_notifications app:

# push_notifications/consumers.py

from channels.generic.websocket import WebsocketConsumer
import json


class PushNotificationConsumer(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']

        self.send(text_data=json.dumps({
            'message': message
        }))

Create a new file called routing.py inside the push_notifications app:

# push_notifications/routing.py

from django.urls import re_path

from . import consumers


websocket_urlpatterns = [
    re_path(r'ws/push-notification/$', consumers.PushNotificationConsumer.as_asgi()),
]

Update the project's routing to include the new routing file:

# push_notification_demo/routing.py

from django.urls import path
from channels.routing import ProtocolTypeRouter, URLRouter
from push_notifications import routing

application = ProtocolTypeRouter({
    'http': get_asgi_application(),
    'websocket': URLRouter(
        routing.websocket_urlpatterns
    ),
})

Create a new HTML file called index.html in the templates directory:

<!-- push_notifications/templates/index.html -->

<!DOCTYPE html>
<html>
<head>
    <title>Push Notification Demo</title>
</head>
<body>
    <h1>Push Notification Demo</h1>
    <div id="notification"></div>

    <script>
        const notificationElement = document.getElementById('notification');

        const socket = new WebSocket('ws://' + window.location.host + '/ws/push-notification/');

        socket.onmessage = function(e) {
            const data = JSON.parse(e.data);
            notificationElement.innerHTML = data.message;
        };
    </script>
</body>
</html>

Update the project's URL configuration to serve the HTML file:

# push_notification_demo/urls.py

from django.urls import path
from django.conf.urls import include
from django.views.generic import TemplateView

urlpatterns = [
    path('', TemplateView.as_view(template_name='index.html')),
    path('ws/', include('push_notifications.routing')),
]

Run the Django development server:
```
python manage.py runserver
```

Now, when you open your browser and navigate to http://localhost:8000, you should see the "Push Notification Demo" page. You can send a push notification by using a WebSocket client and sending a message to the ws://localhost:8000/ws/push-notification/ endpoint. The message will be displayed in the notification div on the HTML page

django push notification to html site full example 2023 using channels