如何将表单数据添加到 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 中检查网络请求时，我可以看到 Echo 向服务器发送了两个 formData 属性。所以我认为必须有一种方法可以将附加属性附加到现有的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 在评论中所说的那样做到这一点，我真的想知道如果我们在创建后覆盖选项，这是否会像这样工作:)

旧

我正在研究这个。 here 我看到有一个headers 选项如下：

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

这是Connecter 的默认选项，在constructor 内部，它还为csrfToken here 设置了一个身份验证标头

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

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

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