laravel 5.7 + vue.js 2 + laravel echo + pusher，如何让它们一起工作？

Question

我能够使用Pusher配置Laravel Echo并安装所有必需的依赖项。我有关于lynda和laracast的教程如何做到这一点，但它们已经过时了，而不是这个版本在这个问题的标题中。所以，从我迄今为止从lynda和laracast学到的东西，我必须从刀片模板运行Vue，但我不能使这工作，除非我在我的刀片引擎内添加手动这行代码<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>。我确信这不是必须工作的方式，因为我通过在我的刀片模板中添加这行代码来获得两个vue实例。我不能让它工作，因为我得到Vue is not defined，如果我在我的刀片模板中使用它这样：

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

因此，即使我运行Vue的两个实例，我也无法从Blade中使用laravel Echo，因为当我使用它时，我正在使用此代码获取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正确的方式+ laravel echo和pusher js。

更新

这是我的app.js文件：

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

这是我的bootstrap.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
});

Answer 1

经过一天的搜索，我终于设法让vue / echo / pusher / dash从刀片模板开始工作。有关更多信息和参考实际工作代码，请检查此github repo

我将尝试写一个guite如何一步一步地做到这一点：

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文件（如app id，secret，cluster等）
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]);
               });
           }
       },
   });