WordPress et Mercure : le temps réel en quelques clics

Vous voulez intégrer des fonctionnalités temps réels sur votre site WordPress ? WP Mercure va vous le permettre. Je vous explique dans cet article comment le configurer et pourquoi je l’ai développé.

Dans la communauté des développeurs WordPress n’est jamais vu d’un bon oeil mais il reste encore aujourd’hui le CMS le plus utilisé (60% du marché) et 14% des sites l’utilisent. Donc pour moi contribuer et créer des plugins WordPress restent important (bientôt sur mon site d’ailleurs vous pourrez retrouver une série de tutoriels afin de créer son site WordPress).

C’est pourquoi aujourd’hui je vous annonce l’arrivée d’un nouveau plugin : WP Mercure.

Le temps réel en php : un calvaire

Avec WordPress, et plus précisément PHP, faire du véritable temps réel est compliqué pourtant il existe des solutions (ReactPHP, websocket et j’en passe). Mais aucunes solutions ne me convenaient vraiment pour l’intégrer à WordPress, du moins facilement. Ce que je voulais c’est une solution simple à mettre en place et qui utilise les dernières technologies du web, notamment le Server-sent events.

C’est en faisant un tour sur l’actualité de Symfony que j’ai découvert Mercure.

Mercure, un nouveau protocole Web

Mercure permet de « pousser » en temps réel des données depuis des serveurs vers des navigateurs Web (ou autres clients HTTP). La spécification et l’implémentation sont disponibles sur GitHub. Le projet peut être considéré comme un remplaçant de WebSocket (bien que le protocole soit de plus haut niveau) et des solutions propriétaires telles que Pusher. Contrairement à WebSocket, Mercure est compatible avec HTTP/2 et HTTP/3. Je ne rentrerai pas plus dans les détails je vous laisse lire toute la documentation disponible sur le site officiel ou en lisant cet article.

C’est donc pour tout cela que je me suis dit : et pourquoi pas créer un plugin WordPress pour faciliter son intégration sur le CMS ?

WP Mercure : un plugin pour les développeurs ?

Ce n’est que partiellement vrai. Disons que pour utiliser le plugin il vous faudra configurer un serveur avec Mercure comme il faut (et ce n’est pas possible pour tout le monde). Après cela vous pourrez utiliser le plugin très facilement.

Je ne vais parler ici que de l’utilisation du plugin. Je vous laisse vous référer au site de Mercure pour l’installation.

Logo du plugin WordPress

L’installation et la configuration sont très simple :

  • Cherchez simplement « WP Mercure » dans la recherche de plugin dans l’administration de WordPress et cliquez sur installer
  • Activez le plugin
  • Dans le menu « Mercure » qui est apparu remplissez tous les champs pour configurer convenablement le plugin
Menu configuration du plugin WP Mercure
Menu configuration du plugin WP Mercure
  • HUB url serveur et client sont différents si Mercure est configuré sur le même serveur que le site WordPress

Les articles en direct

La principale fonctionnalité pour le moment est de permettre l’envoie de notification à un lecteur lors de la modification de l’article en cours de lecture. S’il clique sur la notification l’article sera mis à jour.

Pour cela il vous suffit d’aller dans le menu fonctionnalités.

  • Cochez « Article en direct »
  • Remplissez « Sélecteur CSS article en direct ». Vous devez le remplir avec le sélecteur CSS correspondant au conteneur principal du contenu de l’article.

Après cela tous les articles de votre site pourrons recevoir des notifications. Afin d’envoyer une notification :

  • Si vous avez Gutenberg vous allez remarquer l’ajout d’un panel « Mercure » où il y a un bouton d’envoie de notification.
  • Si vous utilisez l’éditeur classique cochez « Envoi notification » et mettez à jour l’article
Bouton d'envoi de la notification avec Gutenberg
Bouton d’envoi de la notification avec Gutenberg
Checkbox envoi de la notification avec l'éditeur classique
Checkbox envoi de la notification avec l’éditeur classique

Et voilà je vous laisse maintenant tester tout ça !
Voici un tweet qui montre la fonctionnalité d’article en direct :

https://twitter.com/Amorfx3/status/1288516596735053824

Si vous voulez plus d’informations voici le lien vers le plugin ou sur le lien du Github.

S’abonner
Notification pour
guest

0 Commentaires
Commentaires en ligne
Afficher tous les commentaires