Laravel echo vue js here method

Question

i have a problem with here method vuejs, laravel echo.

broadcast channel

Broadcast::channel('task.*', function ($user, $taskId) {
    $task = Task::find($taskId);
    if ($task)
    {
        return ['id' => $user->id, 'name' => $user->name];
    }
});

blade template

<task-show inline-template :task="{{ json_encode($task) }}" :user-id="{{ auth()->user()->id }}" >
                        <ul>
                            <li v-for="viewer in viewersExceptMe">
                                @{{ viewer['name'] }}
                            </li>
                        </ul>
                        <div>
                            <table class="table table-bordered table-hover">
                                <tbody>
                                    <tr>
                                        <td>Task Name</td>
                                        <td>@{{  task['name'] }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </task-show>

My script

<script>
    export default{
        props : {
            task : Object,
            userId : Number
        },
        data : function () {
          return {
              viewers : []
          }
        },
        ready : function(){
            this.listen();
        },
        computed: {
            viewersExceptMe(){
                return _.reject(this.viewers, viewer => viewer.id == this.userId);
            }
        },
        methods : {
            listen(){
                Echo.join('task.' + this.task.id)
                    .here(viewers => {
                        this.viewers = viewers;
                    });
            }
        }
    }
</script>

In image below, the here method doesn't works, the viewers variable is not updated when user leaves the info page

Answer 1

Joining Presence Channels

To join a presence channel, you may use Echo's join method. The join method will return a PresenceChannel implementation which, along with exposing the listen method, allows you to subscribe to the here, joining, and leaving events.

Echo.join(`chat.${roomId}`)
    .here((users) => {
        //
    })
    .joining((user) => {
        console.log(user.name);
    })
    .leaving((user) => {
        console.log(user.name);
    });

• The here callback will be executed immediately once the channel is joined successfully
• The joining method will be executed when a new user joins a channel
• The leaving method will be executed when a user leaves the channel

In you current situation this method should be like this,

Echo.join('task.' + this.task.id)
                    .here(viewers => {
                            this.viewers = viewers;
                    })
                    .joining((user) => {
                        this.viewers.push(user)
                    })
                    .leaving((user) => {
                        this.viewers = _.reject(this.viewers, viewer => viewer.id == user.id);
                    });

Reference: Laracast discuss , Laravel Documentation for broadcasting