JavaScript Quickstart

You’ll have a working realtime client in under five minutes. Mawjly speaks the Pusher Channels protocol, so the official pusher-js library works without modification.

1. Install

npm install pusher-js
# or
pnpm add pusher-js
# or
yarn add pusher-js

2. Get your credentials

From the Mawjly dashboard:

Open Apps → New app, give it a name.
Copy the App ID, Key, and Cluster. Stash the Secret somewhere safe — you’ll only need it on the server.

import Pusher from 'pusher-js';
 
const pusher = new Pusher('YOUR_APP_KEY', {
  wsHost: 'ws-sa.mawjly.com',
  wsPort: 443,
  wssPort: 443,
  forceTLS: true,
  cluster: 'sa',
  enabledTransports: ['ws', 'wss'],
});
 
const channel = pusher.subscribe('chat');
 
channel.bind('message', (data) => {
  console.log('Received:', data);
});

That’s it. The page is now listening for message events on the chat channel.

4. Trigger an event from your server

You need your secret for this — it’s why this code lives on the server, never in the browser bundle.

# From any backend (Node example below).
npm install pusher

import Pusher from 'pusher';
 
const pusher = new Pusher({
  appId: 'YOUR_APP_ID',
  key: 'YOUR_APP_KEY',
  secret: 'YOUR_APP_SECRET',
  cluster: 'sa',
  host: 'ws-sa.mawjly.com',
  port: '443',
  useTLS: true,
});
 
await pusher.trigger('chat', 'message', {
  text: 'Hello from the server!',
});

5. See it work

Open the browser tab — Received: { text: 'Hello from the server!' } shows in the console.

You can also fire events from the dashboard:

Open your app → click Publish event in the header.
Or open the Debug tab → click Test event.
Either way, the event hits subscribed clients in ~50ms within the SA region.

Next steps

Private channels — only authenticated users can subscribe.
Presence channels — track who’s online.
Encrypted channels — end-to-end encryption with a master key.
Channel auth endpoint — implement the auth callback your backend needs to expose for private- and presence- channels.

Overview React