Как реализовать клиент laravel-echo в проекте Vue

Здравствуйте, я расскажу вам о том, как настроить VUE с функциональностью Laravel и Echo.

Шаг 1 Сначала установите laravel

composer create-project laravel/laravel your-project-name 5.4.*

ШАГ 2 Установить переменные изменить Broadcastserviceprovider

нам сначала нужно зарегистрировать App\Providers\BroadcastServiceProvider. Откройте config/app.php и раскомментируйте следующую строку в массиве провайдеров.

// App\Providers\BroadcastServiceProvider

Нам нужно сообщить Laravel, что мы используем драйвер Pusher в файле .env:

BROADCAST_DRIVER=pusher

добавить класс толкателя в config / app.php

'Pusher' => Pusher\Pusher::class,

ШАГ 3 Добавьте 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. Установить 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

Если у вас недействительный заголовок кадра, установите конечную точку аутентификации в 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 каналов МОДУЛЬ 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.info('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 при запуске сервера.