Question

I followed a few tutorials (all looking very similar) on using Pusher for realtime messaging to my Rails app.

What I am trying:

// Javascript on my clientside receiving html page
$(function(){
  var pusher = new Pusher('xxxx-mykey-xxxx');
  var myChannel = pusher.subscribe('survey-channel');

  myChannel.bind('data-changed', function(data){ 
           alert(data);
      });
  // Some useful debug msgs
  pusher.connection.bind('connecting', function() {
      alert('Connecting to Pusher...');
    });
    pusher.connection.bind('connected', function() {
      alert('Connected to Pusher!');
    });
    pusher.connection.bind('failed', function() {
      alert('Connection to Pusher failed :(');
    });
    myChannel.bind('subscription_error', function(status) {
      alert('Pusher subscription_error');
    });
});

And I call this inside a controller method in my Rails app:

Pusher['survey-channel'].trigger('data-changed', "Busy creating new Call") 
render :text => "Pusher sent"

Nothing happens when the method gets called, except that it renders “Pusher sent”.

In my chrome developer tools’ console, I get the following:

(x) Uncaught TypeError: Cannot call method 'bind' of undefined calls:31
(3) WebSocket is closed before the connection is established. :3000:1

What could I be missing? Please help!

---

Edit #1

I added this piece of code to the client:

Pusher.log = function(message) {
  if (window.console && window.console.log) window.console.log(message);
};

and it logged the following to the console:

Pusher : Connecting : ws://ws.pusherapp.com:80/app/e5d0f1ae2cab03dc3aa9?client=js&version=1.8.6 calls:44    
Pusher : Event recd (event,data) : pusher:connection_established : {"socket_id":"14299.674628"} calls:44    
Pusher : Event sent (channel,event,data) :  : pusher:subscribe : {"channel":"survey-channel"} calls:44

---

Edit #2

Whenever I send “messages” it does not even appear in die Pusher Debug Console even if I send it with the Event Creator. But what’s really strange is that on the Stats page it indicates the Message Rate and Connections to be greater than zero, e.g. 2 connections etc.

---

Edit #3

I have tested Pusher’s testing page. (http://test.pusher.com/1.12)
It connects perfectly, but the “Say Hello” feature does nothing. This brings me to think that it might be my browser setup.

I am currently running the latest version of Chrome on a Win7 PC.

Answer 1

Steps to identify where the problem is:

Gem logging

What information does the gem provide when you enable logging? It may be that your credentials are incorrect.

Although it’s not enforced, it’s recommended that you to send JSON to Pusher. So, if you updated your trigger call as follows the gem will convert the object to JSON:

Pusher['survey-channel'].trigger('data-changed', { :text => "Busy creating new Call" } )

Connecting to Pusher from the JavaScript client (browser)

The Pusher connection FAQ provide information about the problems that can be encountered and common solutions when connecting to Pusher.

Pusher Debug Console

The Pusher debug console provide you with information about what’s happening within your application in Pusher. In this case it’ll let you know if the message is reaching Pusher. You can do this by looking at the for your application.

If it is reaching Pusher then the next step is to understand why the event is not reaching your client.

I can’t see anything else wrong on the code but it’s possible that the debug console will provide more information and I’ll be able to update my answer from there.

Some additional information about your question:

It looks like you are trying to bind to a Pusher event here:

myChannel.bind('subscription_error', function(status) {
  alert('Pusher subscription_error');
});

But this won’t do anything for a few reasons:

1. The channel is a public channel so subscription errors don’t occur
2. The event name is incorrect. If it were a private or presence channel and it used the user authentication mechanism then you could bind to the http://pusher.com/docs/client_api_guide/client_events#subscription_error event – note the pusher: prefix.

(x) Uncaught TypeError: Cannot call method ‘bind’ of undefined calls:31

This error means you are calling bind on a variable that is undefined. This is a general scripting error.

(3) WebSocket is closed before the connection is established. :3000:1

This means there was a problem connecting. The Pusher JavaScript library will handle this and try and reconnect for you. Unfortunately it’s not always possible to catch errors such as this and Chrome will log them to the JavaScript console. This gives the impression that something is permanently broken, when it’s actually not.

I have tested Pusher’s testing page. (http://test.pusher.com/1.12) It connects perfectly, but the “Say Hello” feature does nothing. This brings me to think that it might be my browser setup.

I am currently running the latest version of Chrome on a Win7 PC.

If you try http://test.pusher.com/1.12?ssl=true you may get the ‘hello’ message. It’s very possible that you have an anti-virus installed that is interfering with your WebSocket connection. Connecting over SSL (WSS) will mean that the anti-virus can’t tamper with connection data.