I am using Channel broadcasting with laravel and vue.js in order to have all user online and offline.
I have installed the package correctly and configured pusher params according to laravel documentation.
In my vue component I wrote following to see who is online on the related channel:
created() {
this.getFriends();
window.Echo.join('Room')
.here(users => {
});
}
But I get following error:
Error in created hook: "TypeError: window.Echo is undefined"
"
Boostrap.js
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
//key: process.env.MIX_PUSHER_APP_KEY,
key:'****************',
//cluster: process.env.MIX_PUSHER_APP_CLUSTER,
cluster: 'eu',
encrypted: true
});
Related
How do you set-up Laravel Echo in Svelte (SSR)?
I tried the following code from the documentation but it doesn't seem to work.
import Echo from "laravel-echo"
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'your-pusher-key',
wsHost: window.location.hostname,
wsPort: 6001,
forceTLS: false,
disableStats: true,
});
The code shows an error that window is undefined.
I also tried searching for instructions or references online but can't seem to find one for setting up Laravel Echo.
Thanks a lot!
You've got to wait for window context.
If you're using sveltekit:
import { browser } from '$app/environment';
if (browser) {
//your window.Pusher code
}
Else if you're using vanilla svelte
import { onMount } from 'svelte'
onMount(async()=>{
//Your window.pusher code
})
I used Laravel Echo and Pusher for increment counter of notification in real time, it was working for a time but no it doesn't work anymore and i don't know the reason why ( the counter doesn't increment in real time, i need to refresh the page)
i changed my .env with id of pusher:
PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=eu
i used in layout this trick in order to get the id of admin :
<script>
window.User = {
id: {{ optional(auth()->user())->id}}
}
</script>
and in bootstrap.js :
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
forceTLS: true
});
window.Echo.private('App.Models.User.' +User.id)
.notification((notification) => {
document.getElementById('js-count').innerHTML = parseInt(document.getElementById('js-count').innerHTML) + 1;
});
I am tryint to create a chat app using vue cli project with laravel-echo. But getting error as 419 unknown status /broadcasting/auth.
This is my main.js filr
import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import i18n from "./i18n";
import VueConfirmDialog from "vue-confirm-dialog";
import VueChatScroll from "vue-chat-scroll";
import Echo from "laravel-echo";
Vue.use(VueConfirmDialog);
Vue.config.productionTip = false;
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount("#app");
window.Pusher = require("pusher-js");
window.Echo = new Echo({
broadcaster: "pusher",
// key: process.env.MIX_PUSHER_APP_KEY,
host: "http://localhost:8000",
authEndpoint: "http://localhost:8000/broadcasting/auth",
key: "key",
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
cluster: "ap2",
forceTLS: true
});
and this is how i am trying to listen to events
window.Echo.channel("Chat").listen("SessionEvent", e => {
let friend = this.friends.find(friend => friend.id === e.session_by);
friend.session = e.session;
this.listenForEverySession(friend);
});
Can anyone tell me whats the problem? This is front end and laravel project is backend
This is error I am getting
in your channels.php add guards
Broadcast::channel('Chat', function ($user) {
return true;
}, ['guards' => 'web']); // add this guards
and remove authEndpoint it should auto detect
If I init echo and pusher in the bootstrap.js file I can see in pushers dashboard that a new connection is taken every time I visit/open my app in another tab even though I dont subscribe to any channels:
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
encrypted: true
});
This is very bad since I only need pusher/echo on a singel page in my app and not all.
So instead I have setup a page.vue file in my app where I load echo/pusher:
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
mounted() {
this.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: 'us',
encrypted: true
});
this.Echo.channel('post')
.listen('NewPost', (item) => {
console.log(item);
});
But is there any way I can add Echo/pusher window.Echo window.Pusher to my window DOM without making ut connect to pushers websocket? Eg only connect once I call .listen()
How about this?
import Echo from 'laravel-echo';
window.EchoService = {
init: () =>
new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
encrypted: true
}),
otherFunctions: ....,
}
Then in your vue page:
mounted() {
this.newEcho = window.EchoService.init();
this.newEcho.channel('post')
.listen('NewPost', (item) => {
console.log(item);
});
}
You may also need to disconnect from the pusher on component destroyed
destroyed() {
this.newEcho.leave('post');
// or this.newEcho.leave();
}
I recently worked on a notification system using Pusher and Laravel. unfortunately can't make it work this way:
import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
Pusher.logToConsole = true;
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'WORKING KEY ..',
cluster : "mt1",
encrypted: true
});
and
window.Echo.channel('post')
.listen('ArticleEvent', function (e) {
console.log(e);
});
While messages was sent to client console, but Listen didn't worked at all... and nothing logged.
anyway I used this way and it worked:
window.Pusher = require('pusher-js');
var pusher = new Pusher('WORKING KEY ..', {
encrypted: true,
cluster: 'mt1',
});
var channel = pusher.subscribe('post');
channel.bind('ArticleEvent', function(e) {
alert(JSON.stringify(e['message']));
});
What is deference between 2 ways and which must be preferred?
You need to include namespace information in the Listen method.
Please try using (note the . character):
window.Echo.channel('post')
.listen('.ArticleEvent', function (e) {
console.log(e);
});