Como implementar funções de comunicação em tempo real baseadas em WebSockets e visualizações assíncronas no Django

[Antevisão da transmissão ao vivo] Os modelos grandes substituirão os programadores? "

Este artigo foi compartilhado da comunidade Huawei Cloud " Um guia completo para implementar funções de comunicação em tempo real usando WebSockets e visualizações assíncronas no Django " por Lemony Hug.

Nas aplicações web modernas, a comunicação em tempo real tornou-se um recurso essencial. Quer se trate de chat online, atualizações de dados em tempo real ou notificações em tempo real, todos eles precisam ser alcançados através da tecnologia de comunicação em tempo real. Como uma estrutura web poderosa, o Django fornece muitas ferramentas para construir vários tipos de aplicações web. No entanto, em termos de comunicação em tempo real, o modelo tradicional de solicitação-resposta obviamente não pode atender às necessidades. Neste artigo, exploraremos como aproveitar WebSockets e visualizações assíncronas no Django para implementar recursos de comunicação em tempo real.

Introdução aos WebSockets

WebSockets é um protocolo que fornece comunicação full-duplex em uma única conexão TCP. Ao contrário do modelo de solicitação-resposta HTTP, os WebSockets permitem comunicação bidirecional contínua entre o servidor e o cliente, alcançando assim tempo real. No Django, podemos usar bibliotecas de terceiros django-channelspara implementar suporte WebSocket.

visualização assíncrona

O Django 3.1 introduziu suporte para visualizações assíncronas, permitindo-nos escrever funções de visualização que tratam solicitações de forma assíncrona. Isso é útil para lidar com tarefas ou solicitações de longa execução que exigem a espera de uma resposta de um recurso externo.

Combinando WebSockets com visualizações assíncronas

Abaixo usaremos um caso para demonstrar como combinar WebSockets e visualizações assíncronas no Django para implementar funções de comunicação em tempo real. Digamos que estamos desenvolvendo um aplicativo simples de bate-papo em tempo real.

Instalar dependências

Primeiro, precisamos instalar django-channelsa biblioteca:

canais de instalação pip

Itens de configuração

No projeto settings.py, adicione channelsa aplicação:

INSTALLED_APPS = [
    ...
    'canais',
    ...
]

Em seguida, crie um routing.pynovo arquivo chamado e defina a rota WebSocket nele:

#roteamento.py

de canais.routing importar ProtocolTypeRouter, URLRouter
de canais.auth importar AuthMiddlewareStack
do caminho de importação do django.urls
de myapp.consumers importar ChatConsumer

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

aplicação = ProtocolTypeRouter({
    'websocket': AuthMiddlewareStack(
        URLRouter(
            websocket_urlpatterns
        )
    ),
})

Criar consumidor

A seguir, criamos um Consumidor para lidar com conexões WebSocket:

#consumidores.py

importar JSON
de canais.generic.websocket importar AsyncWebsocketConsumer

classe ChatConsumer(AsyncWebsocketConsumer):
    conexão def assíncrona (self):
        self.room_name = 'chat_room'
        self.room_group_name = f'chat_{self.room_name}'

        # Junte-se ao grupo da sala de bate-papo
        aguarde self.channel_layer.group_add(
            self.room_group_name,
            self.nome_do_canal
        )

        aguarde self.accept()

    desconexão assíncrona def (self, close_code):
        #Saia do grupo da sala de chat
        aguarde self.channel_layer.group_discard (
            self.room_group_name,
            self.nome_do_canal
        )

    assíncrono def receber(self, text_data):
        text_data_json = json.loads(text_data)
        mensagem = text_data_json['mensagem']

        # Envie mensagem para o grupo da sala de bate-papo
        aguarde self.channel_layer.group_send(
            self.room_group_name,
            {
                'tipo': 'chat_message',
                'mensagem': mensagem
            }
        )

    assíncrono def chat_message(self, evento):
        mensagem = evento['mensagem']

        #Enviar mensagem para conexão WebSocket
        aguarde self.send(text_data=json.dumps({
            'mensagem': mensagem
        }))

Escreva o código front-end

Na página front-end, precisamos usar JavaScript para nos conectar ao WebSocket e lidar com o envio e recebimento de mensagens:

//chat.js

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

chatSocket.onmessage=função(e){
    dados const = JSON.parse(e.data);
    const mensagem = dados['mensagem'];
    // Processa a mensagem recebida
    console.log(mensagem);
};

chatSocket.onclose=função(e){
    console.error('Socket de bate-papo fechado inesperadamente');
};

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

Integrar ao modelo

Finalmente, integramos o código JavaScript no template Django:

<!-- chat.html -->

<!DOCTYPEhtml>
<html>
<cabeça>
    <title>Bate-papo</title>
</head>
<corpo>
    <textarea id="chat-message-input"></textarea>
    <script src="{% static 'chat.js' %}"></script>
</body>
</html>

Apresentando visualizações assíncronas

Antes do Django 3.1, as funções de visualização eram executadas de forma síncrona, o que significava que o código em uma função de visualização era executado até que uma resposta HTTP fosse retornada ao cliente. No entanto, algumas tarefas podem ser demoradas, como chamar APIs externas ou realizar cálculos complexos. Nesse caso, a sincronização da visualização bloqueia todo o aplicativo, causando degradação do desempenho.

Para resolver esse problema, o Django introduziu visualizações assíncronas, que usam asynca sintaxe do Python awaitpara suportar padrões de programação assíncronos. As visualizações assíncronas permitem que a execução seja suspensa enquanto uma solicitação está sendo processada, aguardando a conclusão da operação de IO sem bloquear todo o aplicativo.

Combinando as vantagens de WebSockets e visualizações assíncronas

A combinação de WebSockets com visualizações assíncronas pode fazer com que os aplicativos de comunicação em tempo real tenham maior desempenho e escalabilidade. Quando há um grande número de conexões se comunicando simultaneamente, as visualizações assíncronas podem gerenciar efetivamente essas conexões sem afetar o processamento de outras conexões devido ao bloqueio de uma conexão. Dessa forma, o aplicativo pode lidar melhor com situações de alta simultaneidade e manter estabilidade e eficiência.

Melhore o aplicativo de bate-papo em tempo real

Além da funcionalidade básica de chat no exemplo acima, também podemos fazer algumas extensões para o aplicativo de chat em tempo real, como:

Autenticação de usuário: execute a autenticação de usuário ao conectar-se ao WebSocket para garantir que apenas usuários logados possam entrar na sala de chat.
Gerenciamento de salas de bate-papo: crie várias salas de bate-papo e permita que os usuários optem por ingressar em diferentes salas de bate-papo.
Armazenamento de mensagens: salve os registros de bate-papo no banco de dados para que os usuários possam visualizar o histórico de mensagens após desconectar e reconectar.
Notificação de mensagens: Implemente a função de notificação de mensagens Quando o usuário receber uma nova mensagem, o usuário será lembrado por meio de uma notificação do navegador ou e-mail.
Lista de usuários online em tempo real: exibe a lista de usuários online atual e a atualiza em tempo real quando o usuário entra ou sai da sala de chat.

Compartilhamento de localização em tempo real

Suponha que estejamos desenvolvendo um aplicativo de compartilhamento de localização em tempo real onde os usuários podem ver a localização de outros usuários em um mapa em tempo real. Aqui está um código de exemplo simples:

código de back-end

#consumidores.py

importar JSON
de canais.generic.websocket importar AsyncWebsocketConsumer

classe LocationConsumer (AsyncWebsocketConsumer):
    conexão def assíncrona (self):
        self.room_name = 'location_room'
        self.room_group_name = f'location_{self.room_name}'

        # Junte-se à sala de compartilhamento de localização
        aguarde self.channel_layer.group_add(
            self.room_group_name,
            self.nome_do_canal
        )

        aguarde self.accept()

    desconexão assíncrona def (self, close_code):
        # Sair da sala compartilhada do local
        aguarde self.channel_layer.group_discard (
            self.room_group_name,
            self.nome_do_canal
        )

    assíncrono def receber(self, text_data):
        text_data_json = json.loads(text_data)
        latitude = text_data_json['latitude']
        longitude = text_data_json['longitude']

        # Envie informações de localização para a sala compartilhada de geolocalização
        aguarde self.channel_layer.group_send(
            self.room_group_name,
            {
                'tipo': 'mensagem_local',
                'latitude': latitude,
                'longitude': longitude
            }
        )

    assíncrono def location_message(self, evento):
        latitude = evento['latitude']
        longitude = evento['longitude']

        #Enviar informações de localização para conexão WebSocket
        aguarde self.send(text_data=json.dumps({
            'latitude': latitude,
            'longitude': longitude
        }))

código de front-end

//localização.js

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

locationSocket.onmessage = função (e) {
    dados const = JSON.parse(e.data);
    const latitude = dados['latitude'];
    const longitude = dados['longitude'];
    //Mostra a localização do usuário no mapa
    updateMap(latitude, longitude);
};

locationSocket.onclose=função(e){
    console.error('Soquete de localização fechado inesperadamente');
};

function sendLocation(latitude, longitude) {
    locationSocket.send(JSON.stringify({
        'latitude': latitude,
        'longitude': longitude
    }));
}

Neste exemplo, o usuário seleciona ou move um local no mapa por meio da interface front-end e, em seguida, envia as informações de localização ao servidor via WebSocket. Depois que o servidor recebe as informações de localização, ele as transmite para todos os usuários conectados. Depois que a interface front-end recebe as informações de localização, ela atualiza a localização de outros usuários no mapa em tempo real.

Essa função de compartilhamento de localização em tempo real pode ser aplicada em aplicativos sociais, aplicativos de navegação em tempo real e outros cenários para fornecer aos usuários uma melhor experiência interativa.

Visualização de dados em tempo real

Suponha que temos um sistema de monitoramento de dados que precisa exibir dados de vários sensores em tempo real. Aqui está um código de exemplo simples:

código de back-end

#consumidores.py

importar JSON
de canais.generic.websocket importar AsyncWebsocketConsumer

classe SensorDataConsumer(AsyncWebsocketConsumer):
    conexão def assíncrona (self):
        self.room_name = 'sensor_data_room'
        self.room_group_name = f'sensor_data_{self.room_name}'

        # Junte-se à sala de compartilhamento de dados do sensor
        aguarde self.channel_layer.group_add(
            self.room_group_name,
            self.nome_do_canal
        )

        aguarde self.accept()

    desconexão assíncrona def (self, close_code):
        # Saia da sala de compartilhamento de dados do sensor
        aguarde self.channel_layer.group_discard (
            self.room_group_name,
            self.nome_do_canal
        )

    assíncrono def receber(self, text_data):
        text_data_json = json.loads(text_data)
        sensor_id = text_data_json['sensor_id']
        valor_sensor = text_data_json['valor_sensor']

        # Envie dados do sensor para a sala de compartilhamento de dados do sensor
        aguarde self.channel_layer.group_send(
            self.room_group_name,
            {
                'tipo': 'sensor_data_message',
                'sensor_id': sensor_id,
                'sensor_value': sensor_value
            }
        )

    assíncrono def sensor_data_message(self, evento):
        sensor_id = evento['sensor_id']
        valor_sensor = evento['valor_sensor']

        # Envia dados do sensor para conexão WebSocket
        aguarde self.send(text_data=json.dumps({
            'sensor_id': sensor_id,
            'sensor_value': sensor_value
        }))

código de front-end

//sensor_data.js

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

sensorDataSocket.onmessage = função (e) {
    dados const = JSON.parse(e.data);
    const sensorId = dados['sensor_id'];
    const sensorValue = dados['sensor_value'];
    //Atualiza o gráfico de dados do sensor
    updateChart(sensorId, sensorValue);
};

sensorDataSocket.onclose = função (e) {
    console.error('Soquete de dados do sensor fechado inesperadamente');
};

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

Neste exemplo, o dispositivo sensor envia dados em tempo real para o servidor através do WebSocket. Depois que o servidor recebe os dados, ele os transmite para todos os usuários conectados. Depois que a interface front-end recebe os dados, ele usa uma biblioteca de gráficos JavaScript para. exibir os dados em tempo real em um gráfico em tempo real.

Essa função de visualização de dados em tempo real pode ser aplicada em cenários como monitoramento de dados e análise em tempo real, fornecendo aos usuários exibição de dados em tempo real e funções de monitoramento.

Recursos avançados e aplicativos avançados

Além das funções básicas de chat em tempo real, uma série de funções e aplicativos avançados podem ser alcançados combinando WebSockets e visualizações assíncronas. aqui estão alguns exemplos:

1. Compartilhamento de localização em tempo real

Usando WebSocket e visualizações assíncronas, o compartilhamento de localização em tempo real entre usuários pode ser alcançado. À medida que o usuário se move, o aplicativo front-end pode enviar as informações de localização do usuário ao servidor, que então transmite essas informações para outros usuários. Esta função é muito útil em aplicações sociais, aplicações de navegação em mapas e outros cenários.

2. Visualização de dados em tempo real

No campo da análise e monitoramento de dados, a visualização de dados em tempo real é uma tarefa importante. Através do WebSocket e visualizações assíncronas, os dados podem ser transmitidos para o front-end em tempo real, e bibliotecas de gráficos JavaScript (como Highcharts, Chart.js, etc.) podem ser usadas para exibir tendências de mudança de dados e monitorar o status do sistema em tempo real.

3. Edição colaborativa online

Usando WebSocket e visualizações assíncronas, você pode realizar funções de edição colaborativa on-line para várias pessoas, semelhantes ao Google Docs. Quando um usuário edita um documento, outros usuários podem ver as alterações no conteúdo editado em tempo real, permitindo assim a edição colaborativa em tempo real por várias pessoas.

4. Jogos em tempo real

Os jogos em tempo real têm demandas muito altas de comunicação em tempo real. Combinar WebSocket e visualizações assíncronas pode realizar jogos online multijogador em tempo real, como xadrez e jogos de cartas, jogos de estratégia em tempo real, etc., proporcionando uma experiência de jogo tranquila.

5. Pesquisa e filtragem em tempo real

Em sites e aplicativos, os usuários podem precisar pesquisar e filtrar dados em tempo real. Por meio do WebSocket e de visualizações assíncronas, você pode enviar palavras-chave de pesquisa ou condições de filtro ao servidor em tempo real e obter os resultados da pesquisa ou dados filtrados retornados pelo servidor em tempo real, melhorando assim a experiência do usuário.

6. Votação e questionários em tempo real

A votação online e as pesquisas por questionário geralmente exigem acesso em tempo real aos resultados da votação ou ao status do preenchimento do questionário. Combinando WebSocket e visualizações assíncronas, gráficos de resultados de votação ou estatísticas de questionários podem ser atualizados em tempo real, permitindo aos usuários entender a situação atual da votação ou o progresso do preenchimento do questionário em tempo real.

Resumir

Este artigo apresenta como usar WebSockets e visualizações assíncronas no Django para implementar funções de comunicação em tempo real. Aprendemos primeiro sobre os conceitos básicos e princípios de funcionamento dos WebSockets e django-channelscomo usar bibliotecas para oferecer suporte a WebSockets no Django. A seguir, exploramos profundamente o conceito e o uso de visualizações assíncronas e como combinar WebSockets e visualizações assíncronas para obter funções de comunicação em tempo real.

Através de um exemplo simples de aplicação de chat em tempo real, demonstramos como criar um consumidor WebSocket (Consumidor) para lidar com conexões WebSocket e usar visualizações assíncronas para lidar com eventos em conexões WebSocket. Também apresentamos como usar JavaScript na página front-end para conectar-se ao WebSocket e processar as mensagens recebidas em tempo real.

Em seguida, exploramos ainda mais as vantagens de combinar WebSockets e visualizações assíncronas e fornecemos uma série de recursos avançados e exemplos de aplicativos avançados, incluindo compartilhamento de localização em tempo real, visualização de dados em tempo real, etc. Essas funções e aplicativos podem fornecer aos desenvolvedores mais inovações e possibilidades para atender às necessidades de comunicação em tempo real em diferentes cenários.

Clique para seguir e conhecer as novas tecnologias da Huawei Cloud o mais rápido possível~