广播给其他人并且不广播给当前用户不起作用答案

【问题标题】：broadcast to others and dont broadcast to current user are not working广播给其他人并且不广播给当前用户不起作用
【发布时间】：2018-09-01 07:34:49
【问题描述】：

在我的 TaskList.vue 中，我有以下代码：

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

当我点击 axios.post('tasks') 端点时，我在当前选项卡中得到了重复的结果，我输入了值，而另一个选项卡只有 1 个正确的值。

为了避免这种情况，我尝试使用广播(new TaskCreated($task))->toOthers();

或

我将 $this->dontBroadcastToCurrentUser() 放入我的 TaskCreated.php 的构造中

但是，这两种方法都不起作用。知道为什么吗？

下面的图片来自我的网络标签。其中一个待处理，是什么导致了问题？

https://ibb.co/jpnsnx（抱歉，我无法发布图片，因为它需要更多声誉）

【问题讨论】：

标签： laravel vue.js laravel-echo

【解决方案1】：

我通过手动发送带有 axios 帖子的 X-Socket-Id 在我的 Laravel Spark 项目中解决了这个问题。

文档说如果您使用 vue 和 axios，标题会自动添加，但对我来说（因为 spark？）它不是。

下面是一个示例，展示了我如何使用 Laravel Echo 中的活动 socketId 手动将 X-Socket-Id 标头添加到 axios 帖子：

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

【讨论】：

你也可以axios.defaults.headers.common['X-Socket-Id'] = Echo.socketId()
这对我来说是自动工作的，但是，它刚刚开始不起作用。这可能是一个错误。

【解决方案2】：

Laravel 在使用 $this->dontBroadcastToCurrentUser() 时会查找头 X-Socket-ID；通过这个 ID，Laravel 识别出要从事件中排除的用户（当前用户）。

您可以为请求添加一个拦截器，您可以在其中将您的套接字实例的 id 添加到每个请求的标头中：

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

【讨论】：