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/vue@2.5.17/dist/vue.js"></script>，否则我无法完成这项工作。我确信这不是事情必须工作的方式，因为我通过在刀片模板中添加这行代码来获得两个 vue 实例。如果我以这种方式在刀片模板中使用它，我将无法使其工作，因为我得到了Vue is not defined：

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

所以，即使我运行两个 Vue 实例，我也无法让 laravel Echo 从 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 + laravel echo 和 pusher 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
});

Answer 1

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

我会试着写一个如何一步一步做的指南：

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 并创建应用程序。从 pusher 到 .env 文件中填写您的数据（如应用 ID、机密、集群等）

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') 作为本宁标签，@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]);
               });
           }
       },
   });