Как внедрить клиент laravel-echo в проект Vue
Я разрабатываю приложение с Vuetify (Vue.js) в качестве внешнего интерфейса, который общается с API для Laravel бэкэнд-сервер.
Я пытаюсь сделать систему уведомлений с Laravel-эхо-сервер работать с socket.io. И с помощью laravel-echo в клиент тоже.
Код, который я использую в компоненте клиента для проверки работоспособности соединения:
// Needed by laravel-echo
window.io = require('socket.io-client')
let token = this.$store.getters.token
let echo = new Echo({
broadcaster: 'socket.io',
host: 'http://localhost:6001',
auth: {
headers: {
authorization: 'Bearer ' + token,
'X-CSRF-TOKEN': 'too_long_csrf_token_hardcoded'
}
}
})
echo.private('Prova').listen('Prova', () => {
console.log('IT WORKS!')
})
Это код laravel-echo-server.json
{
"authHost": "http://gac-backend.test",
"authEndpoint": "/broadcasting/auth",
"clients": [],
"database": "redis",
"databaseConfig": {
"redis": {},
"sqlite": {
"databasePath": "/database/laravel-echo-server.sqlite"}
},
"devMode": true,
"host": null,
"port": "6001",
"protocol": "http",
"socketio": {},
"sslCertPath": "",
"sslKeyPath": "",
"sslCertChainPath": "",
"sslPassphrase": "",
"apiOriginAllow": {
"allowCors": false,
"allowOrigin": "",
"allowMethods": "",
"allowHeaders": ""}
}
Я пытался изменить apiOriginsAllow безуспешно.
Событие отправлено, я вижу это в Laravel-эхо-сервер журналы:
Channel: Prova
Event: App\Events\Prova
Но после этого, когда я получаю доступ к компоненту клиента, который содержит код подключения, я вижу в журналах laravel-echo-server длинную трассировку ошибок и следующую ошибку:
The client cannot be authenticated, got HTTP status 419
Как видите, я указал токен csrf и токен авторизации в заголовках клиента laravel echo. Но это не работает.
Это код routes/channels.php:
Broadcast::channel('Prova', function ($user) {
return true;
});
Я только хочу прослушать событие, не важно, является ли оно приватным или общедоступным, потому что, когда оно работает, я хочу поместить его в сервисного работника. Тогда, я полагаю, лучше, если это будет публично.
- Как я могу использовать клиент laravel echo из проекта laravel?
- Будет ли проблема, если я устрою приватное мероприятие и попытаюсь прослушать его у служащего?
Решение
Здравствуйте, я даю вам целый шаг, как настроить VUE с функциональностью Laravel и Echo
Шаг 1 Сначала установите laravel
composer create-project laravel/laravel your-project-name 5.4.*
ШАГ 2 Установить переменные изменить Broadcastserviceprovider
сначала нужно зарегистрировать App\Providers\BroadcastServiceProvider, открыто config/app.php и раскомментируйте следующую строку в массиве provider.
// App\Providers\BroadcastServiceProvider
Нам нужно сообщить Laravel, что мы используем драйвер Pusher в файле .env:
BROADCAST_DRIVER=pusher
добавить класс толкателя в config / app.php
'Pusher' => Pusher\Pusher::class,
ШАГ 3 Добавьте A Pusher в ваш проект Laravel
composer require pusher/pusher-php-server
ШАГ 4 Добавьте следующее в config / broadcasting.php
'options' => [
'cluster' => env('PUSHER_CLUSTER'),
'encrypted' => true,
],
ШАГ 5 Установить переменную толкателя
PUSHER_APP_ID=xxxxxx
PUSHER_APP_KEY=xxxxxxxxxxxxxxxxxxxx
PUSHER_APP_SECRET=xxxxxxxxxxxxxxxxxxxx
PUSHER_CLUSTER=xx
ШАГ 6 Установить узел
npm install
ШАГ 7 Installl Pusher js
npm install --save laravel-echo pusher-js
ШАГ 8 uncommnet Подписан
// resources/assets/js/bootstrap.js
import Echo from "laravel-echo"
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'xxxxxxxxxxxxxxxxxxxx',
cluster: 'eu',
encrypted: true
});
ШАГ 9 Прежде чем создавать миграцию
// app/Providers/AppServiceProvider.php
// remember to use
Illuminate\Support\Facades\Schema;
public function boot()
{
Schema::defaultStringLength(191);
}
Другие решения
для розетки io
npm install socket.io --save
Если вы получили недопустимый заголовок fram, установите конечную точку авторизации в bootstrap.js следующим образом
window.Echo = new Echo({
authEndpoint : 'http://project/broadcasting/auth',
broadcaster: 'pusher',
key: '63882dbaf334b78ff949',
cluster: 'ap2',
encrypted: true
});
Для запуска клиентских слушателей я использовал Vuex. Затем, когда мое приложение запускается, я отправляю действие INIT_CHANNEL_LISTENERS начать слушателей.
index.js каналов МОДУЛЬ vuex
import actions from './actions'
import Echo from 'laravel-echo'
import getters from './getters'
import mutations from './mutations'
window.io = require('socket.io-client')
export default {
state: {
channel_listening: false,
echo: new Echo({
broadcaster: 'socket.io',
// host: 'http://localhost:6001'
host: process.env.CHANNEL_URL
}),
notifiable_public_channels: [
{
channel: 'Notificacio',
event: 'Notificacio'
},
{
channel: 'EstatRepetidor',
event: 'BroadcastEstatRepetidor'
}
]
},
actions,
getters,
mutations
}
actions.js каналов MODULE vuex
import * as actions from '../action-types'
import { notifyMe } from '../../helpers'
// import { notifyMe } from '../../helpers'
export default {
/*
* S'entent com a notifiable un event que té "títol" i "message" (Per introduir-los a la notificació)
* */
/**
* Inicialitza tots els listeners per als canals. Creat de forma que es pugui ampliar.
* En cas de voler afegir més canals "Notifiables" s'ha de afegir un registre al state del index.js d'aquest modul.
* @param context
*/
[ actions.INIT_CHANNEL_LISTENERS ] (context) {
console.log('Initializing channel listeners...')
context.commit('SET_CHANNEL_LISTENING', true)
context.getters.notifiable_public_channels.forEach(listener => {
context.dispatch(actions.INIT_PUBLIC_NOTIFIABLE_CHANNEL_LISTENER, listener)
})
// }
},
/**
* Inicialitza un event notificable a través d'un canal.
* Per anar bé hauria de tenir un titol i un missatge.
* @param context
* @param listener
*/
[ actions.INIT_PUBLIC_NOTIFIABLE_CHANNEL_LISTENER ] (context, listener) {
context.getters.echo.channel(listener.channel).listen(listener.event, payload => {
notifyMe(payload.message, payload.title)
})
}
}
функция notifyMe в помощниках
Эта функция отправляет уведомление в браузер
export function notifyMe (message, titol = 'TITLE', icon = icon) {
if (!('Notification' in window)) {
console.error('This browser does not support desktop notification')
} else if (Notification.permission === 'granted') {
let notification = new Notification(titol, {
icon: icon,
body: message,
vibrate: [100, 50, 100],
data: {
dateOfArrival: Date.now(),
primaryKey: 1
}
})
}
Затем сервер использует laravel-echo-server как вопрос. С помощью Redis ставить в очередь события и руководитель запустить laravel-echo-server при запуске сервера.