PandaLabs

EventManager pour NodeJs et AngularJs

06 mai 2017,   By ,   0 Comments

Toujours dans mon avancée sur 7Wo, je me rappelle de mes premiers instants dans NodeJs et AngularJS il y a un peu plus d’un an… Est-ce que c’est si différent que ça ? Est-ce que c’est complémentaire ? Est-ce qu’AngularJS/NodeJS c’est vraiment du JS ?

Bon, alors, pour la dernière question : c’est un oui… j’disais ça pour déconner quoi.

Mais je voulais vous partager deux rapides snippets, l’un pour NodeJs et l’autre pour Angular…

Voici donc un petit EventManager. Pour angular, il permet de broadcaster des events et de les catcher via le $rootScope. C’est une bête factory utilisable un poil partout. Et côté Node, eh bah c’est exactement la même… en jouant simplement avec l’eventsEmitter.

Cet exemple démontre bien à quel point la logique derrière du JS server ou du JS client reste la même et qu’il ne faut pas en avoir peur.

Mais avant ça …

A quoi ça sert un EventManager ?

J’vais pas vous expliquer le fonctionnement de JavaScript, mais le truc parfois un peu chaud c’est que le code ne s’exécute pas forcément comme on le pense. Alors du coup, on fait usage de callback et ça devient un bordel. Les callacks incluent des callacks qui en incluent d’autres… et parfois on s’attend à récupérer quelque chose qui n’a pas encore été exécuté et là, c’est le merdier.

Moi, je préfère jouer avec les événements. Je fais un truc, je sais absolument pas quand il sera résolu (call à une API distante par exemple) mais j’veux pas figer mon utilisateur en attendant. Je place donc un Listener d’Event en mode « hey, dès que tu as fini, tu me le dis gros, comme ça, bah je finirais… » et du coup, je lance l’event dès que j’ai ce que je veux. Ma vie est belle, mon interface ne se fige pas et envoie du pâté.

Le truc, c’est que chaque fois que je veux notifier un event ou souscrire à un event, j’vais pas m’amuser à réinjecter toutes les librairies… D’où l’idée de centraliser tout ça dans un manager. Ce que je veux faire par exemple c’est : « supprimer une partie, quand c’est fait, informer les joueurs inscrits à cette partie qu’elle est supprimée, qu’ils doivent rafraîchir (automatiquement bien sûr) leur listes des parties et qu’ils sont disponibles pour s’inscrire à une autre »… Pour que tout ça fonctionne, je pose une notification au moment de déconnecter un joueur par exemple (ou à la fin de la partie, ou à la simple suppression de la partie… ça en fait des actions qui font la même chose à des moments différents) (ce qui supprime la partie… et qui du coup notifie les joueurs… blablabla)…

Je sais pas si c’est clair… on s’en fout à la limite, personne ne lira ça.

EventManager pour NodeJs

En gros, on charge les lib Node de gestion des Events. On créé des Events (objet availableEvents)  et on étend l’objet EventManager à l’aide de l’objet methods. Et voilà, nous avons des tonnes de EventManager.WHATEVER.subscribe/notify !

L’utilisation est très simple :

On souscrit à l’événement où on en a besoin. Quand le notify sera déclenché, on jouera le callback associé (ici onTimeoutConnection)

Et par exemple, dès qu’on supprime une connexion, on veut jouer le fameux callbback

C’est pratique, parce qu’on est dans deux fichiers différents, dans deux endroits probablement différent du code et on fait transiter les données nécessaires. Et je peux souscrire à des endroits différents pour le même event et jouer d’autres callbacks, où le même. On est dry, on est propre…

EventManager côté AngularJS

Exactement la même chose, avec la couche Angular

Et l’utilisation est exactement la même…

On souscrit

On exécute les suscribers :

Voilà… y a surement des solutions plus simples, et j’veux bien les connaître, mais ça, c’est déjà plutôt cool