https://github.com/wallter/useecho

useEcho is a React Hook for Laravel Echo + Socket.io for Event Broadcasting
https://github.com/wallter/useecho

Last synced: 10 months ago
JSON representation

useEcho is a React Hook for Laravel Echo + Socket.io for Event Broadcasting

• Host: GitHub
• URL: https://github.com/wallter/useecho
• Owner: wallter
• License: mit
• Created: 2019-08-27T12:31:39.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-09-19T22:38:03.000Z (over 2 years ago)
• Last Synced: 2025-03-15T06:27:20.953Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 4.88 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# useEcho

`useEcho` is a wrapper around [Laravel Echo](https://github.com/laravel/echo) ([docs](https://laravel.com/docs/5.8/broadcasting)) that exposes a react style hook to interact with channels to receive websocket events (via socket.io).

# Usage

#### 1. Generate Command:

```sh

php artisan make:event OrdersUpdateEvent

```

#### 2. Setup `OrdersUpdateEvent::__construct()` and `brodcastOn()`. The key used in `brodcastOn()` is the channel, and the class name is the event key.

```php

class OrdersUpdateEvent extends Event implements ShouldBroadcast

{

    use Dispatchable, InteractsWithSockets, SerializesModels;

    public function __construct(public User $user, public BulkOrderUpdateRequest $request)

    {

    }

    public function broadcastOn()

    {

        return ['app.order.updates'];

    }

}

```

#### 3. Javascript Hook usage within a context or component.

```js

useEcho({

  channel: 'app.order.updates', // key defined in OrdersUpdateEvent::brodcastOn()

  events: {

    // events are key/value pairs of: { [eventClassName]: fn_callback(payload) }

    OrdersUpdateEvent: e => console.log('OrdersUpdateEvent', {

      user,

      request // the payload is passed as defined in OrdersUpdateEvent::__construct()

    }),

    OtherEvent: e => console.log('OtherEvent', e),

  },

});

```

# TODO

* enable support for different types of channels (Private/Presence)