php - 如何在 Vue 项目中实现 laravel-echo 客户端

问题描述

我正在开发一个使用Vuetify (Vue.js) 作为前端的应用程序，它与 api 通信到laravel后端服务器。

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

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

// 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

{
    "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": ""
    }
}

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

Channel: Prova
Event: App\Events\Prova

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

The client cannot be authenticated, got HTTP status 419

如您所见，我在 laravel echo 客户端的标头中指定了 csrf 令牌和授权令牌。但它不起作用。

这是代码routes/channels.php：

Broadcast::channel('Prova', function ($user) {
    return true;
});

我只想听一个事件，它是私有的还是公共的并不重要，因为当它工作时，我想把它放到服务工作者中。然后，我想如果它是公开的会更好。

如何在 laravel 项目中使用 laravel echo 客户端？
如果我制作私人事件并尝试将其监听到服务人员中会出现问题吗？

标签： phplaraveleventsvue.jsbroadcast

解决方案

您好，我正在向您介绍如何使用 Laravel 和 Echo 功能配置 VUE

Step1先安装laravel

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

STEP 2设置变量更改 Broadcastserviceprovider

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

// App\Providers\BroadcastServiceProvider

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

BROADCAST_DRIVER=pusher

在 config/app.php 中添加 pusher 类

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

STEP 3在你的 laravel 项目中添加一个 Pusher

composer require pusher/pusher-php-server

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

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

步骤 5设置 Pusher 变量

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取消关注

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

php - 如何在 Vue 项目中实现 laravel-echo 客户端

问题描述

解决方案

推荐阅读