Introducción a los canales de Django

NOTA: Intenta usar michael como nombre de usuario y johnson123 como contraseña.

El sign_up view nos redirige a log_in vista, y desde allí podemos autenticar nuestro usuario recién creado.

Después de iniciar sesión, podemos probar nuestras nuevas vistas de autenticación.

Utilice el formulario de registro para crear varios usuarios nuevos en preparación para la siguiente sección.

Alertas de inicio de sesión

Tenemos la autenticación de usuario básica funcionando, pero aún necesitamos mostrar una lista de usuarios y necesitamos que el servidor le diga al grupo cuándo un usuario inicia y cierra sesión. Necesitamos editar nuestras funciones de consumidor para que envíen un mensaje justo después de un el cliente se conecta y justo antes de que un cliente se desconecte. Los datos del mensaje incluirán el nombre de usuario y el estado de conexión del usuario.

Actualice example_channels/example/consumers.py así:

import json
from channels import Group
from channels.auth import channel_session_user, channel_session_user_from_http


@channel_session_user_from_http
def ws_connect(message):
    Group('users').add(message.reply_channel)
    Group('users').send({
        'text': json.dumps({
            'username': message.user.username,
            'is_logged_in': True
        })
    })


@channel_session_user
def ws_disconnect(message):
    Group('users').send({
        'text': json.dumps({
            'username': message.user.username,
            'is_logged_in': False
        })
    })
    Group('users').discard(message.reply_channel)

Tenga en cuenta que hemos agregado decoradores a las funciones para obtener al usuario de la sesión de Django. Además, todos los mensajes deben ser serializables mediante JSON, por lo que volcamos nuestros datos en una cadena JSON.

A continuación, actualice example_channels/example/templates/example/user_list.html :

{% extends 'example/_base.html' %}

{% block content %}
  <a href="{% url 'example:log_out' %}">Log out</a>
  <br>
  <ul>
    {% for user in users %}
      <!-- NOTE: We escape HTML to prevent XSS attacks. -->
      <li data-username="{{ user.username|escape }}">
        {{ user.username|escape }}: {{ user.status|default:'Offline' }}
      </li>
    {% endfor %}
  </ul>
{% endblock content %}

{% block script %}
  <script>
    var socket = new WebSocket('ws://' + window.location.host + '/users/');

    socket.onopen = function open() {
      console.log('WebSockets connection created.');
    };

    socket.onmessage = function message(event) {
      var data = JSON.parse(event.data);
      // NOTE: We escape JavaScript to prevent XSS attacks.
      var username = encodeURI(data['username']);
      var user = $('li').filter(function () {
        return $(this).data('username') == username;
      });

      if (data['is_logged_in']) {
        user.html(username + ': Online');
      }
      else {
        user.html(username + ': Offline');
      }
    };

    if (socket.readyState == WebSocket.OPEN) {
      socket.onopen();
    }
  </script>
{% endblock script %}

En nuestra página de inicio, ampliamos nuestra lista de usuarios para mostrar una lista de usuarios. Almacenamos el nombre de usuario de cada usuario como un atributo de datos para facilitar la búsqueda del elemento de usuario en el DOM. También agregamos un detector de eventos a nuestro WebSocket que puede manejar mensajes del servidor. Cuando recibimos un mensaje, analizamos los datos JSON, buscamos el <li> para el usuario dado y actualizar el estado de ese usuario.

Django no rastrea si un usuario ha iniciado sesión, por lo que necesitamos crear un modelo simple para que lo haga por nosotros. Crear un LoggedInUser modelo con una conexión uno a uno con nuestro User modelo en example_channels/example/models.py :

from django.conf import settings
from django.db import models


class LoggedInUser(models.Model):
    user = models.OneToOneField(
        settings.AUTH_USER_MODEL, related_name='logged_in_user')

Nuestra aplicación creará un LoggedInUser instancia cuando un usuario inicia sesión y la aplicación eliminará la instancia cuando el usuario cierra sesión.

Realice la migración del esquema y luego migre nuestra base de datos para aplicar los cambios.

(env)$ python manage.py makemigrations
(env)$ python manage.py migrate

A continuación, actualice nuestra vista de lista de usuarios, en example_channels/example/views.py , para recuperar una lista de usuarios para renderizar:

from django.contrib.auth import get_user_model, login, logout
from django.contrib.auth.decorators import login_required
from django.contrib.auth.forms import AuthenticationForm, UserCreationForm
from django.core.urlresolvers import reverse
from django.shortcuts import render, redirect


User = get_user_model()


@login_required(login_url='/log_in/')
def user_list(request):
    """
    NOTE: This is fine for demonstration purposes, but this should be
    refactored before we deploy this app to production.
    Imagine how 100,000 users logging in and out of our app would affect
    the performance of this code!
    """
    users = User.objects.select_related('logged_in_user')
    for user in users:
        user.status = 'Online' if hasattr(user, 'logged_in_user') else 'Offline'
    return render(request, 'example/user_list.html', {'users': users})


def log_in(request):
    form = AuthenticationForm()
    if request.method == 'POST':
        form = AuthenticationForm(data=request.POST)
        if form.is_valid():
            login(request, form.get_user())
            return redirect(reverse('example:user_list'))
        else:
            print(form.errors)
    return render(request, 'example/log_in.html', {'form': form})


@login_required(login_url='/log_in/')
def log_out(request):
    logout(request)
    return redirect(reverse('example:log_in'))


def sign_up(request):
    form = UserCreationForm()
    if request.method == 'POST':
        form = UserCreationForm(data=request.POST)
        if form.is_valid():
            form.save()
            return redirect(reverse('example:log_in'))
        else:
            print(form.errors)
    return render(request, 'example/sign_up.html', {'form': form})

Si un usuario tiene un LoggedInUser asociado , luego registramos el estado del usuario como "En línea", y si no, el usuario está "Fuera de línea". También agregamos un @login_required decorador tanto a nuestra lista de usuarios como a las vistas de cierre de sesión para restringir el acceso solo a usuarios registrados.

Añade también las importaciones:

from django.contrib.auth import get_user_model, login, logout
from django.contrib.auth.decorators import login_required

En este punto, los usuarios pueden iniciar y cerrar sesión, lo que activará el servidor para enviar mensajes al cliente, pero no tenemos forma de saber qué usuarios están conectados cuando el usuario inicia sesión por primera vez. El usuario solo ve actualizaciones cuando otro usuario cambios de estado. Aquí es donde el LoggedInUser entra en juego, pero necesitamos una forma de crear un LoggedInUser instancia cuando un usuario inicia sesión y luego lo elimina cuando ese usuario cierra sesión.

La biblioteca de Django incluye una característica conocida como señales que transmite notificaciones cuando ocurren ciertas acciones. Las aplicaciones pueden escuchar esas notificaciones y luego actuar en consecuencia. Podemos explotar dos útiles señales integradas (user_logged_in y user_logged_out ) para manejar nuestro LoggedInUser comportamiento.

Dentro de "example_channels/example", agregue un nuevo archivo llamado signals.py :

from django.contrib.auth import user_logged_in, user_logged_out
from django.dispatch import receiver
from example.models import LoggedInUser


@receiver(user_logged_in)
def on_user_login(sender, **kwargs):
    LoggedInUser.objects.get_or_create(user=kwargs.get('user'))


@receiver(user_logged_out)
def on_user_logout(sender, **kwargs):
    LoggedInUser.objects.filter(user=kwargs.get('user')).delete()

Tenemos que hacer que las señales estén disponibles en la configuración de nuestra aplicación, example_channels/example/apps.py :

from django.apps import AppConfig


class ExampleConfig(AppConfig):
    name = 'example'

    def ready(self):
        import example.signals

Actualizar ejemplo_canales/ejemplo/__init__.py también:

default_app_config = 'example.apps.ExampleConfig'

Comprobación de estado

Ahora hemos terminado de codificar y estamos listos para conectarnos a nuestro servidor con múltiples usuarios para probar nuestra aplicación.

Ejecute el servidor Django, inicie sesión como usuario y visite la página de inicio. Deberíamos ver una lista de todos los usuarios en nuestra aplicación, cada uno con un estado de "Desconectado". A continuación, abra una nueva ventana de incógnito e inicie sesión como un usuario diferente y observe ambas pantallas. Justo cuando iniciamos sesión, el navegador normal actualiza el estado del usuario a "En línea". Desde nuestra ventana de Incógnito, vemos que el usuario que inició sesión también tiene un estado de "En línea". Podemos probar los WebSockets iniciando y cerrando sesión en nuestros diferentes dispositivos con varios usuarios.

Al observar la consola del desarrollador en el cliente y la actividad del servidor en nuestra terminal, podemos confirmar que las conexiones WebSocket se forman cuando un usuario inicia sesión y se destruyen cuando un usuario cierra sesión.

[2017/02/20 00:15:23] HTTP POST /log_in/ 302 [0.07, 127.0.0.1:55393]
[2017/02/20 00:15:23] HTTP GET / 200 [0.04, 127.0.0.1:55393]
[2017/02/20 00:15:23] WebSocket HANDSHAKING /users/ [127.0.0.1:55414]
[2017/02/20 00:15:23] WebSocket CONNECT /users/ [127.0.0.1:55414]
[2017/02/20 00:15:25] HTTP GET /log_out/ 302 [0.01, 127.0.0.1:55393]
[2017/02/20 00:15:26] HTTP GET /log_in/ 200 [0.02, 127.0.0.1:55393]
[2017/02/20 00:15:26] WebSocket DISCONNECT /users/ [127.0.0.1:55414]