Getting started overview
Integrating Pusher into an application involves several key steps, primarily focused on account setup, credential management, and initial API interaction. Pusher provides real-time messaging capabilities through its Channels and Beams products, enabling features such as live updates, chat, and notifications Pusher Channels getting started overview. This guide outlines the process for establishing a connection and sending a basic message, focusing on the initial setup required to get a real-time feature operational.
The core workflow for a developer typically follows these stages:
- Account Creation: Registering for a Pusher account.
- Application Setup: Creating a new application within the Pusher dashboard to generate unique API credentials.
- SDK Integration: Incorporating a Pusher SDK into the client-side and server-side components of your application.
- First Event Trigger: Sending an initial message or event through the Pusher API.
- Client Subscription: Setting up the client application to listen for and receive these real-time events.
Pusher supports a wide range of programming languages and platforms through its official SDKs, including JavaScript, Python, PHP, Ruby, and Node.js Pusher documentation home page. The choice of SDK depends on the application's technology stack.
Create an account and get keys
Before making any API requests, developers must create a Pusher account and set up an application to obtain the necessary credentials. These credentials authenticate API calls and link them to your specific Pusher application.
Account Registration
- Navigate to the Pusher signup page.
- Complete the registration form by providing an email address and creating a password, or by using a single sign-on (SSO) option like Google or GitHub.
- Verify your email address if prompted.
Application Creation
After logging in, you will be directed to the Pusher dashboard where you can create a new application:
- From the dashboard, locate and click the "Create app" button.
- Provide a name for your application (e.g., "MyRealtimeApp").
- Select a cluster. Clusters are geographic regions where your application's servers are located. Choosing a cluster geographically close to your users can reduce latency Pusher cluster reference.
- Choose a client-side technology (e.g., "Vanilla JS", "React", "iOS") and a server-side technology (e.g., "Node.js", "PHP", "Ruby"). These selections primarily guide the initial code snippets provided by Pusher.
- Click "Create app".
Retrieving API Keys
Upon successful application creation, the dashboard will display your application's credentials. These are critical for all API interactions:
- App ID: A unique identifier for your Pusher application.
- Key: Your public API key, used by client-side SDKs.
- Secret: Your private API secret, used by server-side SDKs for authenticated requests. Keep this secret secure and never expose it in client-side code.
- Cluster: The region where your application is hosted (e.g.,
mt1for US East).
Make a note of these credentials, as they will be required in the next steps to configure your SDKs.
Your first request
To demonstrate a basic real-time interaction, this section outlines how to trigger an event from a server-side application and subscribe to it from a client-side application using Pusher Channels. We will use Node.js for the server and vanilla JavaScript for the client.
Server-Side (Node.js)
First, install the Pusher Node.js library:
npm install pusher
Next, create a simple script (e.g., server.js) to initialize Pusher with your credentials and trigger an event:
const Pusher = require('pusher');
const pusher = new Pusher({
appId: 'YOUR_APP_ID',
key: 'YOUR_APP_KEY',
secret: 'YOUR_APP_SECRET',
cluster: 'YOUR_APP_CLUSTER',
useTLS: true,
});
pusher.trigger('my-channel', 'my-event', {
message: 'hello world'
});
console.log('Event \'my-event\' triggered on \'my-channel\' with message: \'hello world\'.');
Replace YOUR_APP_ID, YOUR_APP_KEY, YOUR_APP_SECRET, and YOUR_APP_CLUSTER with your actual Pusher application credentials. Run this script from your terminal:
node server.js
This command sends a "hello world" message to a channel named my-channel with an event named my-event.
Client-Side (Vanilla JavaScript)
Create an HTML file (e.g., index.html) and include the Pusher JavaScript client library. This script will subscribe to the channel and log any received events.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pusher Client</title>
</head>
<body>
<h1>Pusher Real-time Demo</h1>
<p>Check your browser's console for real-time messages.</p>
<script src="https://js.pusher.com/8.0/pusher.min.js"></script>
<script type="text/javascript">
// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;
var pusher = new Pusher('YOUR_APP_KEY', {
cluster: 'YOUR_APP_CLUSTER'
});
var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
alert(JSON.stringify(data));
console.log('Received event:', data);
});
console.log('Subscribed to \'my-channel\'. Waiting for \'my-event\'.');
</script>
</body>
</html>
Again, replace YOUR_APP_KEY and YOUR_APP_CLUSTER with your application's public key and cluster. Open this index.html file in a web browser. When you run the server.js script, you should see an alert and a console log in your browser indicating the receipt of the "hello world" message.
Common next steps
After successfully sending your first event, consider these common steps to further integrate Pusher into your application:
- Authentication: For private or presence channels, implement server-side authentication to control access to channels. This typically involves a server endpoint that validates user identity and authorizes subscription requests Pusher user authentication guide.
- Webhooks: Configure webhooks to receive notifications from Pusher when certain events occur, such as channel occupation/vacation or client events. This can be useful for server-side logging or triggering other actions Pusher webhooks overview.
- Error Handling: Implement robust error handling in both your client and server applications to manage connection issues, authentication failures, and other potential problems.
- Scalability: As your application grows, understand Pusher's scaling capabilities and how to optimize your channel and event design for performance.
- Explore Pusher Beams: If your application requires push notifications to mobile devices or web browsers, explore Pusher Beams for push notifications. This separate product handles device token management and notification delivery.
- Security Best Practices: Review general API security best practices, such as protecting your API secret and using TLS/SSL for all communications Mozilla Web Security documentation.
Troubleshooting the first call
If your first Pusher call does not work as expected, consider the following troubleshooting steps:
| Step | What to do | Where to check |
|---|---|---|
| Verify Credentials | Double-check that your App ID, Key, Secret, and Cluster are copied exactly from your Pusher dashboard. Typos are common. | Pusher Dashboard > Your App > App Keys section |
| Check Cluster Match | Ensure the cluster specified in both your server-side and client-side code matches the cluster chosen for your Pusher application. |
Pusher Dashboard > Your App > App Keys section, and your code files |
| Console/Network Logs | Look for error messages in your server's console (e.g., Node.js terminal) and your browser's developer console (F12 > Console/Network tabs). Network tab can show WebSocket connection status. | Server terminal, Browser Developer Tools |
| Firewall/Proxy Issues | If you are on a restricted network, ensure that WebSocket connections to ws.pusherapp.com (or your specific cluster endpoint) are not blocked. |
Network configuration, IT department |
| Pusher Debug Console | Use the "Debug Console" in your Pusher dashboard. This real-time log shows all events triggered and received by your application, which can help pinpoint if events are being sent but not received, or vice versa. | Pusher Dashboard > Your App > Debug Console |
| SDK Version Compatibility | Ensure you are using a compatible and up-to-date version of the Pusher SDKs. Consult the Pusher Channels Library Reference for version specifics. | Pusher documentation, package.json (Node.js) or similar dependency file |