如何将表单数据添加到 Laravel Echo 请求？

Question

我正在尝试使用 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',    'form-data': {          // I tried data, dataForm, dataform        someData: '123',    // this doesn't seem to work                    },                  });我已经看到如何将自定义标头添加到请求中auth: {    headers: {          token: '123'    }}有没有办法以类似的方式添加表单数据？编辑当我在 DevTools 中检查网络请求时，我可以看到formDataEcho 向服务器发送了两个属性。所以我认为必须有一种方法可以将附加属性附加到现有formData对象中

Answer 1

有没有办法以类似的方式添加表单数据？

简单回答是不

Laravel Echo 没有在参数集中实现该功能的功能。

我们可以Form Data在开发工具请求中看到对象的原因是因为 pusher-js 在向服务器发出请求之前添加了它们。为了实现这一点，我们必须在请求执行之前操作推送器 API，但这偏离了该线程的原始主题。

因此，如果您想将数据发送到服务器，最简单的方法是添加原始问题中指出的自定义标头。

...

auth: {

    headers: {

          token: '123'

    }

}

...

Answer 2

编辑 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 在评论中所说的那样做到这一点，我真的想知道如果我们只是在创建后覆盖选项，这是否会像这样工作:)

老的

我正在调查这个。在这里我看到有一个headers选项如下：

private _defaultOptions: any = {

    auth: {

        headers: {},

    },

    authEndpoint: '/broadcasting/auth',

    broadcaster: 'pusher',

    csrfToken: null,

    host: null,

    key: null,

    namespace: 'App.Events',

};

这是Connecter's default options 并且在它里面它也在这里constructor设置了一个 auth headercsrfToken

所以我猜你在创建 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'

        }

    }    

});

希望这对你有用。请务必告诉我！:)

顺便说一句，我没有测试环境，所以我从未测试过它..