JavaScript quick start

After following this guide you will have published an event to your web app using Channels. If you have any questions get in touch.

Get your free API keys

Create an account, then create a Channels app. Go to the “Keys” page for that app, and make a note of your app_id, key, secret and cluster.

Include the Channels Client library

Include the pusher-js script tag on your page.

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

Open a connection to Channels

Open a connection to Channels using the key and cluster you noted down earlier.

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

You will soon publish an event to a channel called my-channel, and your web app will receive this event. But to receive this event, your web app first needs to subscribe to the my-channel channel. Do this with pusher.subscribe:

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

Listen for events on your channel

Every published event has an “event name”. The event you will publish will have the event name my-event. For your web app to do something when it receives an event called my-event, your web app must first “bind” a function to this event name. Do this using the channel’s bind method:

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 Channels 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"));

$ pusher channels apps trigger --app-id APP_ID --channel "my-channel" --event "my-event" --message "hello world"

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?

If you published an event and it triggered your alert(...) call, well done! If you had any trouble, get in touch. Otherwise, you could look at the more advanced features of the JavaScript client library.

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.