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 錯誤。該問題的解決方案仍在進一步研究中，建議您此時不要使用路由快取功能。