I am using Pusher API for sending notifications in Laravel 5.4 with JQuery. I found out that whenever I send notification from Firefox or Safari...it reaches chrome browser successfully but not vice versa. Another problem is that when I send message, it is being received by me!!! Although I used toOthers()
method
My Code is below. Please let me know if you need more info.
Controller Code
broadcast(new SendMessageEvent("hi", \Auth::user()))->toOthers();
Blade
$(function() {
Pusher.logToConsole = true;
var pusher = new Pusher('Pusher API key', {
authEndpoint: 'broadcasting/auth',
auth: {headers: {'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')}}
});
var channel = pusher.subscribe('private-user-channel.{!! \Auth::user()->UserID !!}');
channel.bind('App\\Events\\SendMessageEvent', function(data) {
console.log(data);
});
});
Event
class SendMessageEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $msg;
public $user;
public $userid;
public function __construct($msg, $user) {
$this->msg = $msg;
$this->user = $user;
$this->userid = $this->user->UserID;
}
public function broadcastOn()
{
return new PrivateChannel('user-channel.1');
}
}
Channel
Broadcast::channel('user-channel.{userid}', function ($user, $userid) {
return (int) $user->UserID === (int) $userid;
});
Luckily, with Laravel and Pusher, implementing this functionality is a breeze. The code we’ll write in this tutorial can be found here. In order to provide users with a good experience, notifications should to be shown in real-time. One approach is to send an AJAX request regularly to the back end and fetch the newest notifications if they exist.
var channel = pusher.subscribe ('notification-send'); channel.bind ('App\Events\NotificationEvent', function (data) { // this is called when the event notification is received... }); Using the below route we can send a notification.
Finally, by implementing ShouldQueue, Laravel will automatically put this notification inside a queue to be executed in the background, which will speed up the response. This makes sense because we will be adding HTTP calls when we use Pusher later on. Let’s initiate the notification when the user gets followed.
For example, if you are writing a billing application, you might send an "Invoice Paid" notification to your users via the email and SMS channels. In Laravel, each notification is represented by a single class that is typically stored in the app/Notifications directory.
I found this while searching, if the question is still open :
your event broadcasts everything to userID 1
return new PrivateChannel('user-channel.1');
but your other users connect to their own channel with their own userID. Change to public channel and test again with your code, the rest seems to be correct.
you should probably use Laravel Echo, which works better than raw pusher, and works with private channels and whatever push notification you got from Laravel :
Echo.private('{{'App.User.'.Auth::id()}}')
.listen('.notify', (e) => {
...
})
.notification((notification) => {
...
});
I'm not sure about other browser but I know toOthers()
issue (For VueJs)
If you are using Vue and Axios, the socket ID will automatically be attached to every outgoing request as a X-Socket-ID
header. Then, when you call the toOthers
method Only to others
If you want to set X-Socket-ID
manually Set request header
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With