Не удается вывести данные из канала сокета
Стек:
- 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)
})
Однако в консоли я вижу только идентификатор сокета:
Подскажите, пожалуйста, в каком месте я зарыл "собаку"?