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.

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

Open a connection to Channels

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

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

Subscribe to a channel

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:

1
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:

1
2
3
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.

  • Rails
  • Ruby
  • PHP
  • Node.js
  • ASP.NET MVC
  • Python
  • Go
  • Java
  • Pusher CLI
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 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

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.