使用Javascript在同一页面中收听2个Pusher应用程序

Question

I have been using pusher for quite a few months with success. I won't go into the details of the "push" part of the solution because that works already. My issue is with the listener side when I try to listen to a second app. Please note that I said a second app not a second channel on the same app.

Here is what I have that has worked well for at least 6 months and continues to work well until I try to add a second version of this on the same HTML/PHP page in the HEAD section.

I have changed the keys an certain info for obvious reasons.

How can I add a second copy of this pointing to a second app within Pusher?

My concern is that I will have issues if there are things like identical variables such as channel. I have tried renaming the channel to channel 2 and pusher to pusher 2 but then it quits working..

<!-- Start Pusher Code -->
  <script src="https://d3dy5gmtp8yhk7.cloudfront.net/2.1/pusher.min.js" type="text/javascript"></script>
  <script type="text/javascript">

    var pusher = new Pusher('0000000000');
    var channel = pusher.subscribe('appname');

    channel.bind('channelname', function(data) {

    MyURL = 'http://www.google.com';

    newwindow=window.open(MyURL,data.cuid,'height=800,width=950,scrollbars=yes');

    });
  </script>
  <!-- End Pusher Code -->

Answer 1

You can use a self-executing closure:

( function() {
  // some code
} )();

to ensure that the variables don't clash. Also, remember to declare variables using var or they leak to the global scope.

If possible, I would include the Pusher <script> tag just once.

<script src="https://d3dy5gmtp8yhk7.cloudfront.net/2.1/pusher.min.js"></script>
<!-- Start Pusher Code -->
<script>
( function() {
  var pusher = new Pusher('app_key_1');
  var channel = pusher.subscribe('appname');

  channel.bind('channelname', function(data) {

    var MyURL = 'http://www.google.com';

    var newwindow=window.open(MyURL,data.cuid,'height=800,width=950,scrollbars=yes');

  });
} )();
</script>
<!-- End Pusher Code -->

<!-- Start Pusher Code -->
<script>
( function() {
  var pusher = new Pusher('app_key_2');
  var channel = pusher.subscribe('appname');

  channel.bind('channelname', function(data) {

    var MyURL = 'http://www.google.com';

    var newwindow = window.open(MyURL,data.cuid,'height=800,width=950,scrollbars=yes');

  });
} )();
</script>
<!-- End Pusher Code -->

I've used two different application keys to confirm that you are connecting to two different applications.