Client library
Realtime JavaScript with WebSockets Browsers, React, Vue and React Native with the official pusher-js library.
Sign in to see these snippets with your own cluster host. Sign in
Using an AI coding agent? Copy the agent prompt ↓
Install Subscribe to a channel import Pusher from 'pusher-js' ;
const pusher = new Pusher ('YOUR_APP_KEY' , {
cluster : 'ap' ,
wsHost : 'ws.hibira.io' ,
wsPort : 443 ,
wssPort : 443 ,
forceTLS : true ,
enabledTransports : ['ws' , 'wss' ],
channelAuthorization : { endpoint : '/broadcasting/auth' , transport : 'ajax' },
});
const channel = pusher.subscribe ('orders' );
channel.bind ('order-shipped' , (data ) => {
console .log ('Order shipped' , data);
});Agent prompt Paste this into Claude Code, Cursor, GitHub Copilot or another AI coding agent, and it will wire Hibira into your JavaScript project with the settings above.
Integrate Hibira realtime messaging into this JavaScript project. Hibira is a hosted WebSocket service that speaks the Pusher Channels protocol, so it works with the standard Pusher libraries (here: pusher-js, https://github.com/pusher/pusher-js) pointed at Hibira instead of pusher.com.
Connection details:
- Host: ws.hibira.io
- Port: 443
- TLS: yes (https)
- App key: YOUR_APP_KEY
- No app secret: it belongs on the server, never in this app
What to do:
1. Look at the project first (framework version, package manager, config and env conventions, where similar integrations live) and follow what it already does.
2. Create one shared Pusher client module (for example src/lib/realtime.ts) configured like the reference below, and import it wherever the app needs live updates.
3. Read the app key and host from the build tool's public env variables (VITE_, NEXT_PUBLIC_, EXPO_PUBLIC_ or whatever the project already uses).
4. Unbind handlers and unsubscribe when a component unmounts (React useEffect cleanup, Vue onUnmounted, Svelte onDestroy) so connections and listeners don't pile up.
5. If the app uses private or presence channels, point channelAuthorization at the backend route that signs subscriptions; that route uses the app secret and lives on the server only.
6. Read the credentials and host from environment variables or the project's config, and add placeholder entries to .env.example (or its equivalent). Never commit real values.
7. Always pass the host, port and TLS setting above. The library defaults to pusher.com; where it requires a cluster, use "ap" (the host decides where it connects).
8. If YOUR_APP_KEY above is still a placeholder, keep it as an env placeholder and tell me where to fill it in rather than inventing a value.
9. When you are done, list the files you changed and tell me how to check it works, for example by publishing a test event and watching it arrive.
Reference setup from the Hibira JavaScript guide (adapt it to the project's structure):
Install:
```shell
npm install pusher-js
```
Subscribe to a channel:
```js
import Pusher from 'pusher-js';
const pusher = new Pusher('YOUR_APP_KEY', {
cluster: 'ap',
wsHost: 'ws.hibira.io',
wsPort: 443,
wssPort: 443,
forceTLS: true,
enabledTransports: ['ws', 'wss'],
// Private and presence channels
channelAuthorization: { endpoint: '/broadcasting/auth', transport: 'ajax' },
});
const channel = pusher.subscribe('orders');
channel.bind('order-shipped', (data) => {
console.log('Order shipped', data);
});
```
Replace YOUR_APP_KEY and the other placeholders with the values from your dashboard, or let the agent leave them as environment variables for you to fill in.
Or connect the Hibira MCP server, and your agent can create the app and fill in its credentials itself. Connect your AI coding agent →
Use the app key and secret from your dashboard. Channels, events and authorization endpoints work exactly as they do with Pusher. Library reference ↗
