Binding callbacks on Laravel Echo with Laravel Websockets

Question

I want to know when my users are getting errors connecting or the connection drops out. I've read a lot saying this is possible but I'm getting no where and I'm starting to think it maybe an issue with a third party like https://github.com/beyondcode/laravel-websockets which I am using, has anyone had any issues with this?

The following yields no logs at all.

window.Echo.connector.pusher.bind('reconnect', (channel, data) => {
    console.log('RE-CONNECTED');
});

window.Echo.connector.pusher.bind('reconnecting', (channel, data) => {
    console.log('re-connecting...');
});

window.Echo.connector.pusher.bind('reconnect_error', (channel, data) => {
    console.log('reconnection error!');
});

window.Echo.connector.pusher.bind('reconnect_attempt', (channel, data) => {
    console.log('re-connecting...');
});

window.Echo.connector.pusher.bind('connect_error', (channel, data) => {
    console.log('connect error...');
});

window.Echo.connector.pusher.bind('error', (channel, data) => {
    console.log('error...');
});

window.Echo.connector.pusher.bind_global((channel, data) => {
    console.log(channel, data);
});

If I use something like this which is being suggested

window.Echo.connector.socket.on('connect_error', function(){
    console.log('connected', window.Echo.socketId());
});

window.Echo.connector.socket.on('connect', function(){
    console.log('connected', window.Echo.socketId());
});

window.Echo.connector.socket.on('disconnect', function(){
    console.log('disconnected');
});

window.Echo.connector.socket.on('reconnecting', function(attemptNumber){
    console.log('reconnecting', attemptNumber);
});

I get Uncaught TypeError: Cannot read property 'on' of undefined

Answer 1

I have discovered the correct way to bind the events;

window.Echo.connector.pusher.connection.bind($eventName, (payload) => {});

Event references can be found here https://pusher.com/docs/channels/using_channels/connection

window.Echo.connector.pusher.connection.bind('connecting', (payload) => {

    /**
     * All dependencies have been loaded and Channels is trying to connect.
     * The connection will also enter this state when it is trying to reconnect after a connection failure.
     */

    console.log('connecting...');

});

window.Echo.connector.pusher.connection.bind('connected', (payload) => {

    /**
     * The connection to Channels is open and authenticated with your app.
     */

    console.log('connected!', payload);
});

window.Echo.connector.pusher.connection.bind('unavailable', (payload) => {

    /**
     *  The connection is temporarily unavailable. In most cases this means that there is no internet connection.
     *  It could also mean that Channels is down, or some intermediary is blocking the connection. In this state,
     *  pusher-js will automatically retry the connection every 15 seconds.
     */

    console.log('unavailable', payload);
});

window.Echo.connector.pusher.connection.bind('failed', (payload) => {

    /**
     * Channels is not supported by the browser.
     * This implies that WebSockets are not natively available and an HTTP-based transport could not be found.
     */

    console.log('failed', payload);

});

window.Echo.connector.pusher.connection.bind('disconnected', (payload) => {

    /**
     * The Channels connection was previously connected and has now intentionally been closed
     */

    console.log('disconnected', payload);

});

window.Echo.connector.pusher.connection.bind('message', (payload) => {

    /**
     * Ping received from server
     */

    console.log('message', payload);
});