Rush
Table of Contents
About
Rush is a powerful package that enables real-time event handling on web pages using WebSockets. It seamlessly integrates with Laravel and MoonShine admin panel to provide a robust solution for notifications, collaborative form editing, and dynamic content updates.
Features
- Real-time Notifications: Instantly receive and display notifications on the page.
- Collaborative Form Editing: Display active users on editing forms and track their actions in real-time.
- Dynamic Fragment Reload: Reload specific page fragments without a full page refresh.
- Flexible WebSocket Support: Compatible with various WebSocket applications:
- Laravel Echo (Pusher, Reverb)
- Centrifugo
- SocketIO
- Custom solutions
Installation
-
Install the package via Composer:
composer require moonshine/rush -
Publish assets, configuration, and WebSocket application code samples:
php artisan moonshine-rush:install -
If you're using notifications from this package, replace
MoonShineNotificationContractin your service provider:$this->app->bind(MoonShineNotificationContract::class, RushNotificationAdapter::class); -
MoonShine Rush uses client-to-client message events, so if you're using Pusher, you need to enable Client Events in your application.
Usage
Notifications
In MoonShineLayout use HasRushNotification trait:
use MoonShine\Rush\Traits\HasRushNotification; final class MoonShineLayout extends CompactLayout{ use HasRushNotification; //..}If you haven't posted MoonShineLayout yet, do so:
php artisan moonshine:publishSelect Layout. Write the newly published Layout in the moonshine configuration file.
//...'layout' => \App\MoonShine\MoonShineLayout::class,Sending a message is done using the Rush::events()->notification():
Rush::events()->notification( message: 'Notification message', button: new NotificationButton('Нажми меня', 'https://moonshine.cutcode.dev'), ids: [1], color: Color::GREEN);LiveForm
To display active users on the form page, attach the HasRushForm trait to your resource:
use MoonShine\Rush\Traits\HasLiveForm; class MyResource extends ModelResource{ use HasLiveForm; //...}FragmentReload
Enable fragment reloading on Alpine events:
Rush::components()->fragment([ FlexibleRender::make("Test reload " . time()),]) ->name('metrics');Trigger a fragment reload from the server:
Rush::events()->fragmentReload('metrics');For private channels:
Rush::components()->fragment([ FlexibleRender::make("Test reload " . time()),]) ->privateChannel() ->name('metrics'); // Sending event to a specific userRush::events()->fragmentReload('metrics', userId: 1);HtmlReload
If you need to change the html code inside a block, for example <div id="container><p>HTML</p></div>, you can use HtmlReload.
public function htmlReload(string $selector, string $html, HtmlReloadAction $action = HtmlReloadAction::INNER_HTML): voidFirst, you need to enable listening on the page by adding a new component.
use MoonShine\Rush\Services\Rush; Rush::components()->htmlReload()Now we can update the container:
Rush::events()->htmlReload('#container', '<p>New Html</p>');JsEvent
You can send any Js event using Rush:
use MoonShine\Rush\Services\Rush; Rush::events()->js([ AlpineJs::event(JsEvent::FRAGMENT_UPDATED, 'js-fragment'), AlpineJs::event(JsEvent::TABLE_ROW_UPDATED, 'index-table-item-resource-16'), AlpineJs::event(JsEvent::TABLE_UPDATED, 'index-table-item-resource', ['_delay' => 2000]),]);The Rush::events()->js() method also accepts string type:
Rush::events()->js(AlpineJs::event(JsEvent::FRAGMENT_UPDATED, 'js-fragment'));To send js events, you need to enable listening on the page by adding a new component:
use MoonShine\Rush\Services\Rush; Rush::components()->jsEvent()Compatibility table
| Rush v1.x | Rush v2.x |
|---|---|
| ✅ MoonShine v2.x | ✅ MoonShine v3.x |
Configuration
The configuration file is located at config/moonshine_rush.php. Key options include:
prefix: Prefix for all channelsnotifications_channel: Prefix for notification channelslive_form_channel: Prefix for form channelsfragment_reload_channel: Prefix for fragment reload channelshtml_reload: Prefix for html reload channels
Connection
Frontend
Initialize the connection after the moonshine:init event:
document.addEventListener("moonshine:init", () => { // Your initialization code here})Pass all channel events to the MoonShine.onCallback('onMoonShineWS') function:
// Echo exampleMoonShine.onCallback('onMoonShineWS', function(channel, onRush) { window.Echo.private(channel) .listen('.moonshine.ws.event', (e) => { onRush(e) }).subscribed(() => { document.dispatchEvent(new CustomEvent('rush-subscribe:' + channel)) })})Trigger the moonshine:rush event after connecting:
window.Echo.connector.pusher.connection.bind('connected', () => { document.dispatchEvent(new CustomEvent('moonshine:rush'))})Trigger the rush-subscribe event after subscribing:
//...subscribed(() => { document.dispatchEvent(new CustomEvent('rush-subscribe:' + channel))})Backend
Implement the RushBroadcastContract interface for server-side event sending:
final class SocketIO implements RushBroadcastContract{ public function send(string $channel, RushData $rushData): void { // Your implementation here }}Bind the implementation in your service provider:
$this->app->bind(RushBroadcastContract::class, SocketIO::class);License
Rush is a commercial software product distributed under a paid license. To use the package, you must purchase a license.
Purchasing a license
- Visit the official website moonshine-laravel.com.
- Make a payment through the available methods on the site.
- After successful payment, you will receive a personal license key.
Terms of Use
- The license is issued for one developer.
- The license gives the right to use the Rush package in commercial and non-commercial projects.
- Distribution or resale of the license key to third parties is strictly prohibited.
- Technical support and updates are provided in accordance with the terms of the purchased license.
For all questions related to licensing, please contact support: info@cutcode.dev
