WebSocket et SimpleWeb4j

11 juin 2014

Tags : java8, javascript, SimpleWeb4j, websocket

Nous allons voir comment faire du websocket avec SimpleWeb4j.

WebSocket c'est quoi

WebSocket est un protocole permettant la communication de type push entre un browser et un serveur de manière bi-directionnelle.


On fait quoi comme exemple?

Comme je suis super original, on va partir sur un chat (le truc pour discuter, pas l'animal !), ça nous rappellera la grande époque de caramail :)

Pour mettre en place un chat, on a besoin d'un service côté serveur qui peut recevoir des messages en push depuis les clients, et quand il en reçoit un le redistribue à tous les clients.


La partie serveur

Nous allons commencer par créer notre objet métier représentant un message, celui-ci contient l'utilisateur, le texte et la date du message. Il servira pour les messages que l'on envoie aux clients (pour les flux client -> serveur, nous utiliserons une simple String).

Nous allons maintenant créer la route de la websocket avec la méthode SimpleWeb4j.websocket, cette méthode prend en paramètre une String représentant l'url et un WebSocketAdapter. Un WebSocketAdapter et une factory qui contient une méthode prenant en paramètres les "RouteParameters" et qui construit un WebSocketListenner. On a donc le code suivant pour l'instant :

Voyons maintenant comment construire le "WebSocketListener", nous avons pour ça un builder. Nous souhaitons construire un listener en implémentant un comportement sur 3 événements :

  • onConnect : on ajoute la session dans un set pour connaître les sessions ouvertes.
  • onClose : on supprime la session de notre set.
  • onMessage : on envoi le message reçu à tout les clients.
Voici donc le résultat final :


La partie cliente

Pour la partie cliente, on a un objet javascript "WebSocket" qui prend l'url en paramètre du constructeur.

Il nous reste après à définir les callback "onmessage" et "onopen". Pour envoyer un message au serveur, il suffit d'utiliser la méthode WebSocket.send. Si vous voulez plus de détails, vous pouvez aller voir la page de mozilla.

Voici donc la page html complète, comme d'habitude, j'utilise angular.js :) >/p>

Alors, ça vous parait compliqué de faire du WebSocket?

Commentaires

Server Sent Events, et côté client?

05 juin 2014

Tags : EventSource, javascript, Server-Sent-Events, SSE

Aujourd'hui, je vais vous parler de Server Sent Events côté client javascript.

Nous allons reprendre le serveur qui envoyait l'heure toutes les secondes codé ici.

L'utilisation d'un flux Server Sent Event se fait par l'intermédiaire de l'objet "EventSource" qui prend comme paramètre dans le constructeur l'url du flux. Cet objet possède une fonction "addEventListener" qui prend en paramètres le type de listener (message pour la réception de nouvelles données) ainsi que la callback.

Si vous êtes comme moi et que vous utilisez angular.js un peu partout, vous savez comment il peut s'avérer complexe de s'intégrer dans son dual binding, mais la méthode $scope.$apply est là pour ça!

Voici donc le résultat final :


Et voilà, c'est pas bien compliqué de faire du temps réel :)

Petit précision, EventSource n'est pas supporté par IE, mais il existe un contournement : github.com/Yaffle/EventSource

Commentaires