How to add form-data to Laravel Echo request?

Question

I'm trying to send some data with Laravel Echo request

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                
    },                  
});

I've seen how to add custom headers to the request

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

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

Edit

When I inspect the network requests in the DevTools, I can see that there are two formData properties sent by the Echo to the server. So I thought there must be a way to attach additional properties into the existing formData object

Answer 1

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

The simple answer is - NO

Laravel Echo doesn't have the functionality to achieve that within the parameter set.

The reason we can see the Form Data object in the Dev Tools requests, is because pusher-js is adding them before making the request to the server. To achieve that, we would have to manipulate the pusher API before the request is executed, but this goes off the original topic of this thread.

So if you want to send the data to the server, the easiest would be adding custom headers as pointed in the original question.

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

Answer 2

Edit 1

I'm really not sure if this would actually work but can you try this when you can

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);

I know this is really not the way you want. I've tried to make it as @Islam said on the comment and I'm really wondering if this is gonna work like this if we just override options after creation :)

Old

I was looking into this. here I saw that there is a headers option as following:

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

This is Connecter's default options and inside it's constructor it's also setting an auth header for csrfToken here

So I'm guessing while you are creating your Laravel/Echo you might do,

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'
        }
    }    
});

Hope this would work for you. Please do let me know! :)

By the way I don't have a test environment so i never tested it..