Laravel echo with vue.js

Question

Я пытаюсь создать приложение для задачи с Laravel echo (только для проверки эхо-сигнала Laravel). (Я использую Laravel 5.3)

Но у меня есть 2 ошибки, которые я не могу исправить. В моей консоли я получаю следующее:

Я использую webpack.

Мой компонент:

<template> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-8 col-md-offset-2"> 
       <div class="panel panel-default"> 
        <div class="panel-heading">Example Component</div> 

        <div class="input-group"> 
         <input type="text" class="form-control" placeholder="Task"> 
         <button type="button" class="btn" @click="store()">Button</button> 
        </div> 

        <ul v-for="task in tasks"> 
         <li>{{ task.name }}</li> 
        </ul>  
       </div> 
      </div> 
     </div> 
    </div> 
</template> 

<script> 

import Vue from 'vue'; 
import Echo from "laravel-echo" 

    export default { 
     ready() { 
      this.getAll(); 
      this.listen(); 
     }, 

     data() { 
      return { 
       tasks: {} 
      }; 
     }, 

     methods: { 
      store() { 
       alert('df'); 
      }, 

      getAll() { 
       Vue.http.get('/api/all') 
        .then(({data}) => { 
         this.tasks = data.tasks 
         }, (error) => { 
         console.log(error); 
        }); 
      }, 

      listen() { 
       Echo.channel('test') 
        .listen('TaskCreated', event => { 
         this.tasks.push(event.task); 
        }); 
      } 
     } 
    } 
</script> 

App.js:

/** 
* First we will load all of this project's JavaScript dependencies which 
* include Vue and Vue Resource. This gives a great starting point for 
* building robust, powerful web applications using Vue and Laravel. 
*/ 

require('./bootstrap'); 

/** 
* Next, we will create a fresh Vue application instance and attach it to 
* the body of the page. From here, you may begin adding components to 
* the application, or feel free to tweak this setup for your needs. 
*/ 

Vue.component('example', require('./components/Example.vue')); 

const app = new Vue({ 
    el: 'body' 
}); 

bootstrap.js:

window._ = require('lodash'); 

/** 
* We'll load jQuery and the Bootstrap jQuery plugin which provides support 
* for JavaScript based Bootstrap features such as modals and tabs. This 
* code may be modified to fit the specific needs of your application. 
*/ 

window.$ = window.jQuery = require('jquery'); 
require('bootstrap-sass'); 

/** 
* Vue is a modern JavaScript library for building interactive web interfaces 
* using reactive data binding and reusable components. Vue's API is clean 
* and simple, leaving you to focus on building your next great project. 
*/ 

window.Vue = require('vue'); 
require('vue-resource'); 

/** 
* We'll register a HTTP interceptor to attach the "CSRF" header to each of 
* the outgoing requests issued by this application. The CSRF middleware 
* included with Laravel will automatically verify the header's value. 
*/ 

Vue.http.interceptors.push((request, next) => { 
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken); 

    next(); 
}); 

/** 
* Echo exposes an expressive API for subscribing to channels and listening 
* for events that are broadcast by Laravel. Echo and event broadcasting 
* allows your team to easily build robust real-time web applications. 
*/ 

import Echo from "laravel-echo" 

window.Echo = new Echo({ 
    broadcaster: 'pusher', 
    key: '183d16cb449d' //not my real code 
}); 

Так что может быть не так?

Answer 1

_laravelEcho2 является import Echo from "laravel-echo" и _laravelEcho2.default.channel говорит, что это не ваш Echo но импортирован один. Я не знаю, почему на примере есть такой запутанный код.

window.Echo = new Echo({...}) 
window.Echo.channel('test') 
      .listen('...', (e) => { console.log(e) }) 

Удачи вам!

Answer 2

В вашем мастер зрения добавить что-то вроде этого в заголовок:

<script> 
    window.App = { 
     csrfToken: '{{ csrf_token() }}', 
     stripePublicKey: '{{ config('services.stripe.key') }}' 
    } 
</script> 

затем изменить request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken); к request.headers.set('X-CSRF-TOKEN', window.App.csrfToken); в файле bootstrap.js.