API Usage - Simple HTML + JS page. about chatify HOT 3 CLOSED

@Tech-Dex please check the following:

• Verify Your Pusher App Configuration, Make sure that your Pusher app configuration, including the app_id, key, and secret, is correctly set in your Laravel application's configuration files (config/broadcasting.php).

• Ensure the Data Being Sent is Correct, The data you're sending with the event should match what is expected on the client-side. In this case, it appears to be related to a private channel, so make sure that the data being sent to the private channel is formatted correctly.

• Check for Typos, Double-check for any typos in your event names, channel names, or any other relevant configuration settings.

• Check for Middleware or Filters, If you're using middleware or filters in your Laravel application, make sure they are not modifying the event data in a way that would cause the signature to become invalid.

• Check the Timestamp, The first part of the expected signature, 54879.19617339, appears to be a timestamp. Make sure that the server and client have synchronized clocks to avoid timestamp-related issues.

from chatify.

key, secret, app_id and cluster are properly set via env so no issues on that side. I've manually checked those values.

        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'useTLS' => true,
            ],
        ],

Ensure the Data Being Sent is Correct - From what I've read in their documentation content-type html/text + "auth":"","channel_data:{} is the right format.

I am unable to find any typos

No middleware used. The response is coming as expected : Content-Type: text/html; charset=UTF-8 ; I know that the dev tools shows it as json, but the headers are text/html

This is on local, so no timestamp issue. That number seems to be a socket_id that is not like the one that I've sent in my request ( from initial message 'socket_id': '123.456',. That's what I have in Pusher Error Logs interface:

from chatify.

Hello updates for this one.
It seems like Pusher JS was the problem. It is not really well documented so I'll leave here my solution, maybe someone will be happy to find that. You have to use the customHandler in order to be able to do that validation from a client side like React/Vue/Flutter/RN.

        async function fetchAuth(socketId, channelName) {
            try {
                const myHeaders = new Headers();
                myHeaders.append("Accept", "application/json");
                myHeaders.append("Content-Type", "application/json");
                myHeaders.append("Authorization", "Bearer my-token-from-login-here");

                const raw = JSON.stringify({
                    "socket_id": socketId,
                    "channel_name": channelName
                });

                const requestOptions = {
                    method: 'POST',
                    headers: myHeaders,
                    body: raw,
                    redirect: 'follow'
                };

                const response = await fetch("http://localhost:8000/chatify/api/chat/auth", requestOptions);
                const result = await response.json();

                return result
            } catch (error) {
                console.error('error', error);
            }
        }




        const pusher = new Pusher("fff37687037ad4a26501", {
            cluster: 'us2',
            forceTLS: true,
            channelAuthorization: {
                customHandler : async ({socketId, channelName}, callback) => {
                    const data = await fetchAuth(socketId, channelName);
                    callback(null, {
                        "auth": data["auth"],
                        "channel_data": data["channel_data"]
                    })
                },
            }
        });

from chatify.