broadcast to others and dont broadcast to current user are not working

Question

In my TaskList.vue I have the code below:

<template>
    <div>
        <ul>
            <li v-for="task in tasks" v-text="task"></li>
        </ul>

        <input type="text" v-model="newTask" @blur="addTask">
    </div>
</template>

<script>  
    export default {
        data(){
            return{
                tasks: [],
                newTask: ''
            }
        },

        created(){
            axios.get('tasks')
            .then(
                response => (this.tasks = response.data)
            );

            Echo.channel('task').listen('TaskCreated', (data) => {
                this.tasks.push(data.task.body);
            });
        },

        methods:{
            addTask(){
                axios.post('tasks', { body: this.newTask })

                this.tasks.push(this.newTask);

                this.newTask = '';
            }
        }
    }
</script>

When I hit the axios.post('tasks') end point, I got duplicate result in my current tab that i input the value and the another tab got only 1 value which is correct.

To avoid this, I tried to use broadcast(new TaskCreated($task))->toOthers();

OR

I put $this->dontBroadcastToCurrentUser() in the construct of my TaskCreated.php

However, both methods are not working. Any idea why?

The image below is from network tab of mine. One of it is pending, is that what caused the problem?

https://ibb.co/jpnsnx (sorry I couldn't post image as it needs more reputation)

Answer 1

I solved this issue on my Laravel Spark project by manually sending the X-Socket-Id with the axios post.

The documentation says the header is added automatically if you're using vue and axios, but for me (because of spark?) it was not.

Below is an example to show how I manually added the X-Socket-Id header to an axios post using the active socketId from Laravel Echo:

axios({
    method: 'post',
    url: '/api/post/' + this.post.id + '/comment',
    data: {
        body: this.body
    },
    headers: {
        "X-Socket-Id": Echo.socketId(),
    }
})

Answer 2

Laravel looks for the header X-Socket-ID when using $this->dontBroadcastToCurrentUser(); Through this ID, Laravel identifies which user (current user) to exclude from the event.

You can add an interceptor for requests in which you can add the id of your socket instance to the headers of each of your requests:

 /**
 * Register an Axios HTTP interceptor to add the X-Socket-ID header.
 */
Axios.interceptors.request.use((config) => {
  config.headers['X-Socket-ID'] = window.Echo.socketId() // Echo instance
  // the function socketId () returns the id of the socket connection
  return config
})