Question

我在向前端输出事件广播时遇到问题。我的设置是 Laravel 8 + Inertia.js 脚手架，带有 vue.js 包装。

一切似乎都在检查后端。事件被广播并被监听，触发通知被广播。使用 Laravel Telescope，我可以查看事件、侦听器和通知的详细信息。

我创建了一个“广播消息组件”来处理从 Laravel echo 接收的数据，并将其导入到将显示消息的页面中。尽管构建过程没有抛出任何错误，但前端没有输出任何消息，并且我在控制台日志中收到无效的 JSON 错误消息以及来自我的索引 html 文件的原始 html 代码。

Pusher 仪表板还会确认连接成功并发送消息。控制台上的推送器日志也显示连接成功但没有消息和订阅错误消息。

这是我的主要js文件：

dict

还有我的 bootstrap.js 文件：

require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';


const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => import(`./Pages/${name}`).then(module => module.default),
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .mount(el);

InertiaProgress.init({ color: '#4B5563' });

这是我没有通知方面的broadcastmessage组件文件，我在实现接收通知消息之前测试了直接接收事件：

window._ = require('lodash');

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**js
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

import Echo from 'laravel-echo';

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

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

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});

这是向用户显示消息的页面：

<template>
    <div v-show="show">
        {{ body }}
    </div>
</template>

<script>
export default {
    props: ['message'],

    data() {
        return {
            body: '',
            show: false,
        }
    },
    mounted() {
        Echo.private('user.${this.user.id}')
            .listen('TradingAccountActivation', (e) => {
                this.message ({
                body: e.message,
                show: true
            })
                console.log(this.message)
            });
        }
}
</script>

我怀疑问题出在我的广播组件上，但不知道如何解决。谢谢

从身份验证端点返回的 JSON 无效，但状态代码为 200

0 个答案: