[Reactive Pusher Client] Using Pusher on two pages
Forge component by Arley Silveira
Application Type
Reactive
Service Studio Version
11.11.6 (Build 44614)

Hi,

I've been using the reactive pusher "PusherMultiple" control very successfully on one reactive page (Live Chat). I then needed a second page (Monitor console) that was also going to receive notifications. I then started to notice that I had a problem when I moved between the two pages (both with the pusher control on them). Error was "Invalid call of the 'Pusher_OnMessageReceived' client action of the 'XXXX.YYYY' since the latter is not currently active...". In both pages the pusher connection is made immediately on initialise, not through any user interaction. I tried unbinding in the destroy event but did not work. I then moved the unbinding to prior to the navigation and than has fixed it. However, not very elegant code and if they use shortcuts the code will be bypassed.

The sequence is this:

  1. The first page works fine ("Mainflow.Pusher1"). Can happily receive notifications.
  2. When I navigate to the second page ("Mainflow.Pusher2"), the second page connects OK during initialisation.
  3. When another notification is received by the second page, this error occurs "Invalid call of the 'Pusher_OnMessageReceived' client action of the 'Mainflow.Pusher1' since the latter is not currently active..."

Can be recreated in the demo app by moving the connection to "on Initialise" in the PusherMultiple, duplicating the PusherMultiple page,  and creating links between the two pages.

Is there a better solution to what I have done or have I done something stupid (would not be the first time)?

PusherReactiveClientDemoillustratingissueandfix.oml

Solution

Hi Tim, thank you for testing and pointing out the issues.

There's a new version with the corrections, have added an object check to allow both strings and objects as the message payload. Thank you!

Please mark the post as solved if you don't find any more problems :-) 

I tried your OML. But required Key and other stuff. Can you share all those if not sensitive for test purposes? After then I can try for a solution.

AJ

Hi Amit,

Thanks for trying to assist. It's easiest if you set up a free account yourself at pusher.com (only asks you to validate email). Then you can use Pusher's test harness to send the test app some notifications. 

Regards, Tim

Hi Tim, try adding the UnbindEvents() without any parameters into the Pusher_OnDestroy  action on the Pusher_ListenerMultiple block itself. 

Hi Arley,

I tried this and unfortunately it still errors. The pertinent part of the debug log (I hope) is this:

PusherReactiveClient.pusher_min.js?jIokpuBVk1u4XYuXh+7tig:8 Pusher :  : ["No callbacks on channel2 for pusher:subscription_succeeded"]

PusherReactiveClient.debug.js?gQNp0YBGZfXKynLW1RdsQg:4 [Pusher] Source destroyed.

PusherReactiveClient.pusher_min.js?jIokpuBVk1u4XYuXh+7tig:8 Pusher :  : ["Event recd",{"event":"channel1-event1","channel":"channel1","data":"test2"}]

PusherReactiveClient.pusher_min.js?jIokpuBVk1u4XYuXh+7tig:8 Pusher :  : ["Event recd",{"event":"channel1-event1","channel":"channel1","data":"test2"}]

Logger.js:477 Controller [2021-07-09T16:44:06.806Z]: Invalid call of the 'Pusher_OnMessageReceived' client action of the 'MainFlow.PusherMultiple' since the latter is not currently active.

Note that no "unbinded events" log entry before the "source destroyed". My working version (using the poor navigation route) unbinds the channel specifically giving me this in the log:

PusherReactiveClient.debug.js?gQNp0YBGZfXKynLW1RdsQg:4 [Pusher] Unbinded all events from channel 'LiveChat-channel'.

PusherReactiveClient.debug.js?gQNp0YBGZfXKynLW1RdsQg:4 [Pusher] Source destroyed.

And then no error. My guess is an issue with the javascript that unbinds all channels (when no parameters)? 

Thanks for your help, Tim



Hi Tim,

Just published a new version (under development). Give it a try and let me know.

Cheers

Hi Arley,

Sorry, still getting the same error. I can see unbinds prior to the destroy this time but still then errored.  Log attached.

Pusher.log

could you please try to put a disconnect in between the destroy and unbind?

Tried that. Could see the new log entry - but just before the error.

My "solution" (unbinding before navigating) is changing the order of the events with the unbind running before the initialisation of the new page. The destroy event of the initial page is obviously running after the initialisation of the second page. Could the initialisation process be picking up aspects of the still existing first page (not yet destroyed)?

Pusher2.log

Please check the new version available and let me know if you are still having the same behaviour.

It introduces some breaking changes, so plan ahead.

First, the good news. My original problem is solved - well done.

Second, the bad news. I'm getting a type conversion error that I cannot bypass. If the data package can be interpreted as an object it fails when converting to text. To reproduce using the Pusher debug console send the following as the data:

{"message":"Hello"}

Error message attached below.

If you send the following then no error:

"message":"Hello"

Obviously I was serialising data so this caused my issue. I tried removing brackets from the serialised data but no good as the Trigger server action appends "{"Message":" to the start of all messages, I think resulting in the Object assumption, then resulting in the error. I've failed to find the code that adds this '{"Message":' component.  

[Edit following some extra tinkering]

Think I may have fixed. Added JSON.stringify to pusher_class as per below. Also noticed that the channel and events were getting mixed around and seems to be related to the same line of code so changed that as well. Seems to work - this look right to you? 

 onMessageReceived(fn) {

        this.onMessageReceivedHandler = fn;

        this.channels.forEach((ch)=>{

            let subscribe = this.listener.subscribe(ch.name);

            ch.events.forEach((ev)=>{

                subscribe.bind(ev, (data)=>{

                    //this.onMessageReceivedHandler(data, ev, ch.name); // Original

                    this.onMessageReceivedHandler(JSON.stringify(data), ch.name, ev); // Changed this line

                });

            });

        });


    }


Regards,

Tim


Pushererror.log

Solution

Hi Tim, thank you for testing and pointing out the issues.

There's a new version with the corrections, have added an object check to allow both strings and objects as the message payload. Thank you!

Please mark the post as solved if you don't find any more problems :-) 

All looks good. Thanks for the component!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.