← Back
Skubber

Getting started with Skubber

From API key to your first push message in 5 minutes

📑 Contents

1

Create an account

Register for free and you'll automatically get a Bronze subscription.

2

Generate an API key

In the dashboard you generate an API key + secret. Save the secret - it will never be shown again.

3

Load the SDK

Add two <script> tags to your HTML and you're ready to connect.

4

Connect & receive

client.connect('userId') opens a WebSocket. Pushes arrive as events.

🏽 Step 1 - Account & API key

+ Create free account

After registering, go to Dashboard → API Keys and click Create. You will see your API Key and API Secret exactly once.

Bronze plan: 1 API key, 10,000 messages/day, 150 concurrent connections. More than enough to get started and test.

📦 Step 2 - Load the SDK

Add the following two scripts to your HTML, before :

<!-- 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>

Or download the file and host it yourself:

⬇ Download skubber.js 📄 Full SDK documentation

🔌 Step 3 - Connect

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!');

The SDK automatically fetches a JWT token and renews it before it expires. You never have to handle tokens yourself.

📱 Step 4 - Receive pushes

// 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'));

📤 Step 5 - Subscribe to a channel

Channels are namespaced: use a prefix for your app, e.g. myapp/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'));

📤 Step 6 - Send a message via channel

Required: Your API key must have the push:send scope.
// 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
});

💻 Step 7 - Full browser example

<!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

From any server (Node.js, PHP, ColdFusion, .NET, ...) you send pushes via plain HTTP calls. The SignalR SDK is not required.

Push to a single user

// 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 to a 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'
    })
});
Want more details? See the full SDK documentation or the interactive API reference.