Cómo implementar funciones de comunicación en tiempo real basadas en WebSockets y vistas asíncronas en Django

[Vista previa de la transmisión en vivo] ¿Los modelos grandes reemplazarán a los programadores? "

Este artículo se comparte desde la comunidad de la nube de Huawei " Una guía completa para implementar funciones de comunicación en tiempo real utilizando WebSockets y vistas asincrónicas en Django " por Lemony Hug.

En las aplicaciones web modernas, la comunicación en tiempo real se ha convertido en una característica esencial. Ya sea chat en línea, actualizaciones de datos en tiempo real o notificaciones en tiempo real, todo esto debe lograrse mediante tecnología de comunicación en tiempo real. Como marco web poderoso, Django proporciona muchas herramientas para crear varios tipos de aplicaciones web. Sin embargo, en términos de comunicación en tiempo real, el modelo tradicional de solicitud-respuesta obviamente no puede satisfacer las necesidades. En este artículo, exploraremos cómo aprovechar WebSockets y vistas asincrónicas en Django para implementar capacidades de comunicación en tiempo real.

Introducción a WebSockets

WebSockets es un protocolo que proporciona comunicación full-duplex a través de una única conexión TCP. A diferencia del modelo de solicitud-respuesta HTTP, los WebSockets permiten una comunicación bidireccional continua entre el servidor y el cliente, logrando así el tiempo real. En Django, podemos utilizar bibliotecas de terceros django-channelspara implementar la compatibilidad con WebSocket.

vista asincrónica

Django 3.1 introdujo soporte para vistas asincrónicas, lo que nos permite escribir funciones de vista que manejan solicitudes de forma asincrónica. Esto es útil para manejar tareas o solicitudes de larga duración que requieren esperar una respuesta de un recurso externo.

Combinando WebSockets con vistas asincrónicas

A continuación usaremos un caso para demostrar cómo combinar WebSockets y vistas asincrónicas en Django para implementar funciones de comunicación en tiempo real. Digamos que estamos desarrollando una aplicación de chat sencilla en tiempo real.

Instalar dependencias

Primero, necesitamos instalar django-channelsla biblioteca:

canales de instalación de pip

Elementos de configuración

En el proyecto settings.py, agregue channelsla aplicación:

INSTALLED_APPS = [
    ...
    'canales',
    ...
]

Luego, crea un routing.pynuevo archivo llamado y define la ruta WebSocket en él:

# enrutamiento.py

desde canales.enrutamiento importar ProtocolTypeRouter, URLRouter
desde canales.auth importar AuthMiddlewareStack
desde la ruta de importación django.urls
desde myapp.consumers importe ChatConsumer

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

aplicación = ProtocolTypeRouter({
    'websocket': AuthMiddlewareStack(
        URLEnrutador(
            patrones websocket_url
        )
    ),
})

Crear consumidor

A continuación, creamos un Consumidor para manejar las conexiones WebSocket:

# consumidores.py

importar json
desde canales.generic.websocket importar AsyncWebsocketConsumer

clase ChatConsumer (AsyncWebsocketConsumer):
    conexión asíncrona de definición (auto):
        self.room_name = 'sala de chat'
        self.room_group_name = f'chat_{self.room_name}'

        # Únase al grupo de la sala de chat
        espera self.channel_layer.group_add(
            self.room_group_name,
            self.nombre_canal
        )

        esperar a sí mismo.aceptar()

    async def desconectar(self, close_code):
        # Salir del grupo de la sala de chat
        espera self.channel_layer.group_discard(
            self.room_group_name,
            self.nombre_canal
        )

    async def recibir(self, text_data):
        text_data_json = json.loads(text_data)
        mensaje = text_data_json['mensaje']

        # Enviar mensaje al grupo de la sala de chat
        espera self.channel_layer.group_send(
            self.room_group_name,
            {
                'tipo': 'mensaje_chat',
                'mensaje': mensaje
            }
        )

    async def chat_message(yo, evento):
        mensaje = evento['mensaje']

        #Enviar mensaje a la conexión WebSocket
        espera self.send(text_data=json.dumps({
            'mensaje': mensaje
        }))

Escribir código de interfaz

En la página de inicio, necesitamos usar JavaScript para conectarnos a WebSocket y manejar el envío y la recepción de mensajes:

// chat.js

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

chatSocket.onmessage = función(e) {
    datos constantes = JSON.parse(e.data);
    mensaje constante = datos['mensaje'];
    // Procesar el mensaje recibido
    consola.log(mensaje);
};

chatSocket.onclose = función (e) {
    console.error('El socket de chat se cerró inesperadamente');
};

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

Integrar en la plantilla

Finalmente, integramos el código JavaScript en la plantilla de Django:

<!-- chat.html -->

<!DOCTYPE html>
<html>
<cabeza>
    <título>Chat</título>
</cabeza>
<cuerpo>
    <textarea id="entrada-de-mensaje-de-chat"></textarea>
    <script src="{% estático 'chat.js' %}"></script>
</cuerpo>
</html>

Presentamos vistas asincrónicas

Antes de Django 3.1, las funciones de vista se ejecutaban sincrónicamente, lo que significaba que el código de una función de vista se ejecutaba hasta que se devolvía una respuesta HTTP al cliente. Sin embargo, algunas tareas pueden llevar mucho tiempo, como llamar a API externas o realizar cálculos complejos. En este caso, la sincronización de la vista bloquea toda la aplicación, lo que provoca una degradación del rendimiento.

asyncPara resolver este problema, Django introdujo vistas asincrónicas, que utilizan la sintaxis de Python awaitpara admitir patrones de programación asincrónica. Las vistas asincrónicas permiten suspender la ejecución mientras se procesa una solicitud, esperando a que se complete la operación IO sin bloquear toda la aplicación.

Combinando las ventajas de WebSockets y vistas asincrónicas

La combinación de WebSockets con vistas asincrónicas puede hacer que las aplicaciones de comunicación en tiempo real tengan mayor rendimiento y escalabilidad. Cuando hay una gran cantidad de conexiones que se comunican al mismo tiempo, las vistas asincrónicas pueden administrar eficazmente estas conexiones sin afectar el procesamiento de otras conexiones debido al bloqueo de una conexión. De esta manera, la aplicación puede afrontar mejor situaciones de alta concurrencia y mantener la estabilidad y la eficiencia.

Mejorar la aplicación de chat en tiempo real

Además de la funcionalidad básica de chat en el ejemplo anterior, también podemos crear algunas extensiones a la aplicación de chat en tiempo real, como por ejemplo:

Autenticación de usuario: realice la autenticación de usuario cuando se conecte a WebSocket para garantizar que solo los usuarios que hayan iniciado sesión puedan ingresar a la sala de chat.
Gestión de salas de chat: cree varias salas de chat y permita a los usuarios elegir unirse a diferentes salas de chat.
Almacenamiento de mensajes: guarde los registros de chat en la base de datos para que los usuarios puedan ver el historial de mensajes después de desconectarse y volver a conectarse.
Notificación de mensajes: implemente la función de notificación de mensajes cuando el usuario reciba un mensaje nuevo, se le recordará a través de una notificación del navegador o por correo electrónico.
Lista de usuarios en línea en tiempo real: muestra la lista de usuarios en línea actual y la actualiza en tiempo real cuando el usuario ingresa o sale de la sala de chat.

Compartir ubicación en tiempo real

Supongamos que estamos desarrollando una aplicación para compartir ubicación en tiempo real donde los usuarios pueden ver las ubicaciones de otros usuarios en un mapa en tiempo real. Aquí hay un código de ejemplo simple:

código de fondo

# consumidores.py

importar json
desde canales.generic.websocket importar AsyncWebsocketConsumer

clase LocationConsumer (AsyncWebsocketConsumer):
    conexión asíncrona de definición (auto):
        self.room_name = 'ubicación_habitación'
        self.room_group_name = f'ubicación_{self.room_name}'

        # Unirse a la sala para compartir ubicación
        espera self.channel_layer.group_add(
            self.room_group_name,
            self.nombre_canal
        )

        esperar a sí mismo.aceptar()

    async def desconectar(self, close_code):
        # Salir de la ubicación de la habitación compartida
        espera self.channel_layer.group_discard(
            self.room_group_name,
            self.nombre_canal
        )

    async def recibir(self, text_data):
        text_data_json = json.loads(text_data)
        latitud = text_data_json['latitud']
        longitud = text_data_json['longitud']

        # Enviar información de ubicación a la sala compartida de ubicación geográfica
        espera self.channel_layer.group_send(
            self.room_group_name,
            {
                'tipo': 'ubicación_mensaje',
                'latitud': latitud,
                'longitud': longitud
            }
        )

    async def ubicación_mensaje (yo, evento):
        latitud = evento['latitud']
        longitud = evento['longitud']

        #Enviar información de ubicación a la conexión WebSocket
        espera self.send(text_data=json.dumps({
            'latitud': latitud,
            'longitud': longitud
        }))

código de interfaz

// ubicación.js

const ubicaciónSocket = nuevo WebSocket('ws://localhost:8000/ws/ubicación/');

ubicaciónSocket.onmessage = función(e) {
    datos constantes = JSON.parse(e.data);
    latitud constante = datos['latitud'];
    longitud constante = datos['longitud'];
    //Mostrar ubicación del usuario en el mapa
    actualizarMap(latitud, longitud);
};

ubicaciónSocket.onclose = función(e) {
    console.error('El socket de ubicación se cerró inesperadamente');
};

función enviarLocalización(latitud, longitud) {
    ubicaciónSocket.send(JSON.stringify({
        'latitud': latitud,
        'longitud': longitud
    }));
}

En este ejemplo, el usuario selecciona o mueve una ubicación en el mapa a través de la interfaz de usuario y luego envía la información de ubicación al servidor a través de WebSocket. Después de que el servidor recibe la información de ubicación, la transmite a todos los usuarios conectados. Después de que la interfaz de usuario recibe la información de ubicación, actualiza las ubicaciones de otros usuarios en el mapa en tiempo real.

Esta función para compartir ubicación en tiempo real se puede aplicar en aplicaciones sociales, aplicaciones de navegación en tiempo real y otros escenarios para brindar a los usuarios una mejor experiencia interactiva.

Visualización de datos en tiempo real

Supongamos que tenemos un sistema de monitoreo de datos que necesita mostrar datos de varios sensores en tiempo real. Aquí hay un código de ejemplo simple:

código de fondo

# consumidores.py

importar json
desde canales.generic.websocket importar AsyncWebsocketConsumer

clase SensorDataConsumer (AsyncWebsocketConsumer):
    conexión asíncrona de definición (auto):
        self.room_name = 'sensor_data_room'
        self.room_group_name = f'sensor_data_{self.room_name}'

        # Únase a la sala para compartir datos del sensor
        espera self.channel_layer.group_add(
            self.room_group_name,
            self.nombre_canal
        )

        esperar a sí mismo.aceptar()

    async def desconectar(self, close_code):
        # Salga de la sala de intercambio de datos del sensor
        espera self.channel_layer.group_discard(
            self.room_group_name,
            self.nombre_canal
        )

    async def recibir(self, text_data):
        text_data_json = json.loads(text_data)
        sensor_id = text_data_json['sensor_id']
        valor_sensor = text_data_json['valor_sensor']

        # Enviar datos del sensor a la sala de intercambio de datos del sensor
        espera self.channel_layer.group_send(
            self.room_group_name,
            {
                'tipo': 'sensor_data_message',
                'id_sensor': id_sensor,
                'valor_sensor': valor_sensor
            }
        )

    async def sensor_data_message(self, evento):
        sensor_id = evento['sensor_id']
        valor_sensor = evento['valor_sensor']

        # Enviar datos del sensor a la conexión WebSocket
        espera self.send(text_data=json.dumps({
            'id_sensor': id_sensor,
            'valor_sensor': valor_sensor
        }))

código de interfaz

// sensor_data.js

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

sensorDataSocket.onmessage = función(e) {
    datos constantes = JSON.parse(e.data);
    const sensorId = datos['sensor_id'];
    const sensorValue = datos['sensor_value'];
    //Actualizar tabla de datos del sensor
    updateChart(sensorId, sensorValue);
};

sensorDataSocket.onclose = función(e) {
    console.error('El conector de datos del sensor se cerró inesperadamente');
};

función enviarSensorData(sensorId, sensorValue) {
    sensorDataSocket.send(JSON.stringify({
        'sensor_id': sensorId,
        'valor_sensor': valor_sensor
    }));
}

En este ejemplo, el dispositivo sensor envía datos en tiempo real al servidor a través de WebSocket. Después de que el servidor recibe los datos, los transmite a todos los usuarios conectados. Después de que la interfaz de usuario recibe los datos, utiliza una biblioteca de gráficos JavaScript. mostrar los datos en tiempo real en un gráfico en tiempo real.

Esta función de visualización de datos en tiempo real se puede aplicar en escenarios como monitoreo de datos y análisis en tiempo real, proporcionando a los usuarios funciones de monitoreo y visualización de datos en tiempo real.

Funciones avanzadas y aplicaciones avanzadas

Además de las funciones básicas de chat en tiempo real, se pueden lograr una serie de funciones avanzadas y aplicaciones avanzadas combinando WebSockets y vistas asincrónicas. Aquí hay unos ejemplos:

1. Compartir ubicación en tiempo real

Utilizando WebSocket y vistas asincrónicas, se puede compartir la ubicación en tiempo real entre usuarios. A medida que el usuario se mueve, la aplicación de front-end puede enviar la información de ubicación del usuario al servidor, que luego transmite esta información a otros usuarios. Esta función es muy útil en aplicaciones sociales, aplicaciones de navegación de mapas y otros escenarios.

2. Visualización de datos en tiempo real

En el campo del análisis y seguimiento de datos, la visualización de datos en tiempo real es una tarea importante. A través de WebSocket y vistas asincrónicas, los datos se pueden transmitir al front-end en tiempo real y las bibliotecas de gráficos JavaScript (como Highcharts, Chart.js, etc.) se pueden usar para mostrar tendencias de cambio de datos y monitorear el estado del sistema en tiempo real.

3. Edición colaborativa en línea

Al utilizar WebSocket y vistas asincrónicas, puede realizar funciones de edición colaborativa en línea para varias personas, similares a Google Docs. Cuando un usuario edita un documento, otros usuarios pueden ver los cambios en el contenido editado en tiempo real, lo que permite la edición colaborativa en tiempo real por parte de varias personas.

4. Juegos en tiempo real

Los juegos en tiempo real tienen exigencias muy altas de comunicación en tiempo real. La combinación de WebSocket y vistas asincrónicas puede realizar juegos en línea multijugador en tiempo real, como juegos de ajedrez y cartas, juegos de estrategia en tiempo real, etc., brindando una experiencia de juego fluida.

5. Búsqueda y filtrado en tiempo real

En sitios web y aplicaciones, es posible que los usuarios necesiten buscar y filtrar datos en tiempo real. A través de WebSocket y vistas asincrónicas, puede enviar palabras clave de búsqueda o condiciones de filtrado al servidor en tiempo real y obtener los resultados de búsqueda o los datos filtrados devueltos por el servidor en tiempo real, mejorando así la experiencia del usuario.

6. Votación y cuestionarios en tiempo real.

La votación y los cuestionarios en línea generalmente requieren acceso en tiempo real a los resultados de la votación o al estado de llenado del cuestionario. Al combinar WebSocket y vistas asincrónicas, los gráficos de resultados de votación o las estadísticas de cuestionarios se pueden actualizar en tiempo real, lo que permite a los usuarios comprender la situación actual de la votación o el progreso del llenado del cuestionario en tiempo real.

Resumir

Este artículo presenta cómo utilizar WebSockets y vistas asincrónicas en Django para implementar funciones de comunicación en tiempo real. Primero aprendimos sobre los conceptos básicos y los principios de funcionamiento de WebSockets, y django-channelscómo usar bibliotecas para admitir WebSockets en Django. A continuación, exploramos en profundidad el concepto y el uso de vistas asincrónicas y cómo combinar WebSockets y vistas asincrónicas para lograr funciones de comunicación en tiempo real.

A través de un ejemplo simple de una aplicación de chat en tiempo real, demostramos cómo crear un consumidor WebSocket (Consumidor) para manejar conexiones WebSocket y usar vistas asincrónicas para manejar eventos en conexiones WebSocket. También presentamos cómo usar JavaScript en la página de inicio para conectarse a WebSocket y procesar los mensajes recibidos en tiempo real.

Luego, exploramos más a fondo las ventajas de combinar WebSockets y vistas asincrónicas, y proporcionamos una serie de funciones avanzadas y ejemplos de aplicaciones avanzadas, incluido el uso compartido de ubicación en tiempo real, visualización de datos en tiempo real, etc. Estas funciones y aplicaciones pueden brindar a los desarrolladores más innovaciones y posibilidades para satisfacer las necesidades de comunicación en tiempo real en diferentes escenarios.

Haga clic para seguir y conocer las nuevas tecnologías de Huawei Cloud lo antes posible ~