Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/basement-chat/basement-chat

Real-time chat widget package for your Laravel application with flexible broadcast driver support. Built for Laravel using PHP, TypeScript, Alpine.js, and Tailwind CSS.
https://github.com/basement-chat/basement-chat

ably alpinejs chat composer laravel laravel-websockets library package php pusher realtime soketi tailwindcss typescript websocket

Last synced: 4 days ago
JSON representation

Real-time chat widget package for your Laravel application with flexible broadcast driver support. Built for Laravel using PHP, TypeScript, Alpine.js, and Tailwind CSS.

Host: GitHub
URL: https://github.com/basement-chat/basement-chat
Owner: basement-chat
License: mit
Created: 2023-05-11T03:36:04.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-06-04T01:09:18.000Z (7 months ago)
Last Synced: 2024-12-20T12:07:47.781Z (11 days ago)
Topics: ably, alpinejs, chat, composer, laravel, laravel-websockets, library, package, php, pusher, realtime, soketi, tailwindcss, typescript, websocket
Language: PHP
Homepage: https://packagist.org/packages/basement-chat/basement-chat
Size: 5.46 MB
Stars: 472
Watchers: 7
Forks: 60
Open Issues: 17
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md

Awesome Lists containing this project

README

Basement Chat

Add a real-time chat widget to your Laravel application.

[basement-chat.webm](https://github.com/basement-chat/basement-chat/assets/52187958/2f2250ef-5578-412e-b0d7-2bb84c8b3c5a)

Built for

With

## Table of Contents

- [Introduction](#introduction)
- [Features](#features)
- [Demo](#demo)
- [Installation](#installation)
- [Configurations](#configurations)
- [Advanced Customizations](#advanced-customizations)
- [Extra Notes and Troubleshooting](#extra-notes-and-troubleshooting)
- [Roadmap](#roadmap)
- [Contributing](#contributing)
- [License](#license)

## Introduction

With this package, you can enhance user engagement, boost collaboration, and facilitate instant communication within your existing Laravel application by providing seamlessly integrated dynamic and interactive real-time chat widget functionality.

Trivia

The Basement name was inspired by Aech's private chat room from [Ready Player One](https://readyplayerone.fandom.com/wiki/Basement).

## Features

- Real-time messages
- User's online status
- User's typing indicator
- Messages have been read status
- Configurable push notifications from the client side
- Searchable contacts and messages
- Extendable and customizable actions behavior
- Lazy loading with infinite scroll messages
- Intuitive and attractive design using TailwindCSS and Alpine.js
- Can be used with various CSS frontend frameworks such as Bootstrap and TailwindCSS without worrying about style conflicts
- Flexible broadcast driver support, [Pusher](https://pusher.com/), [Ably](https://ably.com/), [Soketi](https://docs.soketi.app/), [Laravel Websockets](https://beyondco.de/docs/laravel-websockets/), or any other Laravel supported broadcast driver, it's up to you to decide.

## Demo

[Here is a demo](https://github.com/basement-chat/demo) with scaffolding using Laravel Breeze.

## Installation

### Requirements:

- Server-side: `php ^8.0` and `laravel/framework ^9.0.0 | ^10.0.0` installed in your project.
- Client-side: `chrome >= 80`, `edge >= 80`, `firefox >= 74`, or equivalent. See details [here](https://browsersl.ist/#q=chrome+%3E%3D+80%2C+edge+%3E%3D+80%2C+firefox+%3E%3D+74%2C+maintained+node+versions).

### Installation steps:

- Open a terminal, and make sure you are in your Laravel project directory.
- Install this package using the following command:
```
composer require basement-chat/basement-chat
```
- Start integrating Basement Chat with your Laravel application:
```
php artisan basement:install
```
> The above command will publish the configuration, assets, and migration files to your Laravel application. On the other hand, it will also ask interactive questions for you to run the database migrations and ask you to install which broadcast driver you will use.
- Selecting a broadcast driver

Before selecting a broadcast driver, you need to ensure that `BroadcastServiceProvider::class` is enabled by uncommenting it or adding it to your `providers` in `config/app.php`:

```diff
/*
* Application Service Providers...
*/
App\Providers\AppServiceProvider::class,
App\Providers\AuthServiceProvider::class,
- // App\Providers\BroadcastServiceProvider::class,
+ App\Providers\BroadcastServiceProvider::class,
App\Providers\EventServiceProvider::class,
App\Providers\RouteServiceProvider::class,
```

Then you can select one of the following drivers:

> If you accidentally missed installing the driver in the previous step, you can install it again using the `php artisan basement:install driver` command.

-
Pusher (Click here to expand)

After creating a new channel in the Pusher account, you need to configure Laravel `.env` by providing the relevant configurations:

```ini
BASEMENT_BROADCAST_DRIVER=pusher
BROADCAST_DRIVER=pusher
PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=
```

-
Ably (Click here to expand)

Provide relevant configurations in your `.env` after creating a new app in your Ably account:

```ini
BASEMENT_BROADCAST_DRIVER=ably
BROADCAST_DRIVER=ably
ABLY_KEY=
ABLY_PUBLIC_KEY=
```

-
Soketi (Click here to expand)

Configure your `.env` first with the following configuration:

```ini
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
```

Then, keep the Soketi server running with the following command when you want to use chat features in your app:

```
npx soketi start
```

-
Laravel Websockets (Click here to expand)

Similar to Soketi, you need to configure `.env` first with the following configuration:

```ini
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
```

Then, keep the Laravel Websockets server running with the following command when you want to use chat features in your app:

```
php artisan websockets:serve
```

- Configure your Sanctum Stateful Domains

Since this package uses [Laravel Sanctum](https://laravel.com/docs/10.x/sanctum) as the primary authentication system, you will need to configure your `.env` to use the equivalent `SANCTUM_STATEFUL_DOMAINS` with the domain you are currently using:

```
SANCTUM_STATEFUL_DOMAINS=
```

> Example: `basement.up.railway.app`, `127.0.0.1:8080`

- Implements Basement Chat functionality to your user model

In your user model (by default uses `app/Models/User.php`), modify it so it implements `BasementChat\Basement\Contracts\User` and uses `BasementChat\Basement\Traits\HasPrivateMessages` trait

```diff
` line before the closing `
...

+

...

@role('administrator')

@endrole