JavaScript Quick Start Guide

Getting started with Pusher is very easy. If you have any questions though, get in touch.

This quick start covers using the JavaScript client API and also shows how to trigger an event from one of our Server API libraries.

Signup to Pusher for a free account, and make a note of your application key (app_key).

Include the Pusher JavaScript library

Include the pusher-js script tag on your page.

<script src="http://js.pusher.com/2.0/pusher.min.js"></script>

Open a connection to Pusher

You first need to establish a connection to Pusher. This is done by using your application key (app_key).

var pusher = new Pusher('abc243231a132b21c321'); // Replace with your app key

Now you should subscribe to your first channel.

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

*Note: more info on choosing channel names is available here.

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. 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.

require 'pusher'

Pusher.app_id = 'APP_ID'
Pusher.key = 'API_KEY'
Pusher.secret = 'SECRET_KEY'    

class HelloWorldController < ApplicationController
  def hello_world
    Pusher['my-channel'].trigger('my-event', {:message => 'hello world'})
  end
end

require 'pusher'

Pusher.app_id = 'APP_ID'
Pusher.key = 'API_KEY'
Pusher.secret = 'SECRET_KEY'

Pusher['my-channel'].trigger('my-event', {:message => 'hello world'})

require('Pusher.php');

$pusher = new Pusher($key, $secret, $app_id);
$pusher->trigger('my-channel', 'my-event', array('message' => 'hello world') );

var Pusher = require('pusher');

var pusher = new Pusher({
  appId: 'YOUR_PUSHER_APP_ID',
  key: 'YOUR_PUSHER_APP_KEY',
  secret: 'YOUR_PUSHER_SECRET_KEY'
});

pusher.trigger('my-channel', 'my-event', {"message": "hello world"});

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

public class HelloWorldController : Controller {
  [HttpPost]
  public ActionResult HelloWorld() {
    var pusher = new Pusher(Config.AppId, Config.AppKey, Config.AppSecret);
    var result = pusher.Trigger('my-channel', 'my-event', new { message = "hello world" } );
    return new HttpStatusCodeResult((int)HttpStatusCode.OK);
  }
}

import pusher

p = pusher.Pusher(app_id='APP_ID', key='APP_KEY', secret='APP_SECRET')
p['my-channel'].trigger('my-event',{'message': 'hello world'})

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.

Documentation