README

Laravel 消息传递套件 UI。

消息传递 UI

为与 baskarcm/tzi-chat-ui 一起使用而准备的 UI 和 web 路由。

备注

• 此包提供用于消费 messenger API 的 web 路由和已发布的 UI。不会为您设置身份验证路由/系统。
• 我们编译的 NotifyManager.js 使用 Laravel Echo 和 pusher-js 库。
• 对于 WebSockets，此包直接支持 pusher.com，或使用直接替换的 laravel-websockets。
  • 下面提供了设置您选择的 WebSocket 实现的说明。
• 发布我们的 views 后，您可能需要根据需要编辑它们。
• 计划中的未来版本将使用 react 编写。

安装

通过 Composer

composer require baskarcm/tzi-chat-ui

发布资产和配置

• 这将发布我们的 JS 资产、图像、视图和配置。

php artisan tzi:chat:ui:publish

• 当使用 Composer 更新此包时，我们建议重新发布我们的 JS/CSS 资产

php artisan vendor:publish --tag=tzi-chat-ui.assets --force

配置

默认

'site_name' => env('MESSENGER_SITE_NAME', 'Messenger'),

'websocket' => [
    'pusher' => env('MESSENGER_SOCKET_PUSHER', false),
    'host' => env('MESSENGER_SOCKET_HOST', 'localhost'),
    'auth_endpoint' => env('MESSENGER_SOCKET_AUTH_ENDPOINT', '/api/broadcasting/auth'),
    'key' => env('MESSENGER_SOCKET_KEY'),
    'port' => env('MESSENGER_SOCKET_PORT', 6001),
    'use_tsl' => env('MESSENGER_SOCKET_TLS', false),
    'cluster' => env('MESSENGER_SOCKET_CLUSTER'),
],

'routing' => [
    'domain' => null,
    'prefix' => 'messenger',
    'middleware' => ['web', 'auth', 'messenger.provider'],
    'invite_middleware' => ['web', 'messenger.provider'],
],

• site_name 在我们的视图中用于注入导航栏中的名称。
• websocket:
  • 当使用真实的 pusher.com 时，您需要将 pusher 设置为 true，添加您的 cluster 和 key。
  • 当使用 laravel-websockets 时，您将 pusher 留为 false，忽略 cluster，并设置您的 host、port 和 key。
  • auth_endpoint 用于您的 Laravel 后端授权访问我们的消息传递频道。默认的 messenger.php 配置将频道路由的前缀设置为 api，因此上面的默认配置在未设置时使用 /api/broadcasting/auth。
• routing 您可以选择您想要的端点域、前缀和中间件。
  • 邀请加入 web 路由您可以从其他 web 路由中定义单独的中间件，因为您可能希望允许访客查看该页面。
  • 默认的 messenger.provider 中间件包含在 messenger 中，它通过从 $request->user() 获取已认证的用户来简单地设置活动的消息传递提供者。

使用 Pusher

• 在您准备好 Pusher 凭据后，您应该安装 Pusher SDK

composer require pusher/pusher-php-server

• 安装后，设置您的 .env 变量

默认 broadcasting.php 配置

'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'),
        'useTLS' => false,
    ],
], 

.env 中的键，用于 Pusher 和我们的 UI

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=YourPusherId
PUSHER_APP_KEY=YourPusherKey
PUSHER_APP_SECRET=YourPusherSecret
PUSHER_APP_CLUSTER=YourPusherCluster
MESSENGER_SOCKET_PUSHER=true
MESSENGER_SOCKET_KEY="${PUSHER_APP_KEY}"
MESSENGER_SOCKET_CLUSTER="${PUSHER_APP_CLUSTER}"

• 您已经设置好了！我们的 UI 将连接到您的 Pusher 账户。如果您想启用客户端之间的客户端事件，请确保在您的 Pusher 账户中启用 client events。

使用 laravel-websockets

• 首先，您需要安装 WebSocket 包（此包已使用 laravel-websockets v1.12 进行测试）。
• 理想情况下，如果您正在进行全新安装，应遵循 beyondcode 的官方 安装文档。

composer require beyondcode/laravel-websockets "^1.12"

• 一旦安装和配置了 WebSocket 包，设置您的 .env 变量并更新默认的 Pusher 配置

根据 beyondcode 的文档更新 broadcasting.php 配置

'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' => 'localhost',
        'port' => 6001,
        'scheme' => 'http'
    ],
],

用于 laravel-websockets 和我们的 UI 的 .env 配置键

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=MakeYourID
PUSHER_APP_KEY=MakeYourKey
PUSHER_APP_SECRET=MakeYourSecret
MESSENGER_SOCKET_HOST=localhost
MESSENGER_SOCKET_KEY="${PUSHER_APP_KEY}"

• 一切准备就绪！我们的 UI 将连接到运行 php artisan websockets:serve 的服务器。如果您想启用客户端之间的客户端事件，请确保在 laravel-websockets 的配置中启用了 client events。