如何将 form-data 添加到 Laravel Echo 请求？

Question

我正在尝试使用 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                
    },                  
});

我已经了解了如何向请求中添加自定义 headers

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

有什么方法可以用类似的方式添加form-data吗？

编辑

当我检查 DevTools 中的网络请求时，我可以看到 Echo 向服务器发送了两个 formData 属性。所以我认为必须有一种方法可以将附加属性附加到现有的 formData object

Answer 1

编辑 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里面，它还为csrfTokenhere

设置了一个授权header

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

希望这对你有用。请让我知道！ :)

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

Answer 2

Is there any way to add form-data in a similar way?

简单的答案是 - 否

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

我们可以在 Dev Tools 请求中看到 Form Data object 的原因是 pusher-js 在向服务器发出请求之前添加了它们。为此，我们必须在执行请求之前操纵推送器 API，但这超出了该线程的原始主题。

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

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

如何将 form-data 添加到 Laravel Echo 请求？

How to add form-data to Laravel Echo request?

javascript

multipartform-data

form-data

laravel-echo