Не удается вывести данные из канала сокета

Рейтинг: 0Ответов: 1Опубликовано: 30.07.2025

Стек:

  • PHP 8.2
  • Vite 5.0.0
  • Vue 3.5.10
  • Pusher JS 8.4.0
  • Laravel 10.48.29
  • Laravel Echo 2.1.7
  • Laravel Reverb 1.5.1

При создании записи в БД на фронт уходит сообщение, для теста я отправил его и в публичный и в приватный канал.

В DevTools оба сообщения отображаются:

введите сюда описание изображения

На этом этапе, в моем понимании, работают корректно:

  • создание модели
  • перехват события создания обсервером
  • отправка сообщения в указанные каналы
  • успешное подключение к сокету фронтендом (включая авторизацию через Sanctum)

О последнем пункте свидетельствует подключение в DevTools, логи запущенного локально реверба php artisan reverb:start --debug:

введите сюда описание изображения

Я целенаправленно не прикрепляю код бекенда, потому как на его стороне все отработало и результат на фронтенде уже вижу. Если потребуется - я добавлю сюда всю необходимую информацию, только скажите какую.

На фронте я использовал несколько способов подключения и все они дают один и тот же результат: идентификатор сокета вывести могу, подписаться на канал могу, а извлечь данные из события - нет. Ниже приведу то, чем пользуюсь, еще раз оговорюсь - я уже пробовал использовать стандартный способ через window.Echo.

~./.env

BROADCAST_DRIVER=reverb

REVERB_APP_ID=655815
REVERB_APP_KEY=fn8wsbpn1woq5grpuxik
REVERB_APP_SECRET=zxatuuzv4l6t9wnohmyv
REVERB_HOST=127.0.0.1
REVERB_PORT=8080
REVERB_SCHEME=http

VITE_BROADCAST_DRIVER="${BROADCAST_DRIVER}"
VITE_BROADCAST_APP_KEY="${REVERB_APP_KEY}"
VITE_BROADCAST_HOST="${REVERB_HOST}"
VITE_BROADCAST_PORT="${REVERB_PORT}"
VITE_BROADCAST_SCHEME="${REVERB_SCHEME}"

app.js

import App from '@/App.vue'
import reverb from '@/plugins/reverb'

const app = createApp(App)
    ...
    .use(reverb)
...
app.mount("#app")

@/types/reverb.ts

import Echo from 'laravel-echo'
import Pusher from 'pusher-js'

declare global {
    interface Window {
        Echo: Echo<any>
        Pusher: typeof Pusher
    }
}

@/plugins/reverb/index.ts

import Echo from 'laravel-echo'
import Pusher from 'pusher-js'
import type { App } from 'vue'

window.Pusher = Pusher;

const echo = new Echo<any>({
    broadcaster: import.meta.env.VITE_BROADCAST_DRIVER,
    key: import.meta.env.VITE_BROADCAST_APP_KEY,
    wsHost: import.meta.env.VITE_BROADCAST_HOST,
    wsPort: Number(import.meta.env.VITE_BROADCAST_PORT),
    wssPort: Number(import.meta.env.VITE_BROADCAST_PORT),
    forceTLS: (import.meta.env.VITE_BROADCAST_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

export default {
    install(app: App) {
        app.provide('reverb', echo)
    },
}

export { echo }

@/composable/use-reverb.ts

export function useReverb(): Echo<any> {
    const reverb = inject<Echo<any>>('reverb')
    if (!reverb) {
        throw new Error('Reverb plugin is not initialized')
    }
    console.log(`[REVERB] Socket id: ${reverb.socketId()}`)
    return reverb
}

@/pages/Home.vue

import {useReverb} from '@/composable/use-reverb'

const reverb = useReverb() // обертка над инициализацией Echo
reverb
  .private('measurements')
  .listen('store-measurement', (event: any) => {
    console.log('[REVERB] Private event received', event)
  })
reverb
  .channel('measurements')
  .listen('store-measurement', (event: any) => {
    console.log('[REVERB] Public event received', event)
  })

Однако в консоли я вижу только идентификатор сокета:

введите сюда описание изображения

Подскажите, пожалуйста, в каком месте я зарыл "собаку"?

Ответы

▲ 0

Решил, до неприличия глупая ошибка и невнимательность.

Заменить:

.listen('store-measurement', (event) => {})

на:

.listen('.store-measurement', (event) => {})