Results of broadcast is showing on Pusher's Debug Console, yet on my Vuejs Component can't seem to listen to the broadcast

@gych thanks, I did try it but it is still the same. Also when I downgrade the version of laravel-echo and pusher-js I encountered a new error that is showing on my console which is;

pusher.js:613 Pusher : Couldn't get auth info from your webapp : 404

and

POST pusher/auth 404 (Not Found) 

@dyiroooo I just see that you import it directly in your file with echo so you don't have to use window.Echo, my bad. I mostly import pusher and echo in bootstrap js file

Just try it like this then:

echo.channel("change-price." + this.productId).listen(".ChangePrice", (event) =>

Make sure that ChangePrice has a class . at the beginning

@gych thank you so much the errors are gone but I still can't console.log .listen

@dyiroooo Can you activate logging for pusher? Then you can get logs about pusher in console, its esier for debugging whats wrong

like this

Pusher = require('pusher-js');

window.Pusher = Pusher;

Pusher.logToConsole = true;

@dyiroooo It looks like pusher is not successfully connecting

Because when a connection has been made it should give you for example these logs in browser console:

Pusher :  : ["Event sent",{"event":"pusher:subscribe","data":{"auth":"...","channel":"change-price.1"}}]
pusher-js.js?v=a1f66f88:957 Pusher :  : ["Event recd",{"event":"pusher_internal:subscription_succeeded","channel":"change-price.1","data":{}}]

@gych

Pusher : Event sent : {"event":"pusher:subscribe","data":{"channel":"book-a-job.2"}} pusher.js:161 Pusher : Event recd : {"event":"pusher_internal:subscription_succeeded","data":{},"channel":"book-a-job.2"}

this is now occurring on my console.log, does it mean it is now connecting successfully?

if it is connecting successfully, the only problem left is the .listen class is not working

@dyiroooo Yes indeed connection has been made now, nice

@dyiroooo yes you should .bind instead, like you showed in one of your previous replies

@gych .bind is not known by the Echo, instead of using .bind, the pusher's documentation told me to use .listen since I am using Laravel Echo.

There are no errors existing right now but I can't seem to console.log the event's data from the .listen

@dyiroooo But you are not using Laravel Echo in your vue project right?

From what I know now, you use Laravel Echo in Laravel project. And just pusher in the vue project, echo can only be used in the vue project after installing a specific package for that but I think you haven't done that yet? And your setup will be completly different than what you changed it to now.

@gych I am using Laravel Echo and I did install a specific package which are; pusher-js and laravel-echo. This is so hard to configure.

I am using a PrivateChannel and when I use this code: const channel = echo.channel(change-price. + booking_id); I can subscribe and connect with no problem but the .listen seems not to work

but when I am using: this const channel = echo.private(change-price. + booking_id); or this const channel = echo.channel(private-change-price. + booking_id); the error POST http://localhost:8080/pusher/auth 404 (Not Found) shows Pusher : Couldn't get auth info from your webapp : 404

@gych class ChangePrice implements ShouldBroadcast { public $bookingId; public $newPrice;

public function __construct($bookingId, $newPrice)
{
    $this->bookingId = $bookingId;
    $this->newPrice = $newPrice;

    Log::info("ChangePrice event fired for booking number $bookingId with new price $newPrice");
}

public function broadcastOn()
{
    $channel = new PrivateChannel("book-a-job.{$this->bookingId}");
    Log::info('Broadcasting on channel:', ['channel' => $channel]);

    return $channel;
}

}

@dyiroooo I see that you are using a privatechannel for private channels you should use this instead: echo.private("change-price." + this.productId).listen(".ChangePrice", (event) =>

@gych I already did now, errors are only showing when the page is first reloaded but when I trigger the method, it does not show anything and the data result still reflects on the pusher's debug console

@dyiroooo Its because your data is send from server back-end and that seems to work fine because you can see it in the pusher debug console. But the issue you have right now is that the client side (front-end) is not successfully making connection

@dyiroooo Try to connect with this instead

const echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true
});

Also make sure you have this defined in your env file:

# PUSHER
PUSHER_APP_ID=YOUR APP ID
PUSHER_APP_KEY=YOUR APP KEY
PUSHER_APP_SECRET=YOUR APP SECRET
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=YOUR APP CLUSTER (for me its eu but could be different for you)

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

@gych my .env pusher is setup-ed like how you use it but my VueJS project folder is separated from my laravel folder so it's like I'm only using axios to make them communicate.

backend-laravel (root) // serve using php artisan serve

frontend-vuejs (root) // serve using npm run serve

@dyiroooo Ok thanks for clarifying that and did you also add the variables in your vue project? And do you use vite or webpack?

@gych yes I added the variables but I don't use either vite or webpack? How should I do that?

@dyiroooo What do you currently use to build your vue application for production?

@gych Frontend:

• VueJS 2
• VueX
• Vuetify

Backend:

• Laravel
• Laravel Passport

@dyiroooo Ok I guess you use vue CLI then, which version of CLI do you use?

@gych I don't know the version (I tried in my cmd vue -v, but it says that its not recognized) but here are some my dependencies

"devDependencies": { "@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-vuex": "~5.0.0", "@vue/cli-service": "~5.0.0", "sass": "~1.32.0", "sass-loader": "^10.0.0", "vue-cli-plugin-vuetify": "^2.5.8", "vue-template-compiler": "^2.6.14", "vuetify-loader": "^1.7.0" }

@gych I will try this. What I wanted to achieve is a user can bargain a price for another user and they will be notified if the other user has changed the price, since I don't want to use laravel websockets I'm sticking to laravel-echo and pusher-js.

Thanks for your help, it means a lot!

@dyiroooo You're welcome

Also check my last reply on this post, its about a package that lets you use laravel echo in a standalone vue app like in your case, might be easier than using the docs from pusher.

If you have more questions, let me know

@gych I did follow the pusher's documentation codes and I see that I am having trouble connecting to pusher I guess because the error I keep getting is this:

Pusher : Error : {"type":"WebSocketError","error":{"type":"PusherError","data":{"code":4005,"message":"Path not found"}}}

@dyiroooo This mostly means that your project can't make connection with pusher Are you sure that you have added the correct details here?

var pusher = new Pusher({
  appId: "APP_ID",
  key: "APP_KEY",
  secret: "APP_SECRET",
  cluster: "APP_CLUSTER",
});

@gych yes, all of my details I putted on my setup is correct

@dyiroooo Did you add them from the env file or did you just add them directly in the code?

@gych I just added them direct in my component's code, should I make an .env file for my VueJS project?

@dyiroooo For testing purposes you can add it directly in your component's code but when pushing to code to git or deploying it to your host you should move those details to the env file for security reasons

Can you share the part of your code that has been updated ?

@gych I've added an .env file, and my echo-config.js now looks like this

import Echo from "laravel-echo"; import Pusher from "pusher-js";

window.Pusher = Pusher; Pusher.logToConsole = true;

var pusher = new Pusher({ appId: "my-appId", key: process.env.VUE_APP_PUSHER_APP_KEY, cluster: process.env.VUE_APP_PUSHER_APP_CLUSTER, secret: process.env.VUE_APP_PUSHER_APP_SECRET, // encrypted: true, channelAuthorization: { endpoint: "my-end-point", }, });

export default pusher;

also, I followed the class used in the pusher's documentation such as .subscribe for connecting and .bind for listening an event

    const channel = echo.subscribe(`book-a-job.`  + booking_id);
    channel.bind('.ChangePrice', (event) => {
        this.handlePriceChange(event.productId, event.newPrice);
    });

@dyiroooo

In the docs I see that this is the config structure you should have in your component

    const pusher = new Pusher(
       	process.env.VUE_APP_PUSHER_APP_KEY,
        {
          cluster: process.env.VUE_APP_PUSHER_APP_CLUSTER,
          forceTLS: true,
          channelAuthorization: {
            endpoint: "your-endpoint",
          }
        }
      );

and this in the auth file

const pusher = new Pusher({
  appId: "APP_ID", // Replace with 'app_id' from dashboard
  key: "APP_KEY", // Replace with 'key' from dashboard
  secret: "APP_SECRET", // Replace with 'secret' from dashboard
  cluster: "APP_CLUSTER", // Replace with 'cluster' from dashboard
  useTLS: true,
});

Also check if you actually get the correct values from the env file. You can test this by logging process.env.VUE_APP_PUSHER_APP_KEY to console.

@gych it is all now working man, thanks a lot for your guidance and patience

@dyiroooo Glad I could help! Don't forget to close your thread by selecting the best answer.

If you need further assistance, don't hesitate to reach out.