after installing pusher when i added
Echo.connector.pusher.config.auth.headers.Authorization=`Bearer ${state.userToken}`;
i got this error
enter image description here
this is my app.js and bootstrap.js
setUser(state,user){
state.user = user
Echo.connector.pusher.config.auth.headers.Authorization=`Bearer ${state.userToken}`;
},
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
encrypted: true,
host: window.location.hostname + ":8000",
authEndpoint: "/api/broadcasting/auth",
csrfToken: token.content ,
auth:{
headers:{Authorization: JSON.parse(localStorage.getItem('userToken'))}
}
});
anyone can help me pls ?
I couldn't find a solution
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'm new in Flutter Dev and I want to connect pusher using laravel app to my Flutter app.When subscribing to the event,Flutter binds the Event.I realised that the app is not being able to connect.I receive the http exception ,I don't know exactly which kind of exception.
PusherOptions options = PusherOptions(
host: 'http://www.api.dassam.net',
port: 80,
encrypted: false,
activityTimeout: 1200000
);
FlutterPusher pusher =
FlutterPusher('XXXXXX', options, enableLogging: true,
onConnectionStateChange: (ConnectionStateChange x) async {
print(x.currentState);
},onError: (ConnectionError y)=>{
print(y.exception)
});
Echo echo = new Echo({
'broadcaster': 'pusher',
'client': pusher,
"useTLS": false,
});
echo.channel('public').listen('EssaiEvent', (e) {
print('BIEN REUSSI
});
I found the solution.I change the host "http://dassam.net" to pusher wshost and it's working.
PusherOptions options = PusherOptions(
host: 'ws-ap2.pusher.com',
port: 80,
encrypted: false,
cluster: "ap2",
activityTimeout: 120000);
FlutterPusher pusher = FlutterPusher("XXXXXXXXXXXXXXXX", options,
enableLogging: true,
onConnectionStateChange: (ConnectionStateChange x) async {
print(x.currentState);
},
onError: (ConnectionError y) => {print(y.message)});
Echo echo = new Echo({
'broadcaster': 'pusher',
'client': pusher,
});
echo.channel('public').listen('EssaiEvent', (e) {
print(
'BIEN REUSSI')
});
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
});
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();
}