This add-on is operated by Pusher

Easily build scalable in-app notifications, chat, realtime graphs, and more.

Pusher

Last updated 15 May 2018

Pusher lets you push events to browsers over a WebSocket via a simple API call. To install Pusher as an addon to Heroku, simply follow the steps below. You can also sign up to the service directly.

Lets say you want to “pusherise” an existing Rails 3 app. We’ll assume you’ve already created your app on Heroku.

Install Pusher Gem

Start by installing the pusher gem, or adding it to your Gemfile.

$ gem install pusher

Install addon

$ heroku addons:create pusher:sandbox

Configure for local use

Get your ’development’ Pusher credentials for your local app:

Configure your app for development mode only. In Rails, this would go in config/environments/development.rb:

require 'pusher'

Pusher.app_id = 'YOUR_PUSHER_APP_ID'
Pusher.key = 'YOUR_PUSHER_KEY'
Pusher.secret = 'YOUR_PUSHER_SECRET'

Production credentials

Pusher will automatically be configured to use your ’heroku’ application when you deploy it as long as the gem is in your Gemfile:

gem 'pusher'

Verifying your set up

Set up a view

In one of your templates, you will now need to configure a Pusher connection for your javascript. The following subscribes to a channel called ‘test_channel’ and listens for the 'greet’ event:

<script src="//js.pusher.com/2.2/pusher.min.js"></script>
<script>
// If your Heroku application is within the EU region,
// uncomment the followling lines
// Pusher.host = 'ws-eu.pusher.com';
// Pusher.sockjs_host = 'sockjs-eu.pusher.com';

var pusher = new Pusher('<%= Pusher.key %>'); // uses your APP KEY
var channel = pusher.subscribe('test_channel');
channel.bind('greet', function(data) {
  alert(data.greeting);
});
</script>

Triggering events

In your Rails controllers, you now can trigger events that your connected clients will receive. This is relatively simple:

Pusher['test_channel'].trigger('greet', {
  :greeting => "Hello there!"
})

Now every time you push to Heroku your app will be automatically configured to use the “heroku” app created in your Pusher panel.

Going further

Hopefully this has given you a taste of the great stuff you can do with Pusher. We recommend having a look through our Pusher documentation to get an idea of what else is available.

In particular, the section on Debugging is particularly useful. Remember that you have access to your dashboard from within Heroku’s panel.