← Terug

Starten met Skubber

Van API key tot eerste push-bericht in 5 minuten

📑 Inhoud

1. Account & API key
2. SDK laden
3. Verbinding maken
4. Push ontvangen
5. Channel gebruiken
6. Push versturen
7. Volledig voorbeeld
Server-side (REST)

Maak een account aan

Registreer gratis en je krijgt automatisch een Bronze subscription.

Genereer een API key

In het dashboard genereer je een API key + secret. Sla de secret op - die wordt nooit opnieuw getoond.

Laad de SDK

Voeg twee <script> tags toe aan je HTML en je bent klaar om te verbinden.

Verbind & ontvang

client.connect('userId') opent een WebSocket. Pushes komen binnen als events.

🏽 Stap 1 - Account & API key

+ Gratis account aanmaken

Na registratie ga je naar Dashboard → API Keys en klik je op Aanmaken. Je krijgt eenmalig jouw API Key en API Secret te zien.

Bronze abonnement: 1 API key, 10.000 berichten/dag, 150 gelijktijdige verbindingen. Meer dan genoeg om te starten en te testen.

📦 Stap 2 - SDK laden

Voeg de volgende twee scripts toe aan je HTML, voor :

<!-- 1. SignalR client (required dependency) -->
<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@latest/dist/browser/signalr.min.js"></script>

<!-- 2. Skubber JS SDK -->
<script src="https://sps.skubber.com/skubber.js"></script>

Of download het bestand en host het zelf:

⬇ Download skubber.js 📄 Volledige SDK documentatie

🔌 Stap 3 - Verbinding maken

const client = new Skubber({
    serverUrl: 'https://sps.skubber.com',
    apiKey:    'mps_YOUR_API_KEY',
    apiSecret: 'YOUR_API_SECRET'
});

// Connect with a userId — e.g., the logged-in user in your app
await client.connect('user123');
console.log('Connected!');

De SDK haalt automatisch een JWT-token op en vernieuwt dit voor het verloopt. Je hoeft nooit zelf met tokens te werken.

📱 Stap 4 - Push ontvangen

// Direct push to this user
client.on('push', msg => {
    console.log(`[${msg.type}] ${msg.title}: ${msg.message}`);
    console.log('Extra data:', msg.payload);
});

// Track connection status
client.on('connected',    () => console.log('Online'));
client.on('disconnected', () => console.log('Offline'));
client.on('reconnected',  () => console.log('Reconnected'));

📤 Stap 5 - Channel subscriben

Channels zijn namespaced: gebruik een prefix voor jouw app, bijv. mijnapp/general.

const ch = client.subscribe('myapp/general');

// Receive messages on this channel
ch.bind('message', msg => {
    console.log(`[${msg.sender}] ${msg.title}: ${msg.message}`);
});

// Presence: who's online in this channel?
ch.bind('user:list',   users => console.log('Online:', users));
ch.bind('user:joined', (uid, meta) => console.log(uid, 'has joined'));
ch.bind('user:left',   uid => console.log(uid, 'has left the channel'));

📤 Stap 6 - Bericht sturen via channel

Vereist: Je API key moet de scope push:send hebben.

// Send a chat message to the channel
await ch.send({
    type:    Skubber.PushType.Chat,
    title:   'user123',         // username as title
    message: 'Hello everyone!',
    payload: { avatarUrl: '...' } // optional extra data
});

💻 Stap 7 - Volledig browser-voorbeeld

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@latest/dist/browser/signalr.min.js"></script>
  <script src="https://sps.skubber.com/skubber.js"></script>
</head>
<body>
<script>
const client = new Skubber({
    serverUrl: 'https://sps.skubber.com',
    apiKey:    'mps_YOUR_KEY',
    apiSecret: 'YOUR_SECRET'
});

client.on('push', msg => {
    document.body.innerHTML += `<p>${msg.title}: ${msg.message}</p>`;
});

const ch = client.subscribe('myapp/chat');
ch.bind('message', msg => {
    document.body.innerHTML += `<p><b>${msg.sender}:</b> ${msg.message}</p>`;
});

await client.connect('alice');
await ch.send({ type: Skubber.PushType.Chat, title: 'alice', message: 'Hello!' });
</script>
</body>
</html>

🛠 Server-side push via REST

Vanuit een server (Node.js, PHP, ColdFusion, .NET, ...) stuur je pushes via gewone HTTP-calls. Je hebt de SignalR SDK dan niet nodig.

Push naar één gebruiker

// Node.js example
await fetch('https://sps.skubber.com/push/user', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-Api-Key':    'mps_YOUR_KEY',
        'X-Api-Secret': 'YOUR_SECRET'
    },
    body: JSON.stringify({
        userId:  'user123',
        title:   'Order shipped',
        message: 'Your order #1234 is on its way.',
        payload: { orderId: 1234 }
    })
});

Push naar een channel

await fetch('https://sps.skubber.com/push/channel', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-Api-Key':    'mps_YOUR_KEY',
        'X-Api-Secret': 'YOUR_SECRET'
    },
    body: JSON.stringify({
        channel: 'myapp/alerts',
        type:    2,  // Warning
        title:   'Maintenance planned',
        message: 'Maintenance scheduled for 02:00 UTC'
    })
});

Meer details? Bekijk de volledige SDK documentatie of de interactieve API referentie.