Question

我正在开发一个以 Vuetify （Vue.js）作为前端的应用程序，它与api与 laravel 后端服务器进行通信。

我尝试使用 laravel-echo-server 与 socket.io 一起制作通知系统。并将laravel-echo用于客户端。

我用于客户端组件以测试连接是否有效的代码是：

$('.grid-stack').on('gsresizestop', function(event, elem) {
    chart.reflow();
});

这是// Needed by laravel-echo window.io = require('socket.io-client') let token = this.$store.getters.token let echo = new Echo({ broadcaster: 'socket.io', host: 'http://localhost:6001', auth: { headers: { authorization: 'Bearer ' + token, 'X-CSRF-TOKEN': 'too_long_csrf_token_hardcoded' } } }) echo.private('Prova').listen('Prova', () => { console.log('IT WORKS!') })

的代码

laravel-echo-server.json

我试图修改 apiOriginsAllow 但没有成功。事件已发送，我可以在 laravel-echo-server 日志中看到它：

{
    "authHost": "http://gac-backend.test",
    "authEndpoint": "/broadcasting/auth",
    "clients": [],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "apiOriginAllow": {
        "allowCors": false,
        "allowOrigin": "",
        "allowMethods": "",
        "allowHeaders": ""
    }
}

但在那之后，当我访问包含连接代码的客户端组件时，我可以在laravel-echo-server日志中看到长错误跟踪和下一个错误：

Channel: Prova
Event: App\Events\Prova

如您所见，我将csrf令牌和授权令牌指定到laravel echo client的头文件中。但它没有用。

这是The client cannot be authenticated, got HTTP status 419的代码：

routes/channels.php

我只想听一个事件，如果它是私有的或公开的，那么它并不重要，因为当它工作时，我想把它放到服务工作者身上。然后，我想如果它是公开的那就更好。

如何在laravel项目中使用laravel echo客户端？
如果我制作私人活动并尝试将其收听服务工作人员会有问题吗？

Answer 1

您好我将为您提供如何使用Laravel和Echo功能配置VUE的整个步骤

Step1 首先安装laravel

composer create-project laravel/laravel your-project-name 5.4.*

第2步设置变量更改Broadcastserviceprovider

我们首先需要注册App\Providers\BroadcastServiceProvider。打开config/app.php并取消注释providers数组中的以下行。

// App\Providers\BroadcastServiceProvider

我们需要告诉Laravel我们在.env文件中使用Pusher驱动程序：

BROADCAST_DRIVER=pusher

在config / app.php中添加pusher类

'Pusher' => Pusher\Pusher::class,

第3步在您的laravel项目中添加Pusher

composer require pusher/pusher-php-server

第4步将以下内容添加到config / broadcasting.php

'options' => [
          'cluster' => env('PUSHER_CLUSTER'),
          'encrypted' => true,
      ],

第5步设置推杆变量

PUSHER_APP_ID=xxxxxx
PUSHER_APP_KEY=xxxxxxxxxxxxxxxxxxxx
PUSHER_APP_SECRET=xxxxxxxxxxxxxxxxxxxx
PUSHER_CLUSTER=xx

第6步安装节点

npm install

STEP 7 安装Pusher js

npm install --save laravel-echo pusher-js

STEP 8 uncommnet关注

// resources/assets/js/bootstrap.js

import Echo from "laravel-echo"

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'xxxxxxxxxxxxxxxxxxxx',
    cluster: 'eu',
    encrypted: true
});

第9步在创建迁移之前

// app/Providers/AppServiceProvider.php
// remember to use
Illuminate\Support\Facades\Schema;

public function boot()
{
  Schema::defaultStringLength(191);
}

Answer 2

用于套接字io

npm install socket.io --save

如果你得到无效的fram标头，请在bootstrap.js中设置auth终点，如下所示

window.Echo = new Echo({ authEndpoint : 'http://project/broadcasting/auth', broadcaster: 'pusher', key: '63882dbaf334b78ff949', cluster: 'ap2', encrypted: true });

Answer 3

我使用Vuex启动客户端侦听器。然后，当我的应用程序启动时，我调度动作INIT_CHANNEL_LISTENERS来启动侦听器。

渠道MODULE vuex的index.js

import actions from './actions'
import Echo from 'laravel-echo'
import getters from './getters'
import mutations from './mutations'

window.io = require('socket.io-client')

export default {
  state: {
    channel_listening: false,
    echo: new Echo({
      broadcaster: 'socket.io',
      // host: 'http://localhost:6001'
      host: process.env.CHANNEL_URL
    }),
    notifiable_public_channels: [
      {
        channel: 'Notificacio',
        event: 'Notificacio'
      },
      {
        channel: 'EstatRepetidor',
        event: 'BroadcastEstatRepetidor'
      }
    ]
  },
  actions,
  getters,
  mutations
}

渠道MODULE vuex的actions.js

import * as actions from '../action-types'
import { notifyMe } from '../../helpers'
// import { notifyMe } from '../../helpers'

export default {
  /*
  * S'entent com a notifiable un event que té "títol" i "message" (Per introduir-los a la notificació)
  * */
  /**
   * Inicialitza tots els listeners per als canals. Creat de forma que es pugui ampliar.
   * En cas de voler afegir més canals "Notifiables" s'ha de afegir un registre al state del index.js d'aquest modul.
   * @param context
   */
  [ actions.INIT_CHANNEL_LISTENERS ] (context) {
    console.log('Initializing channel listeners...')
    context.commit('SET_CHANNEL_LISTENING', true)

    context.getters.notifiable_public_channels.forEach(listener => {
      context.dispatch(actions.INIT_PUBLIC_NOTIFIABLE_CHANNEL_LISTENER, listener)
    })
    // }
  },

  /**
   * Inicialitza un event notificable a través d'un canal.
   * Per anar bé hauria de tenir un titol i un missatge.
   * @param context
   * @param listener
   */
  [ actions.INIT_PUBLIC_NOTIFIABLE_CHANNEL_LISTENER ] (context, listener) {
    context.getters.echo.channel(listener.channel).listen(listener.event, payload => {
      notifyMe(payload.message, payload.title)
    })
  }
}

帮助器中的

notifyMe功能 该功能在浏览器上调度通知

export function notifyMe (message, titol = 'TITLE', icon = icon) {
  if (!('Notification' in window)) {
    console.error('This browser does not support desktop notification')
  } else if (Notification.permission === 'granted') {
    let notification = new Notification(titol, {
      icon: icon,
      body: message,
      vibrate: [100, 50, 100],
      data: {
        dateOfArrival: Date.now(),
        primaryKey: 1
      }
    })
  }

然后，后端使用laravel-echo-server这样的问题。在服务器启动时，使用 redis 将事件排队，使用 supervisor 启动laravel-echo-server。

如何将laravel-echo客户端实现到Vue项目中

3 个答案: