Develop an adapter
Once you become familiar with the concept of adapter, you will probably want to develop your own. This page therefore serves as a quick "tutorial" so that you can master the main blocks constituting the creation of an adapter capable of transmitting to our system the events emitted by a given platform.
To find out how to host your adapter, go to the dedicated page.
Skeleton
The basic skeleton of a Multistream Tools adapter is as follows:
<!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>
The <meta name="robots" content="noindex,nofollow"/> line prevents the indexing of your adapter by the various search engines.
Multistream Tools adapters are not displayed on screen, so it is not recommended to import and/or write CSS code as well as to manipulate the DOM when it is not strictly necessary for their operation.
You can link as many external JS files/libraries as you want, just keep in mind that the more you have, the slower your adapter may load. This is why this skeleton directly integrates your JavaScript code, thus avoiding unnecessary HTTP requests.
We strongly recommend that you implement the usual security measures on your page such as the Content Security Policy, especially when running third-party code.
In some cases, you will not even need any HTML code because you may decide to integrate your adapter into services that directly offer to edit JavaScript code. StreamElements is a good example of this because the custom widget functionality they offer simplifies the implementation of an adapter for which a simple JavaScript code could be sufficient; this is what we base our pre-configured adapters on.
That said, be careful to always load our adapters.js file as a JavaScript module otherwise nothing will function.
Platform
An adapter is necessarily linked to a platform, here we can either use a pre-configured one or develop a new one; let's go with the second 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>
Although it is possible to instantiate the Platform class directly, it is nevertheless advisable to define a subclass of it for greater flexibility and reusability if, like us, you wish to share your implementation with other developers.
Integration logic
We can now define an adapter for our custom platform:
<!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>
Although it is possible to instantiate the Adapter class directly, it is nevertheless advisable to define a subclass of it for greater flexibility and reusability if, like us, you wish to share your implementation with other developers.
This adapter, although instantiated, does not currently transmit any events to our system because this logic has not yet been implemented. Let's imagine that our custom platform is a well known social network providing for example a WebSocket API allowing reception of data in time real ; we can then write the following code:
<!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>
The above code obviously is not functional as is, it is simply an example of integration logic based on a fictional WebSocket API. Twitch also uses this technology to send, among other things, different events.
There are many different ways to implement support for various platforms, depending on how they work; it is therefore impossible for us to detail them all on this page. This being said, it will always be a matter of redirecting the data received to the corresponding methods present on the Adapter class.
You see, it's very simple in terms of code; it's now up to you to develop your own adapters if the ones we provide are not enough!