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 REST API libraries.

  1. Sign up

    Signup to Pusher, and make a note of your API key

  2. Include the JS files

    Include the Pusher JavaScript script tag on your page.

    <script src="http://js.pusher.com/1.11/pusher.min.js"></script>
  3. Open a connection to Pusher

    You first need to establish a connection to Pusher, and subscribe to your first channel. This is done by using your API key.

    var pusher = new Pusher('abc243231a132b21c321'); // Replace with your app key var thingChannel = pusher.subscribe('thing-channel');

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

  4. Listen for events on your channel

    Now you can define callbacks that bind to events coming in via the Pusher socket:

    thingChannel.bind('thing_create', function(thing) { alert('A thing was created: ' + thing.name); });
  5. Trigger events from your server

    In the examples below we post an event to Pusher when a user creates a “Thing”. 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.

    # http://rubygems.org/gems/pusher require 'pusher' Pusher.app_id = 'APP_ID' Pusher.key = 'API_KEY' Pusher.secret = 'SECRET_KEY' class ThingsController < ApplicationController def create @thing = Thing.new(params[:thing]) if @thing.save Pusher['thing-channel'].trigger('thing_create', @thing.attributes) end end end # http://rubygems.org/gems/pusher require 'pusher' Pusher.app_id = 'APP_ID' Pusher.key = 'API_KEY' Pusher.secret = 'SECRET_KEY' Pusher['thing-channel'].trigger('thing_create', @thing.attributes) // https://github.com/squeeks/Pusher-PHP require('Pusher.php'); $thing = create($_POST['thing']); if($thing) { $pusher = new Pusher($key, $secret, $app_id); $pusher->trigger('thing-channel', 'thing_create', get_object_vars($thing) ); } using System.Web.Mvc; using System.Configuration; using System.Net; using PusherRESTDotNet; public class ThingController : Controller { [HttpPost] public ActionResult CreateThing(string thingName) { string applicationKey = ConfigurationManager.AppSettings["application_key"]; string applicaitonSecret = ConfigurationManager.AppSettings["application_secret"]; string applicationId = ConfigurationManager.AppSettings["application_id"]; IPusherProvider provider = new PusherProvider(applicationId, applicationKey, applicationSecret); var thing = Create(thingName); ObjectPusherRequest request = new ObjectPusherRequest('thing-channel', 'thing_create', thing); provider.Trigger(request); return new HttpStatusCodeResult((int)HttpStatusCode.OK);; } }

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.