可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have a small snippet that throws an "Existing subscription to channel" exception even though I only call the subscribe method once.

This can be avoided by moving the subscribe request outside of the "state_change" handler, but I'm wondering what might cause this? Maybe a bug in the Pusher library?

<!doctype html>
<html>
<body>
    <h1>Pusher subscribe testcase</h1>
    <p>Tip: check your console</p>
    <script src="https://d3dy5gmtp8yhk7.cloudfront.net/2.1/pusher.min.js"></script>
    <script>
        var pusher, channel;
        pusher = new Pusher('xxxxxxxxxxxxxxxxx');
        pusher.connection.bind('state_change', function(change){
            if(change.current === 'connected'){
                console.log('connected');
                channel = pusher.subscribe('test-channel');
                channel.bind('pusher:subscription_succeeded', function() {
                    console.log('subscribed');
                });
            }
        })
    </script>
</body>
</html>

This results in:

connected
subscribed
Pusher : Error : {"type":"WebSocketError","error":{"type":"PusherError","data":{"code":null,"message":"Existing subscription to channel test-channel"}}}

回答1:

While it does look like a bug in the library (do report it!), you don't need to bind to the state_change event in order to subscribe to channels.

If you look at the code for the subscribe event in pusher.js:

prototype.subscribe = function(channel_name) {
  var self = this;
  var channel = this.channels.add(channel_name, this);

  if (this.connection.state === 'connected') {
    channel.authorize(this.connection.socket_id, function(err, data) {
      if (err) {
        channel.handleEvent('pusher:subscription_error', data);
      } else {
        self.send_event('pusher:subscribe', {
          channel: channel_name,
          auth: data.auth,
          channel_data: data.channel_data
        });
      }
    });
  }
  return channel;
};

you'll see that it will first add your channel to an internal list of channels via the channels.add method, which looks like this:

prototype.add = function(name, pusher) {
  if (!this.channels[name]) {
    this.channels[name] = createChannel(name, pusher);
  }
  return this.channels[name];
};

It will only add the channel in case you haven't previously subscribed.

So, if you were to subscribe to a channel before the connection is established, the Pusher client will only add the channel to the list. Once the client has established a connection, it will call the subscribe method again for every channel in its list via the subscribeAll method:

this.connection.bind('connected', function() {
  self.subscribeAll();
});

And seeing that at this point this.connection.state is connected, it will connect.

So, recapping, don't bother binding to the state_change event to subscribe, just subscribe, like so:

<!doctype html>
<html>
<body>
    <h1>Pusher subscribe testcase</h1>
    <p>Tip: check your console</p>
    <script src="https://d3dy5gmtp8yhk7.cloudfront.net/2.1/pusher.js"></script>
    <script>
        var pusher, channel;

        pusher = new Pusher('XXXXXXXXXXXXXXXX');
        channel = pusher.subscribe('test-channel');
        channel.bind('pusher:subscription_succeeded', function() {
            console.log('subscribed');
        });
    </script>
</body>
</html>

回答2:

It looks like a bug. If you open up the Network tab in dev tools and look at the WebSocket connection "Frames" information you can see the pusher:subscribe protocol event being sent twice. However, the code is definitely only calling pusher.subscribe once.

You should raise this bug with Pusher support or by submitting an issue to the github repo.