Phoenix Presence: Le service tempsréel de Phoenix 1.2Mickaël RémondProcessOne

Brève histoire de Phoenix

Qu'est-ce que Phoenix ?

Framework de développement Web

Développement lancé en août 2014 avec un focus sur les websockets

Inspiration venant de différents frameworks: Ruby on Rails, Clojure Ring, ScalaPlayframework, ...

Version 1.0 sortie en août 2015.

Version 1.1 en décembre 2015.

Version 1.2 majeure en juin 2016.

Les atouts de Phoenix

Points forts:

Élégance grâce à la syntaxe d'Elixir et à son système de macros (DSL)

Performance et clustering grâce à la VM Erlang

Productivité avec des outils de base de données comme Ecto

Fonctionnalités:

couvre le support des pages web dynamiques.

interactions temps réel: websockets et presence.

De Phoenix 1.0 à Phoenix 1.2

Phoenix 1.1:

Amélioration des performances des channels

Localisation via Gettext

Phoenix 1.2:

Ecto 2.0

Phoenix Presence

Références

Introduction au développement Web avec le framework Phoenix

www.youtube.com/watch?v=GPF6w3CsWio (https://www.youtube.com/watch?v=GPF6w3CsWio)

Site Web de Phoenix

www.phoenixframework.org (http://www.phoenixframework.org)

Websockets, Channels, Presence: Les concepts

Définitions

Websockets: protocole de communication entre le navigateur et le serveur. Maintiens laconnexion pendant la durée de la session.

Channels: Les channels définisset le comportement du serveur pour le broadcast demessage en temps réel, par "sujet" (topic).

Presence: Le module de "présence tracker synchronize l'état des joins et des leaves desur les topics, via le module channel, et broadcast les changements.

Architecture

Presence vs Channels ?

La fonctionnalité de Phoenix Presence vient sous la forme d'un presence tracker.

Il s'agit d'une structure de données en mémoire, répliquée et synchronisée en temps réel sur tous les noeuds d'un cluster Elixir.

Elle s'appuie sur les channels:

pour recevoir les événements de join et de leave.

pour envoyer l'état initial et les mises à jour incrémentales.

Phoenix Presence permet:

la découverte de service / composants du système.

la gestion de la présence des utilisateurs.

Points forts de Phoenix Presence

Robustesse:

Réplication en temps réel sur l'ensemble du cluster.

pas de point de failure unique (SPOF).

peut continuer à fonctionner lors d'un netsplit.

supporte de fortes charges.

Simplicité:

de gestion: gère la réconciliation automatiquement lorsque le cluster se reconstitue.

de déploiement: dépends uniquement de module standard, sans dépendance externe.

d'implémentation: est fourni avec un module Javascript pour faciliter l'implémentationdes clients.

Limitations

Phoenix Presence est une structure de données distribuée. Les fonctionnalités restentd'assez bas niveau.

Il est idéal pour gérer la présence en temps réel pour des communautés:

Site web

Jeu vidéo

Il reste un système simple, fonctionnant sur la base de topic et de channels:

Pas de liste de contacts / présence individuelle.

Mise en œuvre

L'exemple Gastronokids

Application d'illustration utilisée dans ma précédente présentation sur Phoenix.

github.com/ElixirParis/gastronokids (https://github.com/ElixirParis/gastronokids)

Enrichissement pour ajouter un module de présence.

Étape 1: Mise à jour de Phoenix 1.0 à Phoenix 1.2

Changements

Résumé:

Migration vers Postgres: SQLite Ecto ne fonctionne pas encore avec Ecto 2.0

Mise à jour des dépendances Elixir et Javascript

Mise à jour vers Ecto 2.0: Model -> Schema

Ajout du support de la localisation Gettext

Changement du code de gestion des erreurs dans les formulaires

Commit complet:

Github: Migrate for Phoenix 1.0 to Phoenix 1.2 + move to Postgres(https://github.com/ElixirParis/gastronokids/commit/418e10926c7e647b47628d2006a91123496a57da)

Étape 2: Ajout du module de présence

Générer le code du module Presence

Utilisation du scaffolding pour générer le code:

$ mix phoenix.gen.presence * creating web/channels/presence.ex Add your new module to your supervision tree, in lib/gastronokids.ex: children = [ ... supervisor(Gastronokids.Presence, []), ] You're all set! See the Phoenix.Presence docs for more details: http://hexdocs.pm/phoenix/Phoenix.Presence.html

Nous utilisons le module en l'état.

Configuration

Ajouter le service de présence dans l'application

Dans lib/gastronokids.ex, ajout du module dans l'arbre de supervision:

def start(_type, _args) do import Supervisor.Spec, warn: false children = [ # Start the endpoint when the application starts supervisor(Gastronokids.Endpoint, []), # Start the Ecto repository worker(Gastronokids.Repo, []), # Presence tracker: supervisor(Gastronokids.Presence, []), ] # See http://elixir-lang.org/docs/stable/elixir/Supervisor.html # for other strategies and supported options opts = [strategy: :one_for_one, name: Gastronokids.Supervisor] Supervisor.start_link(children, opts) end

Config PubSub

Vérifier que le service PubSub est bien configuré dans config/config.exs:

config :gastronokids, Gastronokids.Endpoint, url: [host: "localhost"], secret_key_base: "j458rtSt4qQnUmBDEVmjX3X6tCtLLjWJy6rhO58WO86s1S2I3i4zePgdcV/T3N41", render_errors: [view: Gastronokids.ErrorView, accepts: ~w(html json)], # This is mapping between name and pubsub backend pubsub: [name: Gastronokids.PubSub, adapter: Phoenix.PubSub.PG2]

room_channel.ex

Lier la présence aux channels (1/2)

Importer notre module de présence dans web/channel/room_channel.ex:

defmodule Gastronokids.RoomChannel do use Gastronokids.Web, :channel alias Gastronokids.Presence

Déclencher un événement de join asynchrone:

def join("rooms:lobby", payload, socket) do if authorized?(payload) do send self(), :after_join {:ok, socket} else {:error, %{reason: "unauthorized"}} end end

Lier la présence aux channels (2/2)

Garder la trace de la présence après le join et broadcast de la liste initiale:

def handle_info(:after_join, socket) do Presence.track(socket, socket.assigns.user_id, %{ device: "browser", online_at: inspect(:os.timestamp()) }) push socket, "presence_state", Presence.list(socket) {:noreply, socket} end

Note: Il n'est pas nécessaire de gérer la déconnexion / leave. Channels et Presence gèrentcela pour le développeur.

Broadcast des messages de chat

Le callback handle_in sert toujours à assurer la diffusion des messages de chat:

def handle_in("new_msg", payload, socket) do payloadWithUser = %{"body" => payload["body"], "user": socket.assigns.user_id} broadcast! socket, "new_msg", payloadWithUser {:noreply, socket} end

Le callback handle_out n'est pas nécessaire, car nous utilisons l'implémentation par défaut.

user_socket.ex

Assigner le user_id à la socket

Nous étendons la fonction connect/2 dans web/channels/user_socket.ex:

def connect(%{"user_id" => id}, socket) do {:ok, assign(socket, :user_id, id)} end

Le client Javascript socket.js

Mise en place socket / présence

Dans web/static/js/socket.js, nous importons Socket et Presence, et créons unenouvelle socket:

import {Socket, Presence} from "phoenix" let socket = new Socket("/socket", {params: {token: window.userToken, user_id: window.userId}})

Nous lançons la connexion et initialons l'environnement:

socket.connect() let channel = socket.channel("rooms:lobby", {}) let presences = {}

Gestion des événements de présence

La lib Phoenix Presence Javascript gère l'état des présences pour le développeur:

channel.on("presence_state", state => { presences = Presence.syncState(presences, state) render(presences) }) channel.on("presence_diff", diff => { presences = Presence.syncDiff(presences, diff) render(presences) })

Afficher la liste de présence

La lib Phoenix Presence Javascript permet de récupérer et trier la liste des présences:

let listBy = (id, {metas: [first, ...rest]}) => { first.name = id first.count = rest.length +1 return first } let render = (presences) => { let onlineUsers = Presence.list(presences, listBy) let htmlList = onlineUsers .map(user => `<li>${user.name} (${user.count})</li>`) .join("") userList.html(htmlList) }

Gestion des messages

Pour finir, nous gérer la réception et l'envoi des messages:

channel.on("new_msg", payload => { var now = new Date(); messagesContainer.append(`<br/>[${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}] ${payload.user}}) chatInput.on("keypress", event => { if(event.keyCode === 13){ channel.push("new_msg", {body: chatInput.val()}) chatInput.val("") } })

L'interface utilisateur

Mise en place du code HTML

Notre code fournit des éléments conteneurs pour les utilisateurs présents et le chat:

<p>Online Users:</p> <ul id="user-list"></ul> <div class="chat"> <div id="messages"></div> <input id="chat-input" type="text"></input> </div>

Pour simplifier, le nom de l'utilisateur vient des paramètres de la page:

<script> window.userId = "<%= if @conn.params["name"], do: @conn.params["name"], else: "Anonymous" %>" </script>

Démo

localhost:4000/?name=Micka%C3%ABl (http://localhost:4000/?name=Micka%C3%ABl)

localhost:4000/?name=JohnDoe (http://localhost:4000/?name=JohnDoe)

localhost:4000/?name=Steve (http://localhost:4000/?name=Steve)

Télécharger le code

Github Gastronokids

github.com/ElixirParis/gastronokids (https://github.com/ElixirParis/gastronokids)

Conclusion

L'ajout du module de Presence complète les channels de Phoenix de manièreredoutablement efficace.

Avec cet ajout, Phoenix devient l'outil le plus complet pour implémenter des applicationsweb temps réel reliant:

Base de données.

Système de templating de pages.

Mise à jour temps réel via un outillage Javascript complet.

Et tout cela, dans un package unique, sans dépendance.

Thank you

Mickaël RémondProcessOnemremond@process-one.net (mailto:mremond@process-one.net)

http://www.process-one.net/ (http://www.process-one.net/)

@mickael (http://twitter.com/mickael)