如何将表单数据添加到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'
    }
}

有没有一种类似的方法来添加表单数据？

编辑

当我检查开发者工具中的网络请求时，我可以看到Echo向服务器发送了两个formData属性。因此，我认为应该有一种方法将其他属性附加到现有的formData对象中。

- Armand

---

如果你这样做 authEndpoint : 'http://127.0.0.1:8000/broadcasting/auth?someData=123'，它不会工作吗？ - Alexandre Elshobokshy

@IslamElshobokshy 嗯，这样做也可以，同时将数据作为自定义标头发送，但这不是很干净。当我在 DevTools 中检查网络请求时，我可以看到 Echo 向服务器发送了两个 formData 属性。因此，我认为必须有一种方法将其他属性附加到现有的 formData 对象中。 - Armand

你可以尝试使用 data 而不是 'form-data' 来发送数据吗？也可以尝试使用 formData 或者 data: {'formData' : { ... }} 这样的方式。 - Alexandre Elshobokshy

我尝试了所有的版本，但都没有成功 :( 我可能应该在问题中提到这个... - Armand

Answer 1

有没有类似的方法来添加表单数据？

简单的回答是——没有。

Laravel Echo没有实现该功能，无法在参数设置中实现这一点。

我们可以在Dev Tools请求中看到Form Data对象，这是因为pusher-js在向服务器发出请求之前添加了它们。要实现这一点，我们需要在执行请求之前操作pusher API，但这超出了本主题的范围。

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

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

- Armand

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的默认选项，在它的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'
        }
    }    
});

希望这对你有用。请告诉我！:) 顺便说一句，我没有测试环境，所以我从未测试过它。。

- halilcakar

---

这正是我上面指出的。恐怕你的答案没有涉及到关于“dataForm”主题的实际问题。 - Armand

我以为他在找类似这样的东西，现在我看到了它 :( 但是在代码中寻找这个选项时，我从未看到过额外的dataForm属性选项。也许在这个主题上创建一个拉取请求会起作用？ - halilcakar

通过深入挖掘代码，我现在明白了请求中看到的formData与Laravel Echo无关。 Laravel正在使用pusher-js，而pusher-js又将formData属性添加到请求中。因此，默认情况下，Laravel Echo没有任何方法可以向请求中添加任何formData参数。我错误地认为有一种优雅的方法可以实现这一点。 - Armand

嗯，是的，我也找不到任何与formData相关的内容，但扩展laravel-echo应该可以解决问题，我猜测。你能试试编辑1吗？我真的很想知道它是否能够这样工作 :) - halilcakar

很遗憾，它没有起作用。表单数据保持不变，我根本看不到请求中的 foo。可能最简单的方法是去操作 pusher 本身。类似于 window.Echo.connector.pusher...。但是为此，我必须创建另一个问题，因为我们会偏离这个话题。我想这个问题注定要失败了 :( - Armand

哦，很遗憾。是的，我猜它需要在Pusher的配置中...抱歉帮不上忙 :( - halilcakar