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

Question

我能够使用 Pusher 配置 Laravel Echo 并安装所有必要的依赖项。我在 lynda 和 laracast 上观看了如何执行此操作的教程，但它们很旧，不适用于此问题标题中的这些版本。所以，根据我到目前为止从 lynda 和 laracast 学到的知识，我必须从 blade 模板运行 Vue，但我无法完成这项工作，除非我手动添加这行代码 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>在我的 blade 引擎中。我确信这不是工作的方式，因为我通过在我的 blade 模板中添加这行代码来获得两个 vue 实例。如果我以这种方式在我的 blade 模板中使用它，我无法使它工作，因为我得到 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"

所以基本上我迷路了，试图弄清楚如何在 blade 中以正确的方式使用 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 从 blade 模板开始工作。有关更多信息和实际工作代码的参考，请查看此 github repo

我会试着写一个如何逐步完成此操作的指南：

确保您运行正在使用最新版本的 npm。这是必不可少的。（我的是 6.4.1）
安装后laravel运行npm install

在 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
});

注册 pusher.com 并创建一个应用程序。将你的数据从推送器填写到 .env 文件（如应用程序 ID、秘密、集群等）
（可选）注释掉 app.js 中的这段代码，因为您不需要它（如果您正在使用它，请不要这样做，但在大多数情况下您永远不会这样做）
```
// const app = new Vue({
//   el: '#app',
// });
```
转到您的应用程序的主要 blade 模板，在我的例子中它被称为 app.blade.php，然后在 <script src="{{ asset('js/app.js') }}"></script> 下添加这行代码 @yield('scripts')。现在您可以将脚本添加到您的 blade 模板
现在您可以在 blade 模板中创建脚本部分，使用 @section('scripts') 作为 benning 标签，@endsection 作为结束标签

这里是打开脚本部分后如何使用 Vue 和 Echo 的简单 js 代码：

<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]);
            });
        }
    },
});

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

laravel 5.7 + vue.js 2 + laravel echo + pusher, how to make them work together?

php

laravel

vue.js

pusher

laravel-echo