1

So I'm using Laravel Event with Pusher, so far if I use public channel without any extra conditions I can get my data as notification in my blade.

The problem starts when I try to send notification to 1 user only and not everyone, I've tried PrivateChannel but I'm getting:

[Vue warn]: Error in created hook: "ReferenceError: bidId is not defined"

and 

ReferenceError: bidId is not defined

Logic

Send notification to the project owner only (where his/her ID is saved in projects table)

Vue Component

<template>
    <li class="nav-item dropdown">
        <a id="navbarDropdown" class="nav-link icon-menu dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
            <span class="sr-only">Notifications</span>
            <i class="far fa-bell"></i>
            <span class="notification-dot"></span>
        </a>

        <div class="dropdown-menu notifications dropdown-menu-right" aria-labelledby="navbarDropdown">
            <a class="dropdown-header"><strong>You have {{bids.length}} new notifications</strong></a>
            <a class="dropdown-item" v-for="bid in bids">
                <div class="media">
                    <div class="media-left">
                        <i class="fa fa-fw fa-flag-checkered text-muted"></i>
                    </div>
                    <div class="media-body">
                        <p class="text">{{bid.message}}</p>
                        <span class="timestamp">{{bid.created_at}}</span>
                    </div>
                </div>
            </a>

            <a class="dropdown-item more">See all notifications</a>
        </div>
    </li>
</template>

<script>
    export default {
        data() {
            return{
                bids:[],
            }
        },
        created(){
            this.fetchBids();
        },
        methods:{
            fetchBids(){
                // Echo.channel('bidplaced')  //tested with public channel
                Echo.private(`bidplaced.${bidId}`)
                .listen('BidPlaced', (e) => {
                    this.bids.push(e.bid);
                });
            },
        },
    }
</script>

Blade

<notifications></notifications>

Controller

$bid->save();
event(new BidPlaced($bid)); //firing the event

// this is 1 way to get the user i need to receive notification
$user = $bid->project->user;

Event

class BidPlaced implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $bid;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Bid $bid)
    {
        $this->bid = $bid;
    }


    public function broadcastOn()
    {
        // return ['bidplaced'];  //this is working as public channel
        return new PrivateChannel('bidplaced.'.$this->bid->project->user_id);
    }

Question

How can I get my project owner as receiver of those notifications?

emotality
  • 12,795
  • 4
  • 39
  • 60
mafortis
  • 6,750
  • 23
  • 130
  • 288
  • 1
    Never used Laravel, but in your component: `Echo.private(\`bidplaced.${bidId}\`)` - where are you getting `${bidId}` from? Can't see it being set/fetched anywhere in your component's code, so it remains undefined. – dziraf Aug 05 '18 at 08:10
  • 1
    @dziraf exactly bro, I'm newbie with vue acually my first attempt with vue, now would you help me to get what i'm looking for in vue way? – mafortis Aug 05 '18 at 08:36
  • @dziraf this part `$this->bid->project->user_id` won't pass `bidId`? – mafortis Aug 05 '18 at 08:36
  • 1
    That's Laravel part of code so your vue component can't see it. As I said, I don't know Laravel, so I can't help you much. What you need to do is use `data` property `bidId` and set it to your `user_id` – dziraf Aug 05 '18 at 16:23

1 Answers1

0

Possibly a little late but hopefully this helps someone!

Controller

broadcast(new BidPlaced($user))->toOthers();

Event

 use App\User

 public $user;

 public function __construct(User $user)
{
    $this->user = $user;
}

 public function broadcastOn()
 {
     return new PrivateChannel('notification.'.$this->user->id);
 }

Vue component

created() {
        Echo.private('notification.'+auth.user.id)
            .listen('BidPlaced', (e) => {
                console.log(e);
            });
    },
Liam Hall
  • 217
  • 3
  • 9