หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>โค้ดแหล่งที่มา AI
ดาวน์โหลด

basement chat

เพิ่มวิดเจ็ตการแชทแบบเรียลไทม์ให้กับแอปพลิเคชัน Laravel ของคุณ

ชั้นใต้ดิน-chat.webm

สารบัญ

  • การแนะนำ
  • คุณสมบัติ
  • การสาธิต
  • การติดตั้ง
  • การกำหนดค่า
  • การปรับแต่งขั้นสูง
  • หมายเหตุเพิ่มเติมและการแก้ไขปัญหา
  • แผนการทำงาน
  • มีส่วนร่วม
  • ใบอนุญาต

การแนะนำ

ด้วยแพ็คเกจนี้ คุณสามารถเพิ่มการมีส่วนร่วมของผู้ใช้ เพิ่มการทำงานร่วมกัน และอำนวยความสะดวกในการสื่อสารแบบทันทีภายในแอปพลิเคชัน Laravel ที่มีอยู่ของคุณ โดยมอบฟังก์ชันวิดเจ็ตแชทแบบเรียลไทม์แบบโต้ตอบและไดนามิกที่ผสานรวมอย่างลงตัว

เกร็ดความรู้

ชื่อห้องใต้ดินได้รับแรงบันดาลใจจากห้องสนทนาส่วนตัวของ Aech จาก Ready Player One

คุณสมบัติ

  • ข้อความแบบเรียลไทม์
  • สถานะออนไลน์ของผู้ใช้
  • ตัวบ่งชี้การพิมพ์ของผู้ใช้
  • สถานะการอ่านข้อความแล้ว
  • การแจ้งเตือนแบบพุชที่กำหนดค่าได้จากฝั่งไคลเอ็นต์
  • ผู้ติดต่อและข้อความที่ค้นหาได้
  • ลักษณะการทำงานที่ขยายและปรับแต่งได้
  • การโหลดแบบ Lazy Loading พร้อมข้อความเลื่อนที่ไม่มีที่สิ้นสุด
  • การออกแบบที่ใช้งานง่ายและน่าดึงดูดโดยใช้ TailwindCSS และ Alpine.js
  • สามารถใช้ได้กับเฟรมเวิร์กส่วนหน้า CSS ต่างๆ เช่น Bootstrap และ TailwindCSS โดยไม่ต้องกังวลกับความขัดแย้งด้านสไตล์
  • การสนับสนุนไดรเวอร์การออกอากาศที่ยืดหยุ่น, Pusher, Ably, Soketi, Laravel Websockets หรือไดรเวอร์การออกอากาศอื่น ๆ ที่รองรับ Laravel ขึ้นอยู่กับคุณที่จะตัดสินใจ

การสาธิต

นี่คือการสาธิตนั่งร้านโดยใช้ Laravel Breeze

การติดตั้ง

ความต้องการ:

  • ฝั่งเซิร์ฟเวอร์: php ^8.0 และ laravel/framework ^9.0.0 | ^10.0.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 ของคุณ ในทางกลับกัน ระบบจะถามคำถามแบบโต้ตอบเพื่อให้คุณเรียกใช้การย้ายฐานข้อมูลและขอให้คุณติดตั้งไดรเวอร์การออกอากาศที่คุณจะใช้

  • การเลือกไดรเวอร์การออกอากาศ

    ก่อนที่จะเลือกไดรเวอร์การออกอากาศ คุณต้องแน่ใจว่า BroadcastServiceProvider::class เปิดใช้งานอยู่โดยยกเลิกการใส่ข้อคิดเห็นหรือเพิ่มลงใน providers ของคุณใน config/app.php : 

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

    จากนั้นคุณสามารถเลือกไดรเวอร์ตัวใดตัวหนึ่งต่อไปนี้:

    หากคุณพลาดการติดตั้งไดรเวอร์โดยไม่ได้ตั้งใจในขั้นตอนก่อนหน้า คุณสามารถติดตั้งอีกครั้งได้โดยใช้คำสั่ง php artisan basement:install driver

    • Pusher (คลิกที่นี่เพื่อขยาย)

      หลังจากสร้างช่องทางใหม่ในบัญชี 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>
    • ได้ (คลิกที่นี่เพื่อขยาย)

      จัดเตรียมการกำหนดค่าที่เกี่ยวข้องใน .env ของคุณหลังจากสร้างแอปใหม่ในบัญชี Ably ของคุณ: 

       BASEMENT_BROADCAST_DRIVER =ably
BROADCAST_DRIVER =ably
ABLY_KEY =<replace-with-your-ably-key>
ABLY_PUBLIC_KEY =<replace-with-your-ably-public-key>
    • โสเกติ (คลิกที่นี่เพื่อขยาย)

      กำหนดค่า .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 จากนั้นเพิ่มบรรทัด <x-basement::chat-box /> ก่อนแท็กปิด </body> 

    <!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

          คุณสามารถเปลี่ยนส่วนต่อท้าย .esm เป็น .common หากคุณใช้โมดูล cjs แทน esm

      • ตัวอย่างการทำงานที่สมบูรณ์ภายใน 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 และต้องการจัดให้มีฟีเจอร์แชทสำหรับบทบาท 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/**',
+      ],
+    },
+  },
});

เผยแพร่ข้อผิดพลาดการตรวจสอบสิทธิ์เมื่อใช้แคชเส้นทาง

แพ็คเกจ basement chat อาจไม่สามารถเริ่มต้นได้ และคุณอาจได้รับ 403 Forbidden - ข้อผิดพลาด HTTP เมื่อเข้าถึงจุดสิ้นสุด broadcasting/auth ในคอนโซลของเบราว์เซอร์ เมื่อคุณใช้คำสั่ง php artisan route:cache วิธีแก้ไขปัญหานี้ยังอยู่ระหว่างการตรวจสอบเพิ่มเติม เราขอแนะนำไม่ให้คุณใช้คุณลักษณะการแคชเส้นทางในขณะนี้

แผนการทำงาน

กรุณาเยี่ยมชมหน้าต่อไปนี้เพื่อดูแผนงาน basement chat

มีส่วนร่วม

คุณสามารถตรวจสอบข้อมูลโดยละเอียดเกี่ยวกับคู่มือการมีส่วนร่วมได้ในหน้าต่อไปนี้

ใบอนุญาต

แพ็คเกจ basement chat ได้รับอนุญาตภายใต้ใบอนุญาต MIT

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด