So implementieren Sie Echtzeit-Kommunikationsfunktionen basierend auf WebSockets und asynchronen Ansichten in Django

[Live-Übertragungsvorschau] Werden große Models Programmierer ersetzen? "

Dieser Artikel stammt von der Huawei Cloud Community „ A Complete Guide to Implementing Real-Time Communication Functions Using WebSockets and Asynchronous Views in Django “ von Lemony Hug.

In modernen Webanwendungen ist Echtzeitkommunikation zu einem wesentlichen Merkmal geworden. Ob Online-Chat, Echtzeit-Datenaktualisierungen oder Echtzeit-Benachrichtigungen – sie alle müssen durch Echtzeit-Kommunikationstechnologie erreicht werden. Als leistungsstarkes Web-Framework bietet Django viele Tools zum Erstellen verschiedener Arten von Webanwendungen. Im Hinblick auf die Echtzeitkommunikation kann das herkömmliche Anforderungs-Antwort-Modell diese Anforderungen jedoch offensichtlich nicht erfüllen. In diesem Artikel untersuchen wir, wie man WebSockets und asynchrone Ansichten in Django nutzt, um Echtzeit-Kommunikationsfunktionen zu implementieren.

Einführung in WebSockets

WebSockets ist ein Protokoll, das Vollduplex-Kommunikation über eine einzelne TCP-Verbindung ermöglicht. Im Gegensatz zum HTTP-Request-Response-Modell ermöglichen WebSockets eine kontinuierliche bidirektionale Kommunikation zwischen Server und Client und erreichen so Echtzeit. In Django können wir Bibliotheken von Drittanbietern verwenden, django-channelsum die WebSocket-Unterstützung zu implementieren.

asynchrone Ansicht

Mit Django 3.1 wurde die Unterstützung für asynchrone Ansichten eingeführt, sodass wir Ansichtsfunktionen schreiben können, die Anforderungen asynchron verarbeiten. Dies ist nützlich für die Bearbeitung lang andauernder Aufgaben oder Anforderungen, bei denen auf eine Antwort von einer externen Ressource gewartet werden muss.

Kombinieren von WebSockets mit asynchronen Ansichten

Im Folgenden zeigen wir anhand eines Falls, wie man WebSockets und asynchrone Ansichten in Django kombiniert, um Echtzeit-Kommunikationsfunktionen zu implementieren. Nehmen wir an, wir entwickeln eine einfache Echtzeit-Chat-Anwendung.

Abhängigkeiten installieren

Zuerst müssen wir django-channelsdie Bibliothek installieren:

Pip-Installationskanäle

Konfigurationselemente

Fügen Sie im Projekt die Anwendung settings.pyhinzu :channels

INSTALLED_APPS = [
    ...
    'Kanäle',
    ...
]

Erstellen Sie dann eine routing.pyneue Datei mit dem Namen und definieren Sie darin die WebSocket-Route:

# Routing.py

auschannels.routing import ProtocolTypeRouter, URLRouter
aus „channels.auth“ AuthMiddlewareStack importieren
aus django.urls Importpfad
aus myapp.consumers importieren Sie ChatConsumer

websocket_urlpatterns = [
    path('ws/chat/', ChatConsumer.as_asgi()),
]

application = ProtocolTypeRouter({
    'websocket': AuthMiddlewareStack(
        URLRouter(
            websocket_urlpatterns
        )
    ),
})

Verbraucher erstellen

Als Nächstes erstellen wir einen Consumer zur Verarbeitung von WebSocket-Verbindungen:

# Verbraucher.py

json importieren
auschannels.generic.websocketimportierenAsyncWebsocketConsumer

Klasse ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.room_name = 'chat_room'
        self.room_group_name = f'chat_{self.room_name}'

        # Treten Sie der Chatroom-Gruppe bei
        warte auf self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )

        warte auf self.accept()

    asynchrone Def-Disconnect(self, close_code):
        # Verlassen Sie die Chatroom-Gruppe
        warte auf self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    asynchroner Def-Empfang (Selbst, Textdaten):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']

        # Nachricht an Chatroom-Gruppe senden
        warte auf self.channel_layer.group_send(
            self.room_group_name,
            {
                'type': 'chat_message',
                'Nachricht': Nachricht
            }
        )

    async def chat_message(self, event):
        message = event['message']

        #Nachricht an WebSocket-Verbindung senden
        Warten Sie auf self.send(text_data=json.dumps({
            'Nachricht': Nachricht
        }))

Schreiben Sie Front-End-Code

Auf der Front-End-Seite müssen wir JavaScript verwenden, um eine Verbindung zu WebSocket herzustellen und das Senden und Empfangen von Nachrichten abzuwickeln:

// chat.js

const chatSocket = new WebSocket('ws://localhost:8000/ws/chat/');

chatSocket.onmessage = function(e) {
    const data = JSON.parse(e.data);
    const message = data['message'];
    // Verarbeiten Sie die empfangene Nachricht
    console.log(Nachricht);
};

chatSocket.onclose = function(e) {
    console.error('Chat-Socket wurde unerwartet geschlossen');
};

document.querySelector('#chat-message-input').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        const messageInputDom = document.querySelector('#chat-message-input');
        const message = messageInputDom.value;
        chatSocket.send(JSON.stringify({
            'Nachricht': Nachricht
        }));
        messageInputDom.value = '';
    }
});

In Vorlage integrieren

Abschließend integrieren wir den JavaScript-Code in das Django-Template:

<!-- chat.html -->

<!DOCTYPE html>
<html>
<Kopf>
    <title>Chat</title>
</head>
<Körper>
    <textarea id="chat-message-input"></textarea>
    <script src="{% static 'chat.js' %}"></script>
</body>
</html>

Einführung asynchroner Ansichten

Vor Django 3.1 wurden Ansichtsfunktionen synchron ausgeführt, was bedeutete, dass der Code in einer Ansichtsfunktion ausgeführt wurde, bis eine HTTP-Antwort an den Client zurückgegeben wurde. Einige Aufgaben können jedoch zeitaufwändig sein, beispielsweise das Aufrufen externer APIs oder das Durchführen komplexer Berechnungen. In diesem Fall blockiert die Synchronisierung der Ansicht die gesamte Anwendung, was zu Leistungseinbußen führt.

Um dieses Problem zu lösen, führte Django asynchrone Ansichten ein, die die Python- asyncSyntax verwenden await, um asynchrone Programmiermuster zu unterstützen. Asynchrone Ansichten ermöglichen das Anhalten der Ausführung, während eine Anforderung verarbeitet wird, und warten auf den Abschluss des E/A-Vorgangs, ohne die gesamte Anwendung zu blockieren.

Kombination der Vorteile von WebSockets und asynchronen Ansichten

Durch die Kombination von WebSockets mit asynchronen Ansichten können Echtzeit-Kommunikationsanwendungen eine höhere Leistung und Skalierbarkeit erzielen. Wenn eine große Anzahl von Verbindungen gleichzeitig kommuniziert, können asynchrone Ansichten diese Verbindungen effektiv verwalten, ohne die Verarbeitung anderer Verbindungen aufgrund der Blockierung einer Verbindung zu beeinträchtigen. Auf diese Weise kann die Anwendung Situationen mit hoher Parallelität besser bewältigen und Stabilität und Effizienz aufrechterhalten.

Verbessern Sie die Echtzeit-Chat-Anwendung

Zusätzlich zur grundlegenden Chat-Funktionalität im obigen Beispiel können wir auch einige Erweiterungen an der Echtzeit-Chat-Anwendung vornehmen, wie zum Beispiel:

Benutzerauthentifizierung: Führen Sie beim Herstellen einer Verbindung mit WebSocket eine Benutzerauthentifizierung durch, um sicherzustellen, dass nur angemeldete Benutzer den Chatroom betreten können.
Chatroom-Verwaltung: Erstellen Sie mehrere Chatrooms und ermöglichen Sie Benutzern, verschiedenen Chatrooms beizutreten.
Nachrichtenspeicherung: Speichern Sie Chat-Aufzeichnungen in der Datenbank, damit Benutzer historische Nachrichten anzeigen können, nachdem sie die Verbindung getrennt und wieder hergestellt haben.
Nachrichtenbenachrichtigung: Implementieren Sie die Nachrichtenbenachrichtigungsfunktion. Wenn der Benutzer eine neue Nachricht erhält, wird er durch eine Browserbenachrichtigung oder E-Mail daran erinnert.
Echtzeit-Online-Benutzerliste: Zeigt die aktuelle Online-Benutzerliste an und aktualisiert sie in Echtzeit, wenn der Benutzer den Chatraum betritt oder verlässt.

Standortfreigabe in Echtzeit

Angenommen, wir entwickeln eine Echtzeit-Standortfreigabeanwendung, bei der Benutzer die Standorte anderer Benutzer in Echtzeit auf einer Karte sehen können. Hier ist ein einfacher Beispielcode:

Backend-Code

# Verbraucher.py

json importieren
auschannels.generic.websocketimportierenAsyncWebsocketConsumer

Klasse LocationConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.room_name = 'location_room'
        self.room_group_name = f'location_{self.room_name}'

        # Treten Sie dem Standortfreigaberaum bei
        warte auf self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )

        warte auf self.accept()

    asynchrone Def-Disconnect(self, close_code):
        # Standort-Gemeinschaftsraum verlassen
        warte auf self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    asynchroner Def-Empfang (Selbst, Textdaten):
        text_data_json = json.loads(text_data)
        width = text_data_json['latitude']
        Längengrad = text_data_json['Längengrad']

        # Standortinformationen an den gemeinsam genutzten Geostandort-Raum senden
        warte auf self.channel_layer.group_send(
            self.room_group_name,
            {
                'type': 'location_message',
                'latitude': Breitengrad,
                'Längengrad': Längengrad
            }
        )

    async def location_message(self, event):
        Breitengrad = Ereignis['Breitengrad']
        Längengrad = Ereignis['Längengrad']

        #Standortinformationen an die WebSocket-Verbindung senden
        Warten Sie auf self.send(text_data=json.dumps({
            'latitude': Breitengrad,
            'Längengrad': Längengrad
        }))

Front-End-Code

// location.js

const locationSocket = new WebSocket('ws://localhost:8000/ws/location/');

locationSocket.onmessage = function(e) {
    const data = JSON.parse(e.data);
    const width = data['latitude'];
    const longitude = data['longitude'];
    //Benutzerstandort auf der Karte anzeigen
    updateMap(Breitengrad, Längengrad);
};

locationSocket.onclose = function(e) {
    console.error('Standort-Socket wurde unerwartet geschlossen');
};

Funktion sendLocation(Breitengrad, Längengrad) {
    locationSocket.send(JSON.stringify({
        'latitude': Breitengrad,
        'Längengrad': Längengrad
    }));
}

In diesem Beispiel wählt der Benutzer über die Front-End-Schnittstelle einen Standort auf der Karte aus oder verschiebt ihn und sendet dann die Standortinformationen über WebSocket an den Server. Nachdem der Server die Standortinformationen empfangen hat, sendet er sie an alle verbundenen Benutzer. Nachdem die Front-End-Schnittstelle die Standortinformationen empfangen hat, aktualisiert sie die Standorte anderer Benutzer auf der Karte in Echtzeit.

Eine solche Echtzeit-Standortfreigabefunktion kann in sozialen Anwendungen, Echtzeit-Navigationsanwendungen und anderen Szenarien eingesetzt werden, um Benutzern ein besseres interaktives Erlebnis zu bieten.

Datenvisualisierung in Echtzeit

Angenommen, wir verfügen über ein Datenüberwachungssystem, das Daten von verschiedenen Sensoren in Echtzeit anzeigen muss. Hier ist ein einfacher Beispielcode:

Backend-Code

# Verbraucher.py

json importieren
auschannels.generic.websocketimportierenAsyncWebsocketConsumer

Klasse SensorDataConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.room_name = 'sensor_data_room'
        self.room_group_name = f'sensor_data_{self.room_name}'

        # Treten Sie dem Sensordaten-Sharing-Raum bei
        warte auf self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )

        warte auf self.accept()

    asynchrone Def-Disconnect(self, close_code):
        # Verlassen Sie den Raum zur gemeinsamen Nutzung von Sensordaten
        warte auf self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    asynchroner Def-Empfang (Selbst, Textdaten):
        text_data_json = json.loads(text_data)
        sensor_id = text_data_json['sensor_id']
        sensor_value = text_data_json['sensor_value']

        # Sensordaten an den Sensordaten-Freigaberaum senden
        warte auf self.channel_layer.group_send(
            self.room_group_name,
            {
                'type': 'sensor_data_message',
                'sensor_id': sensor_id,
                'sensor_value': sensor_wert
            }
        )

    async def sensor_data_message(self, event):
        sensor_id = event['sensor_id']
        sensor_value = event['sensor_value']

        # Sensordaten an WebSocket-Verbindung senden
        Warten Sie auf self.send(text_data=json.dumps({
            'sensor_id': sensor_id,
            'sensor_value': sensor_wert
        }))

Front-End-Code

// sensor_data.js

const sensorDataSocket = new WebSocket('ws://localhost:8000/ws/sensor_data/');

sensorDataSocket.onmessage = function(e) {
    const data = JSON.parse(e.data);
    const sensorId = data['sensor_id'];
    const sensorValue = data['sensor_value'];
    //Sensordatendiagramm aktualisieren
    updateChart(sensorId, sensorValue);
};

sensorDataSocket.onclose = function(e) {
    console.error('Sensordaten-Socket wurde unerwartet geschlossen');
};

Funktion sendSensorData(sensorId, sensorValue) {
    sensorDataSocket.send(JSON.stringify({
        'sensor_id': sensorId,
        'sensor_value': sensorValue
    }));
}

In diesem Beispiel sendet das Sensorgerät Echtzeitdaten über WebSocket an den Server. Nachdem der Server die Daten empfangen hat, sendet er sie an alle verbundenen Benutzer. Nachdem die Front-End-Schnittstelle die Daten empfangen hat, verwendet er eine JavaScript-Diagrammbibliothek Zeigen Sie die Echtzeitdaten in einem Diagramm in Echtzeit an.

Eine solche Echtzeit-Datenvisualisierungsfunktion kann in Szenarien wie Datenüberwachung und Echtzeitanalyse angewendet werden und bietet Benutzern Echtzeit-Datenanzeige- und Überwachungsfunktionen.

Erweiterte Funktionen und erweiterte Apps

Zusätzlich zu den grundlegenden Echtzeit-Chat-Funktionen können durch die Kombination von WebSockets und asynchronen Ansichten eine Reihe erweiterter Funktionen und erweiterter Anwendungen erreicht werden. Hier sind einige Beispiele:

1. Standortfreigabe in Echtzeit

Mit WebSocket und asynchronen Ansichten kann eine Echtzeit-Standortfreigabe zwischen Benutzern erreicht werden. Wenn sich der Benutzer bewegt, kann die Front-End-Anwendung die Standortinformationen des Benutzers an den Server senden, der diese Informationen dann an andere Benutzer sendet. Diese Funktion ist in sozialen Anwendungen, Kartennavigationsanwendungen und anderen Szenarien sehr nützlich.

2. Datenvisualisierung in Echtzeit

Im Bereich der Datenanalyse und -überwachung ist die Echtzeit-Datenvisualisierung eine wichtige Aufgabe. Über WebSocket und asynchrone Ansichten können Daten in Echtzeit an das Frontend übertragen werden, und JavaScript-Diagrammbibliotheken (wie Highcharts, Chart.js usw.) können verwendet werden, um Datenänderungstrends anzuzeigen und den Systemstatus in Echtzeit zu überwachen.

3. Gemeinsame Online-Bearbeitung

Mithilfe von WebSocket und asynchronen Ansichten können Sie Funktionen für die gemeinsame Online-Bearbeitung durch mehrere Personen realisieren, ähnlich wie bei Google Docs. Wenn ein Benutzer ein Dokument bearbeitet, können andere Benutzer die Änderungen am bearbeiteten Inhalt in Echtzeit sehen und so eine gemeinsame Bearbeitung in Echtzeit durch mehrere Personen ermöglichen.

4. Echtzeit-Gaming

Echtzeitspiele stellen sehr hohe Anforderungen an die Echtzeitkommunikation. Durch die Kombination von WebSocket und asynchronen Ansichten können Echtzeit-Multiplayer-Onlinespiele wie Schach- und Kartenspiele, Echtzeit-Strategiespiele usw. realisiert werden, was ein reibungsloses Spielerlebnis bietet.

5. Suche und Filterung in Echtzeit

Über Websites und Apps hinweg müssen Benutzer möglicherweise Daten in Echtzeit suchen und filtern. Über WebSocket und asynchrone Ansichten können Sie Suchschlüsselwörter oder Filterbedingungen in Echtzeit an den Server senden und die vom Server zurückgegebenen Suchergebnisse oder gefilterten Daten in Echtzeit abrufen, wodurch die Benutzererfahrung verbessert wird.

6. Abstimmungen und Fragebögen in Echtzeit

Online-Abstimmungen und Fragebögen erfordern in der Regel einen Echtzeitzugriff auf die Abstimmungsergebnisse oder den Status des Ausfüllens des Fragebogens. Durch die Kombination von WebSocket und asynchronen Ansichten können Abstimmungsergebnisdiagramme oder Fragebogenstatistiken in Echtzeit aktualisiert werden, sodass Benutzer die aktuelle Abstimmungssituation oder den Fortschritt beim Ausfüllen des Fragebogens in Echtzeit verstehen können.

Zusammenfassen

In diesem Artikel wird erläutert, wie Sie WebSockets und asynchrone Ansichten in Django verwenden, um Echtzeit-Kommunikationsfunktionen zu implementieren. Wir haben zunächst etwas über die grundlegenden Konzepte und Arbeitsprinzipien von WebSockets gelernt und erfahren, django-channelswie man Bibliotheken zur Unterstützung von WebSockets in Django verwendet. Als Nächstes haben wir uns eingehend mit dem Konzept und der Verwendung asynchroner Ansichten sowie der Kombination von WebSockets und asynchronen Ansichten befasst, um Echtzeit-Kommunikationsfunktionen zu erreichen.

Anhand eines einfachen Echtzeit-Chat-Anwendungsbeispiels demonstrieren wir, wie man einen WebSocket-Consumer (Consumer) für die Verarbeitung von WebSocket-Verbindungen erstellt und asynchrone Ansichten für die Verarbeitung von Ereignissen in WebSocket-Verbindungen verwendet. Wir haben auch vorgestellt, wie man JavaScript auf der Front-End-Seite verwendet, um eine Verbindung zu WebSocket herzustellen und die empfangenen Nachrichten in Echtzeit zu verarbeiten.

Anschließend untersuchen wir die Vorteile der Kombination von WebSockets und asynchronen Ansichten weiter und stellen eine Reihe erweiterter Funktionen und Beispiele für erweiterte Anwendungen bereit, darunter Standortfreigabe in Echtzeit, Datenvisualisierung in Echtzeit usw. Diese Funktionen und Anwendungen können Entwicklern mehr Innovationen und Möglichkeiten bieten, um Echtzeitkommunikationsanforderungen in verschiedenen Szenarien zu erfüllen.

Klicken Sie hier, um zu folgen und so schnell wie möglich mehr über die neuen Technologien von Huawei Cloud zu erfahren~