Issues With Pusher-js client in vue

Question

I am using vue 3 to build a realtime chat app. I am also using laravel-echo@^1.10.0 and pusher-js@^7.0.3.

In the main.js I instantiated the laravel-echo and passed in the credential from the .env file

const app = createApp(App)

app.config.globalProperties.$appUrl = window.location.origin
app.config.globalProperties.$serverUrl = process.env.VUE_APP_BASE_URL

axios.defaults.baseURL = process.env.VUE_APP_BASE_URL + "api";
let token = localStorage.getItem("apiToken");
axios.defaults.headers.common = {
  Authorization: "Bearer " + token,
  Accept: 'application/json',
};

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

window.Echo = new Echo({
  authHost: process.env.VUE_APP_BASE_URL,
  authEndpoint: process.env.VUE_APP_BASE_URL + "api/company/broadcasting/auth",
  broadcaster: "pusher",
  key: process.env.VUE_APP_PUSHER_KEY,
  cluster: process.env.VUE_APP_PUSHER_CLUSTER,
  // encrypted: true,
  auth: {
    headers: {
      Authorization: "Bearer " + token,
    },
  },
});


app.component('Spinner', Spinner)
app.component('Pagination', Pagination)
app.component(VueCountdown.name, VueCountdown)

app.use(VueToast, { position: 'top-right' })
app.use(plugin, defaultConfig)
app.use(store)
app.use(router)
app.use(VueAxios, axios)
app.mount('#app')

In the chat UI I now subscribed to the channel and listen to the event

onMounted(async() => {
      await getChat();
      if(errorOnChatLoading.value){
        router.push({ name: 'NoChat' });
        toast.error(traverseError(errorOnChatLoading.value));
      }
      
       window.Echo.private(`message.received`).listen("WhatsappIncomingMessageEvent", function(e) {
         console.log(2);
       })
      
    })

This issue I am facing is that when the component mounts, the channel is successfully subscribed to and it even starts listening to events. When you trigger events it is logged to the network tab.

The event comes through and is logged to the network tab but that same event is not passed into the event handler so I can use it to affect the UI.

Basically,

window.Echo.private(`message.received`).listen("WhatsappIncomingMessageEvent", function(e) {
 console.log(2);
})

The console.log(2) above is not fired.

PS I have tried the latest versions, I have tried prefixing the event name with a ., I have even tried using the pusher-js itself without the laravel-echo. I have tried using created() and mounted() in the options-api.

// instantiate and configure pusher
      let token = localStorage.getItem("apiToken");
      const pusher = new Pusher(process.env.VUE_APP_PUSHER_KEY, {
        cluster: process.env.VUE_APP_PUSHER_CLUSTER,
        authEndpoint: process.env.VUE_APP_BASE_URL + "api/company/broadcasting/auth",
        auth: {
          headers: {
            Authorization: "Bearer " + token,
          },
        },
      });
      // subscribe and bind in mounted hook
      let channel = pusher.subscribe(`private-message.received`);
      channel.bind('.WhatsappIncomingMessageEvent', function(data) {
        console.log(2);
      })

No resolution

score 0 · Answer 1 · answered Jul 01 '22 at 10:33

0

You need to use the full event name, which according to the screenshot is App\\Events\\WhatsappIncomingMessageEvent. This should then allow you to pass the event to the handler.

answered Jul 01 '22 at 10:33

doydoy

4,021
3
20
33

```window.Echo.private(`message.received`).listen("App\\Events\\WhatsappIncomingMessageEvent", function(e) { console.log(2); }) ``` This still didnt work – NwaiwuIsidore Jul 01 '22 at 11:10
If I might add, it not even about passing the event to the handler, the handler is not been fired in the first place. – NwaiwuIsidore Jul 01 '22 at 11:12

Issues With Pusher-js client in vue

1 Answers1