basement chat下载 - basement chat源码下载

basement chat

Ai源码

v1.1.1

下载

basement chat

向您的 Laravel 应用程序添加实时聊天小部件。

地下室聊天.webm

介绍

借助此软件包，您可以通过提供无缝集成的动态和交互式实时聊天小部件功能来增强用户参与度、促进协作并促进现有 Laravel 应用程序中的即时通信。

琐事

地下室名称的灵感来自于《头号玩家》中 Aech 的私人聊天室。

特征

实时消息
用户在线状态
用户打字指示器
消息已读状态
来自客户端的可配置推送通知
可搜索的联系人和消息
可扩展和可定制的操作行为
带有无限滚动消息的延迟加载
使用 TailwindCSS 和 Alpine.js 进行直观且有吸引力的设计
可与Bootstrap、TailwindCSS等多种CSS前端框架配合使用，无需担心样式冲突
灵活的广播驱动程序支持，Pusher、Ably、Soketi、Laravel Websockets 或任何其他 Laravel 支持的广播驱动程序，由您决定。

演示

这是使用 Laravel Breeze 的脚手架演示。

安装

要求：

服务器端： php ^8.0和laravel/framework ^9.0.0 | ^10.0.0安装在您的项目中。
客户端： chrome >= 80 、 edge >= 80 、 firefox >= 74或同等版本。请参阅此处的详细信息。

安装步骤：

打开终端，并确保您位于 Laravel 项目目录中。

使用以下命令安装此软件包：

 composer require basement-chat/basement-chat

开始将basement chat与您的 Laravel 应用程序集成：
```
 php artisan basement:install
```
上面的命令会将配置、资产和迁移文件发布到您的 Laravel 应用程序。另一方面，它还会询问交互式问题来运行数据库迁移，并要求您安装将使用哪个广播驱动程序。

选择广播驱动程序

在选择广播驱动程序之前，您需要通过取消注释或将其添加到config/app.php中的providers来确保启用BroadcastServiceProvider::class

/*
 * Application Service Providers...
 */
AppProvidersAppServiceProvider::class,
AppProvidersAuthServiceProvider::class,
- // AppProvidersBroadcastServiceProvider::class,
+ AppProvidersBroadcastServiceProvider::class,
AppProvidersEventServiceProvider::class,
AppProvidersRouteServiceProvider::class,

然后您可以选择以下驱动程序之一：

如果您在上一步中不小心错过了安装驱动程序，可以使用php artisan basement:install driver命令重新安装。

推手（点击此处展开）

在 Pusher 帐户中创建新频道后，您需要通过提供相关配置来配置 Laravel .env ：

 BASEMENT_BROADCAST_DRIVER =pusher
BROADCAST_DRIVER =pusher
PUSHER_APP_ID =<replace-with-your-pusher-app-id>
PUSHER_APP_KEY =<replace-with-your-pusher-key>
PUSHER_APP_SECRET =<replace-with-your-pusher-secret>
PUSHER_APP_CLUSTER =<replace-with-your-pusher-cluster>

能力（点击此处展开）

在您的 Ably 帐户中创建新应用程序后，在.env中提供相关配置：

 BASEMENT_BROADCAST_DRIVER =ably
BROADCAST_DRIVER =ably
ABLY_KEY =<replace-with-your-ably-key>
ABLY_PUBLIC_KEY =<replace-with-your-ably-public-key>

Soketi（点击此处展开）

首先使用以下配置配置您的.env ：

 BASEMENT_BROADCAST_DRIVER =soketi
BROADCAST_DRIVER =pusher
PUSHER_APP_ID =app-id
PUSHER_APP_KEY =app-key
PUSHER_APP_SECRET =app-secret
PUSHER_HOST =127.0.0.1
PUSHER_PORT =6001
PUSHER_SCHEME =http

然后，当您想在应用程序中使用聊天功能时，请使用以下命令保持 Soketi 服务器运行：

 npx soketi start

Laravel Websockets（单击此处展开）

与 Soketi 类似，您需要先配置.env ，配置如下：

 BASEMENT_BROADCAST_DRIVER =laravel-websockets
BROADCAST_DRIVER =pusher
PUSHER_APP_ID =app-id
PUSHER_APP_KEY =app-key
PUSHER_APP_SECRET =app-secret
PUSHER_HOST =127.0.0.1
PUSHER_PORT =6001
PUSHER_SCHEME =http

然后，当您想在应用程序中使用聊天功能时，请使用以下命令保持 Laravel Websockets 服务器运行：

 php artisan websockets:serve

配置您的 Sanctum 有状态域
由于此包使用 Laravel Sanctum 作为主要身份验证系统，因此您需要配置.env以使用与您当前使用的域等效的SANCTUM_STATEFUL_DOMAINS ：
```
 SANCTUM_STATEFUL_DOMAINS=<your-app-domain>
```
示例： basement.up.railway.app ， 127.0.0.1:8080

为您的用户模型实现basement chat功能

在您的用户模型中（默认情况下使用app/Models/User.php ），对其进行修改，使其实现BasementChatBasementContractsUser并使用BasementChatBasementTraitsHasPrivateMessages特征

<?php

namespace AppModels;

+ use BasementChatBasementContractsUser as BasementUserContract;
+ use BasementChatBasementTraitsHasPrivateMessages;

...

- class User extends Authenticatable
+ class User extends Authenticatable implements BasementUserContract
{
+     use HasPrivateMessages;

      ...
}

将basement chat组件加载到您的视图中
要添加聊天框组件，请将其加载到用户已登录的.blade视图文件中。例如，如果您使用 Laravel Breeze，则路径应位于resources/views/layouts/app.blade.php中。然后，在结束</body>标记之前添加<x-basement::chat-box />行。
```
<!DOCTYPE html>
<html lang="en">
<head>
  ...
</head>
<body>
  ...

+ <x-basement::chat-box />
</body>
</html>
```
选择如何使用前端资源
有两种方法可以使用此包的前端资源。您可以使用以下其中一项：
- 直接通过link和script标签使用预捆绑的资源
  这是将basement chat前端资产与现有 Laravel 应用程序集成的最简单方法。请注意，此捆绑包还将以下包设置为您的全局window对象：
  - window.Alpine
  - window.axios
  - window.Pusher
  - window.Echo
  在与上一步添加聊天框组件的同一文件中，您需要加载basement chat .css和.js文件：
```
<!DOCTYPE html>
<html lang="en">
<head>
    ...

+    <link rel="stylesheet" href="{{ asset('vendor/basement/basement.bundle.min.css') }}">
</head>
<body>
    ...

   <x-basement::chat-box />
+  <script src="{{ asset('vendor/basement/basement.bundle.min.js') }}"></script>
</body>
</html>
```
- 通过导入到捆绑包中来实现更强大的方法
  您还可以将basement chat库作为模块导入到您自己的.js文件中并自行捆绑。
  - 首先，确保将以下包分配给全局window对象：
    - alpinejs@^3与@alpinejs/intersect@^3插件作为window.Alpine
    - axios@^1作为window.axios
    - laravel-echo@^1作为window.Echo
    - pusher-js@^7作为window.Pusher
      要自动安装上述依赖项，可以使用以下命令：
      php artisan basement:install frontend_deps
  - 然后，您需要导入以下模块：
    - vendor/basement-chat/basement-chat/dist/basement.bundle.min.css
    - vendor/basement-chat/basement-chat/dist/basement.plugin.esm作为 Alpine.js 插件
    - vendor/basement-chat/basement-chat/dist/basement.echo-options.esm作为 Laravel Echo 参数
      如果您使用 cjs 模块而不是 esm，则可以将.esm后缀更改为.common 。
  - resources/js/app.js中的完整工作示例如下所示：
    import '../../vendor/basement-chat/basement-chat/dist/basement.bundle.min.css' import axios from 'axios' import Pusher from 'pusher-js' import Echo from 'laravel-echo' import Alpine from 'alpinejs' import intersect from '@alpinejs/intersect' import echoOptions from '../../vendor/basement-chat/basement-chat/dist/basement.echo-options.esm' import basement from '../../vendor/basement-chat/basement-chat/dist/basement.plugin.esm' window . axios = axios window . Pusher = Pusher window . Echo = new Echo ( echoOptions ) window . Alpine = Alpine window . Alpine . plugin ( intersect ) window . Alpine . plugin ( basement ) window . Alpine . start ( )

配置

该包发布了config/basement.php配置文件，并提供了配置broadcaster 、 chat_box_widget_position 、 user_model 、 avatar和middleware的选项。有关可配置内容的更多详细信息，请参阅此文件。

高级定制

除了通过config/basement.php文件进行配置之外，您还可以通过更改类实现或覆盖默认方法来进一步自定义。让我们探讨一下可以使用此功能执行的一些用例：

更改联系人中显示的姓名

默认情况下， basement chat包将在您的联系人列表中显示用户的全名。如果您想显示姓氏，则可以重写getNameAttribute ，如下例所示：

 <?php

namespace App  Models ;

use BasementChat  Basement  Contracts  User as BasementUserContract ;
use BasementChat  Basement  Traits  HasPrivateMessages ;

class User extends Authenticatable implements BasementUserContract
{
    use HasPrivateMessages;

    . . .

    /**
     * Get the user's last name instead of the user's full name.
     */
    public function getNameAttribute(): string
    {
        return str ( $ this -> attributes [ ' name ' ])-> explode ( ' ' )-> last ();
    }
}

使用自定义头像

就像您更改联系人中显示的姓名一样。您还可以覆盖默认的getAvatarAttribute来更改联系人的头像。

 <?php

namespace App  Models ;

use BasementChat  Basement  Contracts  User as BasementUserContract ;
use BasementChat  Basement  Traits  HasPrivateMessages ;

class User extends Authenticatable implements BasementUserContract
{
    use HasPrivateMessages;

    . . .

    /**
     * Get the user's avatar url.
     */
    public function getAvatarAttribute(): string
    {
        return $ this -> attributes [ ' image_url ' ];
    }
}

为特定用户提供聊天功能

您还可以有条件地向特定用户提供聊天功能，而不是向所有可用用户提供聊天功能。例如，如果您正在使用 spatie/laravel-permission 并希望仅为administrator角色提供聊天功能：

 // app/Actions/AllContacts.php
<?php

namespace App  Actions ;

use App  Models  User ;
use BasementChat  Basement  Actions  AllContacts as BasementAllContactsAction ;
use BasementChat  Basement  Data  ContactData ;
use Illuminate  Contracts  Auth  Authenticatable ;
use Illuminate  Database  Eloquent  Builder as EloquentBuilder ;
use Illuminate  Database  Eloquent  Collection as EloquentCollection ;
use Illuminate  Support  Collection ;

class AllContacts extends BasementAllContactsAction
{
    /**
     * Extend and override the default method for getting all contacts.
     * Only users with the administrator role will appear in the contact list.
     */
    public function all ( Authenticatable $ user ): Collection
    {
        /** @var EloquentCollection<int,User> $contacts */
        $ contacts = User:: addSelectLastPrivateMessageId ( $ user )
            -> addSelectUnreadMessages ( $ user )
            -> whereHas ( ' roles ' , function ( EloquentBuilder $ query ): void {
                $ query -> where ( ' name ' , ' administrator ' );
            })
            -> get ();

        $ contacts -> append ( ' avatar ' );
        $ contacts -> load ( ' lastPrivateMessage ' );

        return $ contacts
            -> sortByDesc ( ' lastPrivateMessage.id ' )
            -> values ()
            -> map ( fn ( Authenticatable $ contact ): ContactData => $ this -> convertToContactData ( $ contact ));
    }
}

 // app/Providers/AppServiceProvider.php
<?php

namespace App  Providers ;

use App  Actions  AllContacts ;
use BasementChat  Basement  Basement ;
use Illuminate  Support  ServiceProvider ;

class AppServiceProvider extends ServiceProvider
{
    ...

    /**
     * Bootstrap any application services.
     */
    public function boot (): void
    {
        // Override the default action with your customized AllContacts action.
        Basement:: allContactsUsing (AllContacts::class);
    }
}

以下是可用于覆盖其他操作和模型的函数列表：

Basement:: useUserModel (User::class);
Basement:: usePrivateMessageModel (PrivateMessage::class);
PrivateMessage:: observe (PrivateMessageObserver::class);

Basement:: allContactsUsing (AllContacts::class);
Basement:: allPrivateMessagesUsing (AllPrivateMessages::class);
Basement:: markPrivateMessagesAsReadUsing (MarkPrivatesMessagesAsRead::class);
Basement:: sendPrivateMessagesUsing (SendPrivateMessage::class);

 <!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html >
< html lang =" en " >
  < head >
    ...
  </ head >
  < body >
    ...

    <!-- The chat box component button will only be available if the current user is an administrator -->
    @role('administrator')
      < x-basement::chat-box />
    @endrole
  </ body >
</ html >

自定义视图样式

还可以自定义视图样式。例如，您可以执行以下步骤来更改聊天框组件的标题和图标的颜色：

使用以下命令发布视图：

 php artisan vendor:publish --tag=basement-views

打开resources/views/vendor/basement/components/organisms/header.blade.php文件，然后添加 style 属性，如下所示：

<header {{ $attributes->merge([
  'class' => 'bm-grid bm-grid-cols-5 bm-border-b bm-border-gray-300 bm-p-3 bm-bg-blue-500 bm-text-white bm-rounded-t-md',
+ 'style' => 'background-color: cornflowerblue;',
]) }}>
  ...
</header>

打开resources/views/vendor/basement/chat-box.blade.php文件，添加文本颜色样式：

<div class="basement">
  <div ...>

    <button
+     style="color: cornflowerblue"
      x-on:click="isMinimized = false"
      x-bind:class="isMinimized === true ? '' : 'bm-hidden'"
      x-bind:data-title="totalUnreadMessages === 0 ? 'Open chat box' : `There are ${totalUnreadMessages} unread messages`"
      class="basement-chat-box__open-button bm-w-full bm-h-full bm-rounded-full bm-text-blue-500 bm-border bm-bg-white bm-transition bm-duration-500 hover:bm-text-white hover:bm-bg-blue-500 bm-shadow-lg">
      ...
    </button>

    ...
  </div>
</div>

额外说明和故障排除

更新包

当您使用预先捆绑的资源时。每次使用composer update更新此包后，您都需要使用以下命令使资产文件保持最新：

 php artisan vendor:publish --tag=basement-assets --force

或者，要在执行update命令后自动运行上述命令，您可以通过将composer.json添加到post-update-cmd脚本中来配置它：

"scripts": {
  "post-update-cmd": [
    "@php artisan vendor:publish --tag=laravel-assets --ansi --force",
+   "@php artisan vendor:publish --tag=basement-assets --ansi --force"
  ]
},

修复 Vite 内存泄漏

当您使用 Vite 开发服务器并获得非常高的内存使用率时，您可以配置vite.config.js以忽略监视供应商文件夹，如下例所示：

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'

export default defineConfig({
+  server: {
+    watch: {
+      ignored: [
+        './vendor/**',
+      ],
+    },
+  },
});

使用路由缓存时广播身份验证错误

当您使用php artisan route:cache命令时， basement chat包可能无法启动，并且在浏览器控制台中访问broadcasting/auth端点时，您可能会收到 403 Forbidden - HTTP 错误。该问题的解决方案仍在进一步研究中，建议您此时不要使用路由缓存功能。