Issues With Pusher-js client in vue - vue.js

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

Answer 1

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.