создать и присоединиться к websocket через laravel -echo в приложении реакции - PullRequest
Новая
       156

создать и присоединиться к websocket через laravel -echo в приложении реакции

2 голосов
/ 01 августа 2020

Я использую laravel -echo для создания и использования веб-сокета в моем приложении-реакции. его легко использовать laravel -эхо на странице. но когда нужно использовать на нескольких страницах, делают несколько каналов и подписываются несколько раз. как сделать один канал и объединить их на нескольких страницах? с реквизитом или чем-то еще ...

Я пытаюсь использовать реквизиты, как показано ниже, но произошла ошибка:

родительский компонент: 

import Echo from 'laravel-echo';

const token = window.localStorage.getItem('access_token');


const options = {
    broadcaster: 'pusher',
    key: '7890165486',
    wsHost: '45.149.78.4',
    wsPort: 6001,
    disableStats: true,
    authEndpoint: 'http://xxx.xxx.net/broadcasting/auth',
    auth: {
        headers: {
            Authorization: `Bearer ${token}`,
            Accept: 'application/json'
        }
    }
};

const echo = new Echo(options);

Class ParentComponnet extends Component {

componentDidMount() {
    this.EchoJoin();
}

EchoJoin() {
    let ch = echo.join(`chat.${this.props.token}`);
    ch
        .here((user) => {
            console.log('all online use', user);
        })
        .joining((user) => {
            alert(user.id + ' New Join the Channel');
        })
        .leaving((user) => {
            alert(user.id + ' Leave the Channel');
        })
        .listen('MessageSent', (e) => {
            console.log('>>>>>>>>>>>>', e);
        });
}
<ChildComponent ch={this.echo} />
}

и это код дочернего компонента: 

    componentDidMount() {
    this.props.ch
        .here((user) => {
            console.log('all online use', user);
        })
        .joining((user) => {
            alert(user.id + ' New Join the Channel');
        })
        .leaving((user) => {
            alert(user.id + ' Leave the Channel');
        })
        .listen('MessageSent', (e) => {
            console.log('>>>>>>>>>>>>', e);
        });

    }

Я получил эту ошибку TypeError: невозможно прочитать свойство "здесь" неопределенного значения

1 Ответ

2 голосов
/ 04 августа 2020

Да, в некотором смысле вы ответили на свой вопрос. Здесь вам нужен синглтон, поэтому я бы инициализировал соединение в контейнере root, а затем передал бы то, что вам нужно, в качестве опоры на каждый экран, в котором он вам нужен.

Дайте мне знать, если вам что-то понадобится пояснение по этому поводу.

РЕДАКТИРОВАТЬ: Похоже, ваше соединение называется ch, поэтому вам просто нужно передать это своим детям в качестве опоры. Предполагая, что у вас есть код в одном из компонентов / контейнеров высокого уровня root - например, App. js - вы передадите его так же. 

<View>
  <SomeChildComponent ch={this.ch} />
</View>

EDIT: вы делаете это для рендеринга вашего дочернего компонента:

<ChildComponent ch={this.echo} />

Но это должно быть так:

<ChildComponent ch={this.ch} />

...