如何让 Laravel echo 在 Laravel 项目中与惯性.js 和 vue.js 一起正常工作？

如何解决如何让 Laravel echo 在 Laravel 项目中与惯性.js 和 vue.js 一起正常工作？

我正在尝试使用 Pusher 和 Laravel echo 在 Laravel 项目中实现向私人频道广播的通知。前端使用 Vue 和 Inertia。我需要帮助解决三个问题：

1. 我仅在用户登录应用程序后才使用 Laravel echo 启动与 Pusher 的连接，但我收到 419 状态并且连接失败。这是控制台输出：

Pusher : : ["状态改变","初始化 -> 连接"] vendor.js:41325 Pusher : : ["Connecting",{"transport":"ws","url":"wss://ws-eu.pusher.com:443/app/XXX6d8b6015bf99XXX?protocol=7&client=js&version =7.0.3&flash=false"}] vendor.js:41325 Pusher : : ["Connecting",{"transport":"xhr_streaming","url":"https://sockjs-eu.pusher.com:443/pusher/app/XXX6d8b6015bf99XXX?protocol=7&client =js&version=7.0.3"}] vendor.js:41325 Pusher :: ["State changed","connecting -> connected with new socket ID 131880.30956555"] vendor.js:40979 POST http://127.0.0.1:8000/pusher/auth 419（未知状态） [e-mail]:40979 vendor.js:41360 Pusher :: [“错误：无法从身份验证端点检索身份验证字符串 - 接收状态：来自 /pusher/auth 的 419。客户端必须经过身份验证才能加入私人或在线频道。请参阅：https://pusher。 com/docs/authenticating_users"] vendor.js:41325 Pusher : : ["pusher:subscription_error 在 private-user.12 上没有回调"]

但是当我刷新页面时，用户会在新的套接字上进行身份验证。这个控制台输出：

Pusher : : ["状态改变","url":"wss://ws-eu.pusher.com:443/app/XXX6d8b6015bf99XXX?protocol=7&client=js&version =7.0.3&flash=false"}] Pusher : : ["State changed","connecting -> connected with new socket ID 131841.30968485"] vendor.js:41325 Pusher : : ["Event sent",{"event":"pusher:subscribe","data":{"auth":"XXX6d8b6015bf99XXX:a0e7a444XXXX4152c4bb0716XXXX1b83bd5a6005924xxxx:" "}}] vendor.js:41325 Pusher : : ["事件记录",{"event":"pusher_internal:subscription_succeeded","channel":"private-user.12","data":{}}] vendor.js:41325 Pusher : : ["pusher:subscription_succeeded 的 private-user.12 没有回调"]

Laravel 望远镜上的会话详细信息显示，提供 419 状态的调用和成功的调用都具有相同的令牌信息。

我知道 419 状态与缺少/无效的 CSRF 令牌有关，但我认为 Laravel 开箱即用，并且如上所述，这似乎不是问题。

我现在不知道还能做些什么来解决这个问题，这样当用户登录并呈现仪表板组件（惯性页面）时，就会启动回声实例，并为经过身份验证的用户进行推送订阅调用，而不需要完整的 http 页面加载。

这是我的引导文件：

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;

window.EchoService = { 
    init: () => 
    new Echo({
    broadcaster: 'pusher',key: process.env.MIX_PUSHER_APP_KEY,cluster: process.env.MIX_PUSHER_APP_CLUSTER,forceTLS: true,authEndpoint: '/pusher/auth',auth: {
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',}
    }
})
};

这是我的 vue 文件：

  mounted() {
       window.EchoService.init().private(`user.${this.$page.props.auth.user.id}`)
          
  },destroyed() {
       window.EchoService.init().leave(`user.${this.$page.props.auth.user.id}`);
  },

2. 第二个问题是我的 destroy 方法在用户注销时似乎没有被调用。注销后用户连接保持活动状态，直到我刷新页面。我不知道如何在惯性再次运行时使其工作，在没有完整 http 请求（重新加载完整页面）的情况下注销时导航离开。

3. 第三个问题是，即使连接成功，我也没有收到任何回调/数据。没有任何内容记录到控制台或呈现到页面。但是我可以在推送器调试控制台上看到数据。

对于最后两个问题，我的猜测是我可能没有以正确的方式实现我的 vue 组件。