在 Vue 前端使用 Pusher 和 Laravel Echo 实现 Laravel 8 广播

Question

我正在尝试使用 laravel 实现事件广播和通知。目标是通过通知向登录用户广播私人消息。

我创建了这个活动，见下面的代码：

<?php

namespace App\Events;

use App\Models\User;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class TradingAccountActivation implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

     /**
     * The authenticated user.
     *
     * @var \Illuminate\Contracts\Auth\Authenticatable
     */
    public $user;
    public $message;

    /**
     * Create a new event instance.
     *
     * @param  \Illuminate\Contracts\Auth\Authenticatable  $user
     * @return void
     */
    public function __construct(User $user)
    {
        $this->user = $user;
        $this->message = "{$user->first_name} is ready to trade";
    }

   
    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('user.'.$this->user->id);
    }

}

每个新验证的用户都会触发该事件，所以我将事件放在项目的电子邮件验证控制器中，请参见下面的代码：

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Auth\Events\Verified;
use App\Events\TradingAccountActivation;
use Illuminate\Foundation\Auth\EmailVerificationRequest;
class VerifyEmailController extends Controller
{
    /**
     * Mark the authenticated user's email address as verified.
     *
     * @param  \Illuminate\Foundation\Auth\EmailVerificationRequest  $request
     * @return \Illuminate\Http\RedirectResponse
     */
    public function __invoke(EmailVerificationRequest $request)
    {
        if ($request->user()->hasVerifiedEmail()) {
            return redirect()->intended(RouteServiceProvider::HOME.'?verified=1');
        }

        if ($request->user()->markEmailAsVerified()) {
            event(new Verified($request->user()));
        } 

        event(new TradingAccountActivation($request->user()));
        return redirect()->intended(RouteServiceProvider::HOME.'?verified=1');
           
    }
}

此时事件失败并显示此错误消息：

ErrorException
array_merge(): Expected parameter 2 to be an array, null given

堆栈跟踪指向带有星号的行上的推送器：

Illuminate\Foundation\Bootstrap\HandleExceptions::handleError
C:\xampp\htdocs\spa\vendor\pusher\pusher-php-server\src\Pusher.php:391

        $path = $this->settings['base_path'].'/events';

         // json_encode might return false on failure

        if (!$data_encoded) {

            $this->log('Failed to perform json_encode on the the provided data: {error}', array(

                'error' => print_r($data, true),

            ), LogLevel::ERROR);

        }

         $post_params = array();

        $post_params['name'] = $event;

        $post_params['data'] = $data_encoded;

        $post_params['channels'] = array_values($channels);

    *    $all_params = array_merge($post_params, $params);

         $post_value = json_encode($all_params);

         $query_params['body_md5'] = md5($post_value);

Laravel Telescope 确认事件失败并提供以下详细信息：

工作详情时间 2021 年 4 月 6 日，9:05:01 上午（1:56 分钟前）主机名 Adefowowe-PC 状态失败工作 App\Events\TradingAccountActivation 连接同步队列
尝试 - 暂停 - 标签 App\Models\User:75Auth:75failed 认证用户编号 75 电子邮件地址 j@doe.com

连同事件要发出的数据：

{
"event": {
"class": "App\Events\TradingAccountActivation",
"properties": {
"user": {
"id": 75,
"uuid": "75da67ef-d6f8-4cd0-9d57-e1dcf66c1f5e",
"first_name": "John",
"last_name": "Doe",
"mobile_phone_number": "08033581133",
"verification_code": null,
"phone_number_isVerified": 0,
"phone_number_verified_at": null,
"email": "j@doe.com",
"email_verified_at": "2021-04-06T08:04:49.000000Z",
"created_at": "2021-04-06T08:03:56.000000Z",
"updated_at": "2021-04-06T08:04:49.000000Z"
},
"message": "John is ready to trade",
"socket": null
}
},
"tries": null,
"timeout": null,
"connection": null,
"queue": null,
"chainConnection": null,
"chainQueue": null,
"chainCatchCallbacks": null,
"delay": null,
"afterCommit": null,
"middleware": [
],
"chained": [
]
}

奇怪的是，尽管事件失败，但似乎已创建广播频道并建立连接。刷新错误页面似乎可以继续执行控制器的下一个操作，即重定向到经过身份验证的用户的仪表板。至此广播连接建立。请参阅下面的 Laravel Telescope 详细信息和负载：

Request Details
Time    April 6th 2021, 10:02:38 AM (10s ago)
Hostname    Adefowowe-PC
Method  POST
Controller Action   \Illuminate\Broadcasting\BroadcastController@authenticate
Middleware  auth:web
Path    /broadcasting/auth
Status  302
Duration    1043 ms
IP Address  127.0.0.1
Memory usage    12 MB
Payload
Headers
Session
Response
{
"socket_id": "131623.12865758",
"channel_name": "private-user.${this.user.id}"
}

由于事件失败，我没想到会建立广播频道或触发后续的侦听器和通知广播消息。

我无法弄清楚事件失败的原因，即如何处理异常“array_merge()：预期参数 2 为数组，给定为空”，或如何修复它。

或者与receiving/logging/displaying广播消息的后续代码有关。

谢谢。

Answer 1

此问题已在 8.29.0 版本中解决。您需要升级到指定的版本，或者降级 pusher-http-php (composer require pusher/pusher-php-server ^4.1)

的版本

在 Vue 前端使用 Pusher 和 Laravel Echo 实现 Laravel 8 广播

Implementing Laravel 8 broadcasting with Pusher and Laravel Echo in a Vue frontend

vue.js

laravel-8

pusher

laravel-echo

pusher-js