Broadcast receiver didn't work when logout from pusher - laravel

i did implement a broadcast notification in my application with pusher. it is in live. it work good but the problem is when i logout from pusher or close the pusher window then the can't get the notification. if i again login into pusher then notification work.
in blade:
Echo.channel('NotificationChannel')
.listen('NotificationEvent', (e) => {
if( {{Auth::user()->id}} == e.to_doctor_notification.id){
toastr.success('You have a new patient request.', e.to_doctor_notification.name, {timeOut: 50000, progressBar: true, positionClass: 'toast-bottom-left', closeButton: true, newestOnTop: true, extendedTimeOut: 100000})
};
});
In controller:
broadcast(new NotificationEvent($to_doctor_notification));
in NotificationEvent:
public function broadcastOn(){
return new Channel('NotificationChannel');
}
In bootstrap.js:
import Echo from "laravel-echo"
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'app-key',
cluster: 'ap2',
encrypted: true
});

I solve this problem. I have too many javascript file included. that why it doesn't work.
i include the pusher link
this is pusher link
Those are Notification received code in which page want to see the notificetion.
<script>
var pusher = new Pusher('app-key', {
cluster: 'ap2',
forceTLS: true
});
var channel = pusher.subscribe('NotificationChannel');
channel.bind('EchoEvent', function(e) {
if( {{Auth::user()->id}} == e.to_doctor_notification.id){
toastr.success('You have a new patient request.', e.to_doctor_notification.name, {timeOut: 50000, progressBar: true, positionClass: 'toast-bottom-left', closeButton: true, newestOnTop: true, extendedTimeOut: 100000})
};
});

Related

Problem with real time notification with laravel echo and pusher

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;
});

Flutter Laravel Echo

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')
});

Laravel options to init pusher and echo without taking up connections

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();
}

Unable to read events in Laravel Echo

"laravel-echo": "^1.6.0",
"pusher-js": "^5.0.2",
I am using Laravel WebSockets to send events to my Vue.js app using Laravel Echo as:
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
First of all when I connect my app, I see this message:
Connection id 473581849.201555836 sending message {"event":"pusher:connection_established","data":"{\"socket_id\":\"473581849.201555836\",\"activity_timeout\":30}"}
When I disconnect, I see this one:
Connection id 603442282.571320345 closed.
So the app is well communicating with the Laravel WebSocket, no problem with that as it received the connection and connection packets from my app.
My problem comes when I try to read in my front end a packet from the server, I just cannot get it.
const echo = new Echo({
broadcaster: 'pusher',
cluster: process.env.WEBSOCKET_CLUSTER,
key: process.env.WEBSOCKET_KEY,
wsHost: process.env.WEBSOCKET_URL,
wssHost: process.env.WEBSOCKET_URL,
wsPort: process.env.WEBSOCKET_PORT,
wssPort: process.env.WEBSOCKET_PORT,
encrypted: process.env.WEBSOCKET_ENCRYPTED,
disableStats: process.env.WEBSOCKET_DISABLE_STATS,
enabledTransports: ['ws', 'wss']
// auth: {
// headers: {
// 'Accept': 'application/json',
// 'Authorization': 'Bearer ' + window.localStorage.getItem('accessToken')
// }
// }
});
export default ({ Vue }) => {
Vue.prototype.$echo = echo;
};
Here is for example an event received(this is what I get from the ssh console):
Connection id 545411452.62710705 sending message {"event":"log-message","channel":"private-websockets-dashboard-api-message","data":{"type":"api-message","time":"20:06:24","details":"Channel: androidMobile, Event: App\\Events\\UpdateAndroidNavBarCounts","data":"{\"message\":{\"countincompletereports\":0,\"countviewmyreports\":1002,\"countpoints\":300,\"user_id\":63}}"}}
This event here: App\Events\UpdateAndroidNavBarCounts
I cannot get it in my front end, I tried this:
this.$echo.channel('androidMobile')
.listen('.App.Events.UpdateAndroidNavBarCounts', function (data) {<------------
console.log('This is a test 2');
this.$store.dispatch('common/UpdateAndroidNavBarCounts', data, { root: true });
})
this
this.$echo.channel('androidMobile')
.listen('App.Events.UpdateAndroidNavBarCounts', function (data) {<------------
console.log('This is a test 2');
this.$store.dispatch('common/UpdateAndroidNavBarCounts', data, { root: true });
})
this:
this.$echo.channel('androidMobile')
.listen('.UpdateAndroidNavBarCounts', function (data) {<------------
console.log('This is a test 2');
this.$store.dispatch('common/UpdateAndroidNavBarCounts', data, { root: true });
})
and even this:
this.$echo.channel('androidMobile')
.listen('UpdateAndroidNavBarCounts', function (data) { <------------
console.log('This is a test 2');
this.$store.dispatch('common/UpdateAndroidNavBarCounts', data, { root: true });
})
I never managed to see the console.log('This is a test 2'); message.
Any help would be appreciated please as I have been struggling on this for days and days and I am starting to believe that it is a bug.
Thank you.
oK, with time I worked it out ...
I was using the Quasar framework and this was the top of my boot file:
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Pusher.logToConsole = true;
When I added this logToConsole = true; parameter, I could start seeing the communication from the Android mobile to the API.
My problem was this:
authEndpoint: process.env.WEBSOCKET_AUTH_URL
let's say WEBSOCKET_AUTH_URL = https://mywebsite.com
No idea why but if I add this:
authEndPoint: process.env.WEBSOCKET_AUTH_URL + '/broadcasting/auth'
It does not work, the url is broken into 2 strings.
I also tried this:
authEndPoint: JSON.stringify(process.env.WEBSOCKET_AUTH_URL) + '/broadcasting/auth'
No luck either, so instead I added the whole url in the .env file as:
WEBSOCKET_AUTH_URL = https://mywebsite.com/broadcasting/auth
Now it works.

Pusher: Difference between channel binding and Laravel echo

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);
});

Resources