Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pusher Notification received by sender and working in Chrome only. Laravel 5.4 and JQuery

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;
});
like image 793
Pankaj Avatar asked Apr 07 '17 21:04

Pankaj


People also ask

How to implement real-time notifications in Laravel and pusher?

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.

How to send a notification using pusher?

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.

What is shouldqueue in Laravel pusher?

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.

How do you send notifications in Laravel?

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.


3 Answers

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.

like image 80
BitBay Avatar answered Oct 02 '22 21:10

BitBay


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) => {
                    ...
                });
like image 26
Shuyi Avatar answered Oct 02 '22 21:10

Shuyi


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

like image 24
bhavinjr Avatar answered Oct 02 '22 23:10

bhavinjr