je veux etablir une connexion websocket entre angular et django sachant que j ai deja travaillé et utilisé plusieurs api de django en angular mais maintenant je dois avoir les notifications en temps reel alors j ai telecharger channels dans django et ngx-socket-io en angular mais ca fonctionne pas je voulais commencer par un simple test pour verifier seulement si ca fonctionne :header.component.ts:50 WebSocket connection to ‘ws://127.0.0.1:8000/ws/my-websocket/’ failed:

j ai ajouté ca coté backend dans settings :

 WSGI_APPLICATION = 'tutorial.wsgi.application'


ASGI_APPLICATION = 'tutorial.asgi.application'

et ca dans asgi.py de la racine :

import os
from django.core.asgi import get_asgi_application
from django.urls import path
from channels.routing import ProtocolTypeRouter, URLRouter
from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter
from quickstart.views import AlertConsumer  
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'tutorial.settings')


django_asgi_application = get_asgi_application()


application = ProtocolTypeRouter({
    "http": django_asgi_application,  # Traitez les connexions HTTP avec l'application Django standard
    "websocket": AuthMiddlewareStack(
        URLRouter([
            path('ws/my-websocket/', AlertConsumer.as_asgi()),  # Utilisez le consommateur WebSocket que vous avez défini
        ])
    ),
})

et aussi ca dans l url de mon application:

from django.contrib import admin
from django.urls import path
from django.urls import include, path
from rest_framework import routers
from rest_framework.urlpatterns import format_suffix_patterns
from .views import CustomTokenObtainPairView,excel_data_api, EquipementsTotalConsommation, zonesTotalConsommation
from .views import *
from quickstart import views
from django.urls import path, include
from django.contrib.auth import views as auth_views
from django.urls import re_path
from .views import AlertConsumer  # Importez votre consommateur WebSocket

websocket_urlpatterns = [
    re_path(r'ws/my-websocket/', AlertConsumer.as_asgi()),  # Utilisez le consommateur WebSocket que vous avez défini
]
router = routers.DefaultRouter()
router.register(r'users', views.UserViewSet)
router.register(r'profileUser', views.ProfileUserViewSet)
router.register(r'zones', views.ZoneViewSet)   

et ca dans views.py de mon application :

from channels.generic.websocket import AsyncWebsocketConsumer
import json

class AlertConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        await self.accept()

    async def disconnect(self, close_code):
        pass

    async def receive(self, text_data):
        # Traitez les données reçues du client WebSocket si nécessaire
        pass

    async def send_alert(self, event):
        # Récupérez les données de l'événement
        alert_data = event['data']

        # Envoyez les données au client WebSocket
        await self.send(text_data=json.dumps(alert_data))

class AlerteViewSet(viewsets.ModelViewSet):
    queryset =Alerte.objects.all()
    serializer_class =AlerteSerializer
    def list(self, request, *args, **kwargs):
        alertes = Alerte.objects.all()
        serializer = AlerteSerializer(alertes, many=True)
        return Response(serializer.data)

coté angular j ai crée un service:

import { Injectable } from '@angular/core';
import { WebSocketSubject } from 'rxjs/webSocket';

@Injectable({
  providedIn: 'root'
})
export class WebSocketService {

  private socket$: WebSocketSubject<any>;

  constructor() {
    this.socket$ = new WebSocketSubject('ws://127.0.0.1:8000/ws/my-websocket/');
}

  

  sendMessage(message: any) {
    this.socket$.next(message);
  }

  getMessages() {
    return this.socket$.asObservable();
  }
}

et ca dans un fichier ts de mon composant :

  constructor(private webSocketService: WebSocketService,private floorService: FloorService, private router: Router,private translate: TranslateService, private renderer: Renderer2, private el: ElementRef) {
    this.isLoggedIn = localStorage.getItem('isLoggedIn')
  }

  currentSection: string = '';
 
  ngOnInit() {
    this.webSocketService.getMessages().subscribe((message:any) => {
      console.log('New message received: ', message);
    });