JavaScript quick start

Getting started with Pusher is very easy. However, if you have any questions get in touch. This guide uses the JavaScript client API and a selection of Server API libraries. We also have a guide for our iOS client.

Get your free API keys

Create an account, and make a note of your app_id, app_key, app_secret and app_cluster.

Include the Pusher Client library

Include the pusher-js script tag on your page.

<script src="https://js.pusher.com/4.1/pusher.min.js"></script>

Open a connection to Pusher

You first need to establish a connection to Pusher using the app_key and app_cluster you noted down earlier.

var pusher = new Pusher('APP_KEY', {
  cluster: 'APP_CLUSTER'
});

Subscribe to a channel

Now you should subscribe to your first channel.

var channel = pusher.subscribe('my-channel');

Listen for events on your channel

Now you can define callbacks that bind to events on a channel, coming in via the connection to Pusher:

channel.bind('my-event', function(data) {
  alert('An event was triggered with message: ' + data.message);
});

Trigger events from your server

In the examples below we trigger an event named my-event to Pusher on a channel called my-channel. For each example below a server library deals with the server communication.

# First, run `gem install pusher`

require 'pusher'

pusher_client = Pusher::Client.new(
  app_id: 'APP_ID',
  key: 'APP_KEY',
  secret: 'APP_SECRET',
  cluster: 'APP_CLUSTER'
)

class HelloWorldController < ApplicationController
  def hello_world
    pusher_client.trigger('my-channel', 'my-event', {:message => 'hello world'})
  end
end
# First, run `gem install pusher`

require 'pusher'

pusher_client = Pusher::Client.new(
  app_id: 'APP_ID',
  key: 'APP_KEY',
  secret: 'APP_SECRET',
  cluster: 'APP_CLUSTER'
)

pusher_client.trigger('my-channel', 'my-event', {:message => 'hello world'})
// First, run `composer require pusher/pusher-php-server`

require __DIR__ . '/vendor/autoload.php';

$pusher = new Pusher\Pusher("APP_KEY", "APP_SECRET", "APP_ID", array('cluster' => 'APP_CLUSTER'));

$pusher->trigger('my-channel', 'my-event', array('message' => 'hello world'));
// First, run `npm install pusher`

var Pusher = require('pusher');

var pusher = new Pusher({
  appId: 'APP_ID',
  key: 'APP_KEY',
  secret: 'APP_SECRET',
  cluster: 'APP_CLUSTER'
});

pusher.trigger('my-channel', 'my-event', {"message": "hello world"});
// First, run `Install-Package PusherServer`

using PusherServer;
using System.Web.Mvc;
using System.Net;
using Your.Config;

public class HelloWorldController : Controller {
  [httpPost]
  public async Task<ActionResult> HelloWorld() {
    var options = new PusherOptions();
    options.Cluster = 'APP_CLUSTER';

    var pusher = new Pusher('APP_ID', 'APP_KEY', 'APP_SECRET', options);
    var result = await pusher.TriggerAsync("my-channel", "my-event", new { message = "hello world" });
    return new HttpStatusCodeResult((int)HttpStatusCode.OK);
  }
}
# First, run `pip install pusher`

from pusher import Pusher

pusher = Pusher(
  app_id=u'APP_ID',
  key=u'APP_KEY',
  secret=u'APP_SECRET',
  cluster=u'APP_CLUSTER'
)

pusher.trigger(u'my-channel', u'my-event', {u'message': u'hello world'})
// First, run `go get github.com/pusher/pusher-http-go`

package main

import "github.com/pusher/pusher-http-go"

func main(){

  client := pusher.Client{
    AppId: "APP_ID",
    Key: "APP_KEY",
    Secret: "APP_SECRET",
    Cluster: "APP_CLUSTER",
  }

  data := map[string]string{"message": "hello world"}
  client.Trigger("my-channel", "my-event", data)
}
/*
  First, add this Maven dependency:

  <dependency>
    <groupId>com.pusher</groupId>
    <artifactId>pusher-http-java</artifactId>
    <version>1.0.0</version>
  </dependency>
 */

Pusher pusher = new Pusher("APP_ID", "APP_KEY", "APP_SECRET");
pusher.setCluster("APP_CLUSTER");

pusher.trigger("my-channel", "my-event", Collections.singletonMap("message", "Hello World"));

Note! If you created your app in a different cluster to the default us-east-1, you must configure the cluster option as well. See how.

If there isn’t an example in a language that you are familiar with then have a look on our server libraries page to see if anyone has created one in your language.

Where next?

Find out about all the cool stuff you can do with channels, Investigate the JavaScript client library or learn how to excluding event recipients when publishing events.

Have you tried using the search to find what you’re after? If you still have a question then get in touch with us and let us help you out.