laravel 5.7 + vue.js 2 + laravel echo + pusher，如何使它们协同工作? [英] laravel 5.7 + vue.js 2 + laravel echo + pusher, how to make them work together?

问题描述

我能够使用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，我将无法使其正常工作:

I am able to configure Laravel Echo with Pusher and install all the necessary dependencies. I have watch tutorials on lynda and laracast how to do this, but they are old and not for these versions in the title of this question. So, from what i have learned so far from lynda and laracast i have to run Vue from the blade template, but i cant make this work unless i add manual this line of code <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> inside my blade engine. i am sure this is not the way things have to work as i am getting two instances of vue by added this line of code inside my blade template. I cant make it work as i am getting Vue is not defined if i use it inside my blade template this way:

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

因此，即使当我运行两个Vue实例时，也无法像使用它时一样从Blade上获取laravel Echo来工作，例如使用此代码，我会得到Echo is not defined:

So, even when i run two instances of Vue i can't get the laravel Echo to work from Blade as when i use it i am getting Echo is not defined for example using this code:

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"

所以基本上我迷失了试图弄清楚如何以正确的方式+ laravel echo和pusher js使用刀片内部的vue.

So basically i am lost trying to figure it out how to use vue inside the blade the proper way + laravel echo and pusher js.

已更新

这是我的app.js文件:

here is my app.js file:

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

这是我的boostrap.js文件:

and here is my boostrap.js file:

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

推荐答案

经过一天的搜索，我终于设法使vue/echo/pusher/dash从刀片模板开始工作.有关更多信息和对实际工作代码的引用，请检查此 github存储库

after day of searching i finally manage to make vue/echo/pusher/dash to work from blade template. for more info and reference to actual working code, please check this github repo

我将尝试写一篇指南，一步一步地做到这一点:

I will try to write a guite how to do this step by step:

1. 确保您正在运行最新版本的 npm .这是必不可少的. (我的是6.4.1)
2. 安装laravel后，运行npm install

3. 在bootstrap.js内部保存此代码

1. Make sure you are running the latest version of npm. this is essential. (mine is 6.4.1)
2. After installing laravel run npm install

3. Inside bootstrap.js file this code

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并创建一个应用.将您的数据从pusher填写到.env文件(例如应用ID，机密，群集等)

Register to pusher.com and create an app. Fill out your data from pusher to .env file (like app id, secret, cluster and etc)

(可选)在不需要的情况下从app.js注释掉此代码(如果正在使用，则不要这样做，但是在大多数情况下，您永远不需要)

(Optional) Comment out this code from app.js as you dont need it (if you are using it dont do it, but in most cases you never will)

// const app = new Vue({
//   el: '#app',
// });

在我的情况下，转到应用程序的主刀片模板，即app.blade.php，并在<script src="{{ asset('js/app.js') }}"></script>下添加以下代码行@yield('scripts').现在您可以将脚本添加到刀片模板中

现在，您可以在刀片模板中使用@section('scripts')用于标记标签，并使用@endsection用于结束标记

，在脚本模板中创建脚本部分.

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

Go to the main blade template of your app in my case it is called app.blade.php and under the <script src="{{ asset('js/app.js') }}"></script> add this line of code @yield('scripts'). now you can add scripts to your blade templates

Now you can create your script section inside your blade template using @section('scripts') for benning tag and @endsection for closing tag

here is a simple js code how to use Vue and Echo after you opened the script section:

<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，如何使它们协同工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！