laravel 5.7 + vue.js 2 + laravel echo + pusher, как заставить их работать вместе? - PullRequest
Новая
       7

laravel 5.7 + vue.js 2 + laravel echo + pusher, как заставить их работать вместе?

0 голосов
/ 29 августа 2018

Я могу настроить Laravel Echo с Pusher и установить все необходимые зависимости. У меня есть учебники по Lynda и Laracast, как это сделать, но они старые и не для этих версий в заголовке этого вопроса. Итак, из того, что я узнал до сих пор от Линды и Ларакаста, я должен запускать Vue из шаблона blade-сервера, но я не смогу выполнить эту работу, если не добавлю вручную эту строку кода <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> в мой blade-движок. я уверен, что это не так, как надо, поскольку я получаю два экземпляра vue, добавив эту строку кода в мой шаблон blade-сервера. Я не могу заставить это работать, поскольку я получаю Vue is not defined, если я использую это в своем шаблоне лезвия таким образом: 

let app = new Vue({
    el: '#app',
        data() {
           return {
                ...
           }
        },
)}

Таким образом, даже когда я запускаю два экземпляра Vue, я не могу заставить работать эхо-сигнал от Blade, так как при его использовании я получаю Echo is not defined, например, используя этот код: 

Echo.join('form.' + '{{ $product->id }}')
    .here((users) => {
         this.count = users.length;
    });

Я также пытался использовать window так: 

window.Echo.join('form.' + '{{ $product->id }}')
    .here((users) => {
         this.count = users.length;
    });

Но таким образом я получаю Cannot read property 'join' of undefined"

Так что в основном я заблудился, пытаясь понять, как правильно использовать vue внутри клинка + эхо-сигнал и толчок js.

ОБНОВЛЕНО

вот мой файл app.js: 

require('./bootstrap');
window.Vue = require('vue');
Vue.component('search-component', require('./components/Search.vue'));

и вот мой файл boostrap.js: 

window._ = require('lodash');
window.Popper = require('popper.js').default;

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

window.axios = require('axios');

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

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

import Echo from 'laravel-echo'

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

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

1 Ответ

0 голосов
/ 30 августа 2018

после дня поиска мне наконец-то удалось настроить vue / echo / pusher / dash для работы с шаблоном blade-сервера. для получения дополнительной информации и ссылки на фактический рабочий код, пожалуйста, проверьте это GitHub репо

Я постараюсь написать руководство, как сделать это шаг за шагом:

  1. Убедитесь, что вы используете последнюю версию npm . это важно. (у меня 6.4.1)
  2. После установки запуска laravel npm install

  3. Внутри bootstrap.js подайте этот код 

    import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
window.Echo = new Echo({
  broadcaster: 'pusher',
  key: process.env.MIX_PUSHER_APP_KEY,
  cluster: process.env.MIX_PUSHER_APP_CLUSTER,
  encrypted: true
});

  4. Зарегистрируйтесь на pusher.com и создайте приложение. Заполните ваши данные из толкателя в файл .env (например, идентификатор приложения, секрет, кластер и т. Д.)

  5. (Необязательно) Закомментируйте этот код из app.js, так как он вам не нужен (если вы его используете, не делайте этого, но в большинстве случаев вам это никогда не понадобится) 

    // const app = new Vue({
//   el: '#app',
// });
  6. Перейдите к основному шаблону блейда вашего приложения в моем случае, он называется app.blade.php и под <script src="{{ asset('js/app.js') }}"></script> добавьте эту строку кода @yield('scripts'). теперь вы можете добавлять скрипты в свои шаблоны блейдов
  7. Теперь вы можете создать свой раздел скрипта внутри шаблона лезвия, используя @section('scripts') для тега benning и @endsection для закрывающего тега

  8. вот простой код js, как использовать Vue и Echo после того, как вы открыли раздел скрипта: 

    <script type="text/javascript">
  let app = new Vue({
    el: '#app',
    data() {
      return {
        viewers: [],
        count: 0,
      }
    },
    mounted() {
      this.listen();
    },
    methods: {
      listen() {
        Echo.join('chat.' + '{{ $take->id }}')
          .here((users) => {
            this.count = users.length;
            this.viewers = users;
           })
           .joining((user) => {
             this.count++;
             this.viewers.push(user);
            })
            .leaving((user) => {
              this.count--;
              _.pullAllBy(this.viewers, [user]);
            });
        }
    },
});

...