laravel-websockets 构建实时应用

技术选型

后端选择 laravel-websockets
前端选择 laravel-echo

(后端) 安装和配置 laravel-weboskcets

1. 安装扩展包

composer require beyondcode/laravel-websockets

2. 发布扩展包配置文件及迁移文件

php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"

3. 运行数据库迁移文件

php artisan migrate

4. 发布 laravel-websockets 配置文件

php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

5. 安装 pusher 的 php 扩展包 (laravel-websockets 的 api 完全兼容 pusher, 这里需要安装)

composer require pusher/pusher-php-server

6. 修改.env 文件中广播程序的驱动为 pusher

BROADCAST_DRIVER=pusher
...
PUSHER_APP_ID=1550961
PUSHER_APP_KEY=aff393dc10bdxxxxxxxx
PUSHER_APP_SECRET=9d60158e889exxxxxxxx
PUSHER_APP_CLUSTER=mt1

7. 设置 config/broadcasting.php 中 pusher 配置

• 默认情况下，Laravel 应用程序广播到 WebSocket 服务器时，是将事件信息发送到官方 Pusher 服务器。但是由于 Laravel WebSockets 包附带了自己的 Pusher API 实现，因此我们需要告诉 Laravel 将事件发送到我们自己的服务器。

'pusher' => [
    'driver' => 'pusher',
    'key' => env('PUSHER_APP_KEY'),
    'secret' => env('PUSHER_APP_SECRET'),
    'app_id' => env('PUSHER_APP_ID'),
    'options' => [
        'cluster' => env('PUSHER_APP_CLUSTER'),
        'encrypted' => true,
        'host' => 'www.la.com',
        'port' => 6001,
        'scheme' => 'http'
    ],
],

8. 配置 websockets 应用 config/websockets.php

• 一般情况下默认即可

前端 laravel-echo 配置使用

• 安装 laravel-echo 和 pusher-js 依赖

npm install --save laravel-echo pusher-js

• resources/js/bootstrap.js

import Echo from "laravel-echo";

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'aff393dc10bdxxxxxxxx',
    #wsHost: window.location.hostname,
    wsHost: "www.la.com",
    wsPort: 6001,
    cluster: 'mt1',
    forceTLS: false,
    disableStats: true,
});

• 让前端项目跑起来

npm run dev

• 开启 websocket 服务

php artisan websockets:serve

• 在 chrome 调试工具里面看 ws 日志
  
• 查看 laravel-websockets 日志
  
• 至此，前端使用 laravel-echo 跟后端 laravel-websockets 已经互通了.

操作实例

// 创建文件
php artisan make:event MyEvent

• app/Events/MyEvent.php

<?php
namespace App\Events;

use Illuminate\Queue\SerializesModels;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

//class MyEvent implements ShouldBroadcastNow// 不走队列
class MyEvent implements ShouldBroadcast//走队列，请先开启队列 php artisan queue:work --queue=your-queue-name--daemon
{
  use Dispatchable, InteractsWithSockets, SerializesModels;

//    public $broadcastQueue = 'your-queue-name';
  public $message;

  public function __construct($message)
  {
      $this->message = $message;
  }

  public function broadcastOn()
  {
      return ['my-channel'];
  }

  public function broadcastAs()
  {
      return 'my-event';
  }
  
  public function broadcastWith()
    {
        return ['message' => $this->message, 'status' => 'ok']; // 定义客户端真正接收到的信息内容
    }
}

• routes/web.php

Route::get('/test', function () {
	return event(new \App\Events\MyEvent('hello world'));
})->name('test');

• 前端监听

var channel = Echo.channel('my-channel');
channel.listen('.my-event', function(data) {
    alert(JSON.stringify(data));
});