Как добавить данные формы в Laravel эхо-запрос? - PullRequest
Новая
       109

Как добавить данные формы в Laravel эхо-запрос?

6 голосов
/ 17 июня 2020

Я пытаюсь отправить некоторые данные с помощью Laravel Эхо-запроса 

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'somekey',
    wsHost: '127.0.0.1',
    wsPort: 6001,
    encrypted: false,
    disableStats: true,
    forceTLS: false,
    authEndpoint: 'http://127.0.0.1:8000/broadcasting/auth',

    'form-data': {          // I tried data, dataForm, dataform
        someData: '123',    // this doesn't seem to work                
    },                  
});

Я видел, как добавить пользовательские заголовки в запрос 

auth: {
    headers: {
          token: '123'
    }
}

Есть ли способ добавить данные формы аналогичным образом?

Edit

Когда я проверяю сетевые запросы в DevTools, я вижу, что есть два formData свойства, отправленные Echo на сервер. Поэтому я подумал, что должен быть способ присоединить дополнительные свойства к существующему объекту formData

Ответы [ 2 ]

2 голосов
/ 28 июня 2020

Есть ли способ добавить данные формы подобным образом?

Простой ответ - НЕТ

Laravel Echo не имеет функциональность для достижения этого в наборе параметров.

Причина, по которой мы можем видеть объект Form Data в запросах инструментов разработчика, заключается в том, что pusher- js добавляет их перед отправкой запроса на сервер. Чтобы добиться этого, нам пришлось бы манипулировать API-толкателем до того, как запрос будет выполнен, но это выходит за рамки исходного c этого потока.

Итак, если вы хотите отправить данные на сервер, проще всего было бы добавить пользовательские заголовки, как указано в исходном вопросе. 

...
auth: {
    headers: {
          token: '123'
    }
}
...
1 голос
/ 27 июня 2020

Edit 1

Я действительно не уверен, что это действительно сработает, но можете ли вы попробовать это, когда сможете 

class LaravelEcho extends Echo {
    constructor(options) {
        super(options);

        this.setformData();
    }

    setformData(formData = this.options.formData) {
        if (formData) {
            let path =
                "?" +
                Object.entries(formData)
                    .map((ch) => ch.join("="))
                    .join("&");

            this.options.authEndpoint += path;
            this.connector.options = this.options;
            // since you are using pusher
            if (this.connector.pusher) {
                this.connector.pusher.options = this.options;
            }
            // maybe also for socket.io too?
            else if (this.connector.socket) {
                this.connector.socket.options = this.options;
            }
        }
    }
}

let myEcho = new LaravelEcho({
    broadcaster: "pusher",
    key: "somekey",
    wsHost: "127.0.0.1",
    wsPort: 6001,
    encrypted: false,
    disableStats: true,
    forceTLS: false,
    authEndpoint: "http://127.0.0.1:8000/broadcasting/auth",

    formData: {
        foo: "bar",
        username: "username",
        password: "password",
    },
});

console.log(myEcho);

Я знаю, что это действительно не так, как вы хотите. Я пытался сделать это, как сказал @Islam в комментарии, и мне действительно интересно, будет ли это работать так, если мы просто переопределим параметры после создания:)

Old

Я изучал это. здесь Я видел, что есть опция headers, как показано ниже: 

private _defaultOptions: any = {
    auth: {
        headers: {},
    },
    authEndpoint: '/broadcasting/auth',
    broadcaster: 'pusher',
    csrfToken: null,
    host: null,
    key: null,
    namespace: 'App.Events',
};

Это параметры Connecter по умолчанию, а внутри constructor он также устанавливает заголовок аутентификации для csrfToken здесь

Итак, я предполагаю, что пока вы создаете свой Laravel / Echo, вы могли бы сделать, 

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'somekey',
    wsHost: '127.0.0.1',
    wsPort: 6001,
    encrypted: false,
    disableStats: true,
    forceTLS: false,
    authEndpoint: 'http://127.0.0.1:8000/broadcasting/auth',
    auth: {
        headers: {
           'X-CSRF-TOKEN': 'your-csrf-token'
           'your-header': 'with-value'
        }
    }    
});

Надеюсь, это сработает для вас. Пожалуйста, дайте мне знать! :)

Между прочим, у меня нет тестовой среды, поэтому я ее никогда не тестировал ..

...