Développer un adaptateur
Une fois familiarisé avec le concept d'adaptateur, vous aurez probablement la volonté de développer les vôtres. Cette page fait donc office de "tutoriel" rapide afin que vous puissiez maîtriser les blocs principaux constituant la réalisation d'un adaptateur capable de transmettre à notre système les événements émis par une plateforme en particulier.
Pour savoir comment héberger votre adaptateur, rendez-vous sur la page dédiée.
Squelette
Le squelette de base d'un adaptateur Multistream Tools est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="robots" content="noindex,nofollow"/>
<title>Custom adapter example</title>
</head>
<body>
<script type="module">
import {} from 'https://obs.multistream.tools/v1/adapters.js';
// Your own JavaScript code goes here.
</script>
</body>
</html>
La ligne <meta name="robots" content="noindex,nofollow"/> empêche l'indexation de votre adaptateur par les différents moteurs de recherche.
Les adaptateurs Multistream Tools ne sont pas affichés à l'écran, il est donc déconseillé d'importer et/ou écrire du code CSS ainsi que de manipuler le DOM lorsque ce n'est pas strictement nécessaire à leur fonctionnement.
Vous pouvez lier autant de fichiers/bibliothèques JS externes que vous le souhaitez, gardez simplement en tête que plus vous en aurez et plus le chargement de votre adaptateur pourra être lent. C'est pourquoi ce squelette intègre directement votre code JavaScript, évitant ainsi des requêtes HTTP inutiles.
Nous vous recommandons fortement de mettre en place sur votre page les mesures habituelles de sécurité telles que la Content Security Policy, surtout lorsque vous exécutez du code tiers.
Dans certains cas, vous n'aurez d'ailleurs pas besoin de code HTML car vous déciderez peut-être d'intégrer votre adaptateur dans des services proposant directement d'éditer du code JavaScript. StreamElements en est un bon exemple car la fonctionnalité de widget personnalisé proposée simplifie justement la mise en place d'un adaptateur pour lequel un simple code JavaScript pourra suffire ; c'est d'ailleurs ce sur quoi nous basons nos adapateurs pré-configurés.
Faites cependant attention à bien charger notre fichier adapters.js en tant que module JavaScript sans quoi rien ne pourra fonctionner.
Plateforme
Un adaptateur étant forcément lié à une plateforme, nous pouvons ici soit en utiliser une pré-configurée soit en développer une nouvelle ; partons sur la seconde option :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="robots" content="noindex,nofollow"/>
<title>Custom adapter example</title>
</head>
<body>
<script type="module">
import { Platform } from 'https://obs.multistream.tools/v1/adapters.js';
const customPlatform = 'customPlatform';
const customAlert = 'customAlert';
class CustomPlatform extends Platform {
constructor(...args) {
super(customPlatform, [customAlert], ...args);
}
}
</script>
</body>
</html>
S'il est possible d'instancier directement la classe Platform, il est néanmoins conseillé de définir une sous-classe de celle-ci pour plus de souplesse et de réutilisabilité si, comme nous, vous souhaitez partager votre implémentation à d'autres développeurs par la suite.
Logique d'intégration
Nous pouvons maintenant définir un adaptateur pour notre plateforme personnalisée :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="robots" content="noindex,nofollow"/>
<title>Custom adapter example</title>
</head>
<body>
<script type="module">
import { Platform, Adapter } from 'https://obs.multistream.tools/v1/adapters.js';
const customPlatform = 'customPlatform';
const customAlert = 'customAlert';
class CustomPlatform extends Platform {
constructor(...args) {
super(customPlatform, [customAlert], ...args);
}
}
class CustomPlatformAdapter extends Adapter {
constructor(...args) {
super(CustomPlatform, ...args);
}
}
new CustomPlatformAdapter();
</script>
</body>
</html>
S'il est possible d'instancier directement la classe Adapter, il est néanmoins conseillé de définir une sous-classe de celle-ci pour plus de souplesse et de réutilisabilité si, comme nous, vous souhaitez partager votre implémentation à d'autres développeurs par la suite.
Cet adaptateur, bien qu'instancié, ne transmet pour le moment aucun événement à notre système car cette logique n'a pas encore été implémentée. Imaginons que notre plateforme personnalisée soit un réseau social connu fournissant par exemple une API WebSocket permettant la réception de données en temps réel ; on pourra alors écrire le code suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="robots" content="noindex,nofollow"/>
<title>Custom adapter example</title>
</head>
<body>
<script type="module">
import { Platform, Adapter } from 'https://obs.multistream.tools/v1/adapters.js';
const customPlatform = 'customPlatform';
const customAlert = 'customAlert';
class CustomPlatform extends Platform {
constructor(...args) {
super(customPlatform, [customAlert], ...args);
}
}
class CustomPlatformAdapter extends Adapter {
constructor(...args) {
super(CustomPlatform, ...args);
const socket = new WebSocket('<apiURL>');
socket.onmessage = event => {
const { type, data } = JSON.parse(event.data);
switch (type) {
case 'loadEvent':
this.load(data);
break;
case 'sessionUpdateEvent':
this.session(data);
break;
case 'alertEvent':
this.alerts(customAlert, data);
break;
case 'chatMessageEvent':
this.message(data);
break;
case 'chatMessageDeletionEvent':
this['delete-message'](data);
break;
case 'chatMessagesDeletionEvent':
this['delete-messages'](data);
break;
default:
this.other(type, data);
}
};
}
}
new CustomPlatformAdapter();
</script>
</body>
</html>
Le code ci-dessus n'est évidemment pas fonctionnel en l'état, il s'agit simplement d'un exemple de logique d'intégration basée sur une API WebSocket fictive. Twitch utilise d'ailleurs cette technologie pour envoyer, entre autres, différents événements.
Il existe bien des façons différentes d'implémenter le support de plateformes variées, dépendantes de la manière dont celles-ci fonctionnent ; il nous est donc impossible de toutes les détailler sur cette page. Ceci étant, il s'agira toujours de rediriger les données reçues vers les méthodes correspondantes présentes sur la classe Adapter.
Vous voyez, c'est très simple en terme de code ; à vous maintenant de développer votres propres adaptateurs si ceux que nous fournissons ne suffisent pas !