← Back

JavaScript SDK - Skubber

Real-time WebSocket client voor de Skubber Push Server

📑 Inhoud

Installatie
Quick Start
Constructor
connect / disconnect
Push events ontvangen
Channels
Channel events
Bericht sturen
REST helpers
PushType constanten
Verbindingsevents
Volledig voorbeeld

📦 Installatie

Via CDN (aanbevolen)

<!-- 1. SignalR client (vereiste 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>

Zelf hosten

⬇ Download skubber.js

Node.js / bundler

Kopieer skubber.js naar je project. Het bestand is een UMD-module — het werkt zowel als browser <script>-tag als via require() of import.

// CommonJS
const { Skubber } = require('./skubber.js');

// ESM
import { Skubber } from './skubber.js';

⚡ Quick Start

// 1. Initialiseer
const client = new Skubber({
    serverUrl: 'https://sps.skubber.com',
    apiKey:    'mps_JOUW_API_KEY',
    apiSecret: 'JOUW_API_SECRET'
});

// 2. Luister naar inkomende pushes
client.on('push', msg => {
    console.log(`${msg.title}: ${msg.message}`);
});

// 3. Verbind als gebruiker
await client.connect('user123');

// 4. Abonneer op een channel
const ch = client.subscribe('mijnapp/general');
ch.bind('message', msg => console.log('Channel bericht:', msg));

// 5. Stuur een bericht naar het channel
await ch.send({ type: Skubber.PushType.Chat, title: 'user123', message: 'Hoi!' });

⚙ Constructor

new Skubber( options )

Optie	Type	Vereist	Beschrijving
`serverUrl`	string	ja	URL van de push server, bijv. `https://sps.skubber.com`
`apiKey`	string	ja	Jouw `mps_` prefixed API key
`apiSecret`	string	ja	De bijbehorende API secret (sla veilig op)
`logging`	boolean	nee	Zet op `true` voor debug-output in de console (standaard: false)

🔌 connect / disconnect

connect( userId )

await client.connect( userId: string ): Promise<void>

Opent de WebSocket-verbinding. Haalt automatisch een JWT-token op via POST /api/auth/signalr-token en slaat dit 24 uur gecached op. Het token wordt automatisch vernieuwd 5 minuten vóór verlopen.

disconnect()

client.disconnect(): void

Sluit de verbinding en meldt de gebruiker af bij alle channels.

📱 Push events ontvangen

client.on( 'push', callback )

Ontvang een push die direct aan jouw userId is gestuurd.

client.on('push', msg => {
    // msg bevat:
    console.log(msg.id);       // UUID van de push
    console.log(msg.type);     // PushType (integer, zie tabel)
    console.log(msg.title);    // Titel
    console.log(msg.message);  // Berichttekst
    console.log(msg.sender);   // Afzender userId
    console.log(msg.channel);  // Channel (indien via channel)
    console.log(msg.timestamp);// ISO timestamp
    console.log(msg.payload);  // Vrij JSON-object met extra data
});

📤 Channels

subscribe( channelName )

client.subscribe( channelName: string ): Channel

Abonneer op een channel en geef een Channel-object terug. Als de verbinding er al is, wordt direct gejoind; anders wordt gewacht tot de verbinding klaar is.

unsubscribe( channelName )

client.unsubscribe( channelName: string ): void

Verlaat het channel en verwijdert alle event-bindings voor dat channel.

channel( channelName )

client.channel( channelName: string ): Channel | undefined

Geeft een eerder geabonneerd Channel-object terug, of undefined.

🔔 Channel events

const ch = client.subscribe('mijnapp/generaal');

// Inkomend bericht
ch.bind('message', msg => { /* zie msg-structuur hierboven */ });

// Aanwezigheid
ch.bind('user:list',   userIds => console.log('Online:', userIds));
ch.bind('user:joined', (userId, meta) => console.log(userId, 'is binnengekomen'));
ch.bind('user:left',   userId => console.log(userId, 'heeft verlaten'));

// Deelnemersaantal
ch.bind('count',          count => console.log('Totaal:', count));
ch.bind('counts:update',  data => console.log(data));

Bubble-up events op de client

Alle channel-events worden ook op de client zelf uitgestuurd met een channel:-prefix, zodat je op één plek naar meerdere channels kunt luisteren.

Channel event	Client event
`message`	`channel:message`
`user:joined`	`channel:user:joined`
`user:left`	`channel:user:left`
`user:list`	`channel:user:list`
`count`	`channel:count`
`counts:update`	`channel:counts:update`

// Luister naar berichten van ALLE channels tegelijk
client.on('channel:message', (channelName, msg) => {
    console.log(`[${channelName}] ${msg.title}: ${msg.message}`);
});

unbind()

ch.unbind(): void

Verwijdert alle event-bindings voor dit channel zonder het te verlaten.

✉ Bericht sturen via channel

await ch.send( message ): Promise<void>

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

await ch.send({
    type:    Skubber.PushType.Chat,  // optioneel, default = 0
    title:   'Gebruikersnaam',
    message: 'Tekst van het bericht',
    payload: { key: 'waarde' }      // optionele extra data
});

ready( callback )

ch.ready( callback: Function ): void

Voert callback uit zodra het channel actief verbonden is. Als het al verbonden is, wordt callback direct aangeroepen.

🌘 REST helpers — push.toUser / push.toChannel / push.toUsers

Stuur pushes via de REST API zonder zelf fetch te schrijven. Handig bij server-side code of scripts.

push.toUser

await client.push.toUser( userId, message ): Promise<void>

await client.push.toUser('user123', {
    type:    Skubber.PushType.Info,
    title:   'Melding',
    message: 'Jouw bestelling is bevestigd.',
    payload: { orderId: 9876 }
});

push.toChannel

await client.push.toChannel( channelName, message ): Promise<void>

await client.push.toChannel('mijnapp/alerts', {
    type:    Skubber.PushType.Warning,
    title:   'Onderhoud',
    message: 'Gepland onderhoud over 30 minuten.'
});

push.toUsers

await client.push.toUsers( userIds[], message ): Promise<void>

await client.push.toUsers(['alice', 'bob', 'charlie'], {
    type:    Skubber.PushType.System,
    title:   'Update beschikbaar',
    message: 'Herlaad de pagina voor de nieuwste versie.'
});

🅗 PushType constanten

Gebruik Skubber.PushType.* in je code — of stuur de integer direct in REST-calls.

Constante	Waarde	Gebruik
`Skubber.PushType.Default`	0	Standaard notificatie
`Skubber.PushType.Info`	1	Informatie
`Skubber.PushType.Warning`	2	Waarschuwing
`Skubber.PushType.Chat`	3	Chat-bericht
`Skubber.PushType.System`	4	Systeemmelding
`Skubber.PushType.Error`	5	Foutmelding
`Skubber.PushType.Success`	6	Succesmelding
`Skubber.PushType.Private`	7	Privébericht

🔸 Verbindingsevents (client.on)

Event	Callback parameters	Beschrijving
`connected`	—	Verbinding tot stand gebracht
`disconnected`	—	Verbinding verbroken
`reconnecting`	—	Automatisch opnieuw verbinden
`reconnected`	—	Herverbinding geslaagd
`error`	`error`	Verbindingsfout
`push`	`message`	Directe push naar userId
`user:online`	`userId`	Andere gebruiker is online gekomen
`user:offline`	`userId`	Andere gebruiker is offline gegaan
`force:logout`	—	Server dwingt uitloggen af
`disconnect:now`	—	Server vraagt onmiddellijk verbreken

💻 Volledig voorbeeld

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <title>Skubber voorbeeld</title>
  <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>
  <ul id="berichten"></ul>
  <input id="tekst" placeholder="Typ een bericht...">
  <button id="stuur">Sturen</button>

<script>
const CHANNEL  = 'mijnapp/chat';
const USER_ID  = 'alice';

const client = new Skubber({
    serverUrl: 'https://sps.skubber.com',
    apiKey:    'mps_JOUW_KEY',
    apiSecret: 'JOUW_SECRET',
    logging:   true
});

const berichtenLijst = document.getElementById('berichten');

function voegToe(tekst) {
    const item = document.createElement('li');
    item.textContent = tekst;
    berichtenLijst.appendChild(item);
}

// Directe push naar deze gebruiker
client.on('push', msg => voegToe(`[push] ${msg.title}: ${msg.message}`));

// Verbindingsstatus
client.on('connected',    () => voegToe('● Verbonden'));
client.on('disconnected', () => voegToe('○ Verbroken'));

// Verbind
await client.connect(USER_ID);

// Channel
const channel = client.subscribe(CHANNEL);

channel.bind('message',   msg    => voegToe(`[${msg.sender}] ${msg.message}`));
channel.bind('user:list', users  => voegToe(`Online: ${users.join(', ')}`));

// Stuurknop
document.getElementById('stuur').addEventListener('click', async () => {
    const tekst = document.getElementById('tekst').value.trim();
    if (!tekst) return;
    await channel.send({ type: Skubber.PushType.Chat, title: USER_ID, message: tekst });
    document.getElementById('tekst').value = '';
});
</script>
</body>
</html>

Nieuw bij Skubber? Bekijk de Starten met Skubber pagina voor een stapsgewijze handleiding, of ga direct naar het dashboard om een API key aan te maken.