basement chat 다운로드 - basement chat 소스코드 다운로드

basement chat

AI 소스 코드

v1.1.1

다운로드

basement chat

Laravel 애플리케이션에 실시간 채팅 위젯을 추가하세요.

지하실-chat.webm

소개

이 패키지를 사용하면 원활하게 통합된 동적 및 대화형 실시간 채팅 위젯 기능을 제공하여 사용자 참여를 강화하고, 협업을 촉진하며, 기존 Laravel 애플리케이션 내에서 즉각적인 커뮤니케이션을 촉진할 수 있습니다.

하찮은 일

Basement 이름은 Ready Player One의 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
```
Laravel 애플리케이션과 basement chat 통합을 시작하세요:
```
 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>
```
- 에이블리(확대하려면 여기를 클릭하세요)
  Aly 계정에 새 앱을 만든 후 .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 웹소켓(확장하려면 여기를 클릭하세요)
  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 Stateful 도메인 구성
이 패키지는 Laravel Sanctum을 기본 인증 시스템으로 사용하므로 현재 사용 중인 도메인과 동등한 SANCTUM_STATEFUL_DOMAINS 사용하도록 .env 구성해야 합니다.
```
 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 개체에 다음 패키지를 할당했는지 확인하세요.
    - window.Alpine 으로 @alpinejs/intersect@^3 플러그인을 사용하는 alpinejs@^3
    - window.axios 로서의 axios@^1
    - 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 인수로 사용
      esm 대신 cjs 모듈을 사용하는 경우 .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 파일을 열고 다음과 같은 스타일 속성을 추가하세요.

<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 명령이 실행된 후 위 명령을 자동으로 실행하려면 post-update-cmd 스크립트에 이를 추가하여 composer.json 구성할 수 있습니다.

"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/**',
+      ],
+    },
+  },
});

경로 캐시 사용 시 브로드캐스트 인증 오류

basement chat 패키지가 시작되지 않을 수 있으며 php artisan route:cache 명령을 사용할 때 브라우저 콘솔에서 broadcasting/auth 엔드포인트에 액세스할 때 403 Forbidden - HTTP 오류가 발생할 수 있습니다. 이 문제에 대한 해결책은 아직 추가 조사 중이므로 현재로서는 경로 캐싱 기능을 사용하지 않는 것이 좋습니다.