broadcast to others and dont broadcast to current user are not working broadcast to others and dont broadcast to current user are not working vue.js vue.js

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


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(),    }})


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})