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>