Mise en place d'un chat XMPP sur votre site web / Intégration dans Cesium pour support utilisateurs

Bonjour à tous,

En déployant une instance Diaspora, j’ai découvert Prosody qui permet de déployer un server XMPP/Jabber ainsi que les logiciels clients pour s’y connecter. J’ai alors découvert un client javascript : conversejs qui m’a permis de mettre mon chat en version “en ligne” et aussi de l’intégrer sur cesium. Conversejs est très facile à intégrer et il m’est alors venu une petite idée. Et si nous intégrions un tchat de support pour les utilisateurs de cesium ? Le même sur toutes les instances ? (bien que les propriétaires des instances soit libres ^^). Je pensais à cesium@muc.duniter.org ou cesium.support@muc.duniter.org par exemple

Mise en place d’un chat XMPP avec Conversejs

Pré-requis

Avoir un serveur XMPP

Tout d’abord il vous faut un serveur XMPP fonctionnel. Prosody est simple à installer et à configurer sur un serveur Linux et le support est très réactif. Une fois votre serveur XMPP en route, il vous faudra créer un Component qui servira à accueillir votre MUC (Multi-User-Chat) dans lequel vous pourrez créer des salons. Je ne m’attarderai pas ici sur la config du serveur XMPP car la doc est bien fournie. Si vous avez des questions, contactez le support ou, éventuellement, moi-même.

Avoir un site web sur lequel implémenter Conversejs

Une fois votre serveur XMPP en place, conversejs est très simple à déployer. Il vous faut bien sûr un serveur web (Apache ou Nginx) avec un VHOST pour votre site web tout ça tout ça.

BOSH et CORS

Pour implémenter conversejs sur votre site web, vous utiliserez BOSH et pour éviter les problèmes liés aux requêtes cross-domain, il faudra, dans le VHOST qui gère votre site, créer un proxy. Voici un exemple pour Apache en SSL :

SSLProxyEngine on
<Location /http-bind>
  ProxyPass https://serveurxmpp.tld:5281/http-bind/
  ProxyPassReverse https://serveurxmpp.tld:5281/http-bind/
</Location>
ProxyRequests Off

Et voici un autre exemple pour Nginx sans SSL avec Nginx et Prosody sur le même serveur (localhost est plus performant dans ce cas-là) :

location /http-bind {
  proxy_pass  http://localhost:5280/http-bind;
  proxy_set_header Host $host;
  proxy_buffering off;
  tcp_nodelay on;
}

Connexion anonyme

Pour permettre les connexions anonymes dans votre salon, il faut créer un VirtualHost, comme indiqué dans la documentation Prosody.

Conversejs en fullscreen standalone

Il vous faut juste une page index.html dans laquelle insérer les CDN entre les balises head :

<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/3.3.4/css/inverse.min.css">
<script src="https://cdn.conversejs.org/3.3.4/dist/converse.min.js"></script>

Quelques adaptations CSS au besoin :

<style>
  #close-chatbox-button{display:none;}
  #controlbox.chatbox{display:none!important}
  #controlbox.chatbox.logged-out:last-child{display:block!important}
  .chatbox.chatroom,.flyout{width:100%!important;margin:0;border:none!important}
  .chat-head-chatroom{padding:0.3ex 1ex!important;}
</style>

Puis on insère ce bout de javascipt juste avant la fermeture de la balyse BODY :

<script>
	converse.initialize({
	"allow_muc_invitations" : false,
	"authentication":"anonymous",
	"auto_login" : true,
	"jid" : "anonymous.duniter.org",
	"auto_away": 300,
	"auto_join_on_invite" : true,
	"auto_reconnect": true,
	"auto_join_rooms" : [
	  "cesium@muc.duniter.org"
	],
	"blacklisted_plugins" : [
	  "converse-mam",
	  "converse-otr",
	  "converse-register",
	  "converse-vcard"
	],
	"bosh_service_url":"https://monsite.tld/http-bind/",
	"allow_registration":false,
	"show_send_button" : false,
	"view_mode": 'fullscreen'});
</script>
Conversejs dans Cesium

Dans votre instance Cesium, modifiez le fichier index.html à la racine du projet pour y ajouter les CDN entre les balises head :

<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/3.3.4/css/converse.min.css">
<script src="https://cdn.conversejs.org/3.3.4/dist/converse.min.js"></script>

Quelques adaptations CSS au besoin :

<style>
  #controlbox.chatbox,.chatroom-features{display:none!important}
</style>

Puis on insère ce bout de javascipt juste avant la fermeture de la balyse BODY :

<script>
converse.initialize({
  "allow_muc_invitations" : false,
  "authentication":"anonymous",
  "auto_login" : true,
  "jid" : "anon.duniter.org",
  "auto_away": 300,
  "auto_join_on_invite" : true,
  "auto_reconnect": true,
  "auto_join_rooms" : [
    "cesium@muc.duniter.org"
  ],
  "blacklisted_plugins" : [
    "converse-mam",
    "converse-otr",
    "converse-register",
    "converse-vcard"
  ],
  "bosh_service_url":"https://moncesium.tld/http-bind/",
  "allow_registration":false,
  "show_send_button" : false
});
</script>
4 J'aimes

L’idée me semble vraiment intéressante!

Le top serait d’intégrer en iframe un bout de discourse directement à cesium, de manière à ce que la communauté elle même s’entre aide, sans disperser les canaux de diffusion et déborder des modérateurs d’un xmpp.

Cela nécessiterai un SSO entre discourse et cesium/gchange, et là c’est pas gagné.
Pour être sécurisé il faudrait que Cesium fasse SSO provider…

Mais dans une moindre mesure sinon c’est vraiment pas mal converjs, ça s’intègre bien et semble bien fonctionner. Je suis pour lancer un xmpp cesium@muc.duniter.org oui! :slight_smile:

2 J'aimes

Salon créé !

3 J'aimes

Je viens juste mettre un petit bémol à l’enthousiasme général, mais il me semble que le but d’avoir des instances personnelles de Cesium est la décentralisation.

Si elles sont livrées avec un client qui centralise les conversations instantanées sur un seul serveur, ne retombons nous pas dans la centralisation ?

Ou alors, il faut pouvoir paramétrer dans chaque instance sur quel salon le client XMPP doit pointer, comme on choisi sur quel nœud notre Cesium doit pointer.

Qu’en pensez-vous ?

2 J'aimes

Je suis tout à fait d’accord. Et il est tout à fait possible de choisir le salon sur lequel on veut se connecter. De plus, cette fonctionnalité n’est pas intégrée dans Cesium. C’est un ajout personnel que chacun est libre de faire ou non.

Mais l’idée de centraliser un peu est d’avoir du monde dans le chat. J’ai mon propre salon mais il est vide…Alors personne ne s’en servira…Par contre, si qqes uns, comme moi, mettes le salon ds leur favori pidgin par exemple et bien y’aura tjrs du monde pr répondre aux questions des débutants ds CesiuM. L’idée c’est ça ^^

2 J'aimes