Как подключиться к Laravel Websocket с помощью React? - PullRequest
Новая
       35

Как подключиться к Laravel Websocket с помощью React?

4 голосов
/ 27 июня 2019

Я создаю приложение для заказа, где я делаю бэкэнд с Laravel, а интерфейс с ReactJS и React Native

. Я хочу получать обновления в реальном времени всякий раз, когда клиент размещает заказ ивсякий раз, когда заказ обновляется.

В настоящее время мне удавалось запустить websocket, который использует API толкателя , используя devmarketer его руководство.

Я успешно ввел порядок в консоли, но теперь я хочу получить доступ к channel, используя мое react приложение

И на этом этапе я нахожусьстолкнувшись с трудностями.

Поскольку я не уверен, как создать route, доступный для моих приложений и как получить доступ к каналу по этому маршруту.

Официальная документация Laravel даетпример, как получить доступ к пушеру, но не как подключиться к нему, например, с помощью внешнего соединения (пример: мое собственное приложение реагировать) 

window.Echo = new Echo({
  broadcaster: 'pusher',
  key: 'rapio1',
  host: 'http://backend.rapio',
  authEndpoint: 'http://backend.rapio/broadcasting/auth',
  auth: {
    headers: {
      // Authorization: `Bearer ${token}`,
      Accept: 'application/json',
    },
  }
  // encrypted: true
});
window.Echo.channel('rapio.1').listen('OrderPushed', (e) =>{
    console.log(e.order)
})

Так что мой вопрос: как я могу получить доступ к каналу вещания на моем * 1024?* apps?

ДОБАВЛЕННОЕ СОБЫТИЕ НАЗАД 


class OrderPushed implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $neworder;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Order $neworder)
    {
        $this->neworder = $neworder;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        //return new Channel('Rapio.'.$this->neworder->id);
       return new Channel('Rapio');

    }
    public function broadcastWith()
    {
        return [
            'status' => $this->neworder->status,
            'user' => $this->neworder->user->id,
        ];
    }
}

Ответы [ 2 ]

2 голосов
/ 24 июля 2019

Используете ли вы метод broadcastAs() на сервере?

Важно знать это, чтобы правильно ответить на ваш вопрос, потому что в этом случае эхо-клиент Laravel предполагает, что пространство имен - App \ OrderPressed.

При использовании broadcastAs() вам необходимо поставить перед ним префикс с точкой, чтобы echo запретил использовать пространство имен, поэтому в вашем примере это будет:

.listen('.OrderPushed')

Кроме того, вам не нужно выполнять какие-либо дополнительные настройки на сервере, чтобы каждое клиентское приложение могло подключаться к серверу сокетов, если только вы не хотите иметь многопользовательскую настройку, при которой различные серверные приложения будут использовать веб-сокеты.сервер.

Я также использую wsHost и wsPort вместо только хоста и порта, но не уверен, что это имеет значение, хотя

1 голос
/ 24 июля 2019

Если вы можете получить доступ к данным на веб-интерфейсе, просто console.log 'на консоли, вы уже должны пройти большую часть пути.

То, как вы на самом деле получите данные в свои реагирующие компонентызависит от того, используете ли вы библиотеку управления состоянием (например, redux) или просто чистую реакцию.

В основном вы должны поддерживать локальную копию данных на внешнем интерфейсе, а затем использовать события Echo для обновления этих данных.,Например, у вас может быть список заказов в редуксе, в одном из ваших реагирующих компонентов или где-то еще, которые вы можете добавлять и изменять на основе событий создания, обновления и удаления.

Я бы лично создалСобытие OrderCreated, OrderUpdated и OrderDeleted на сервере, которое будет содержать данную модель заказа. 

class OrdersList extends React.Component {
    componentDidMount() {
        this.fetchInitialDataUsingHttp();

        //Set up listeners when the component is being mounted
        window.Echo.channel('rapio.1').listen('OrderCreated', (e) =>{
            this.addNewOrder(e.order);
        }).listen('OrderUpdated', (e) =>{
            this.updateOrder(e.order);
        }).listen('OrderDeleted', (e) =>{
            this.removeOrder(e.order);
        });
    }

    componentWillUnmount() {
        //@TODO: Disconnect echo
    }
}
...