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

Allamerican

Wouldn't it work if you do this authEndpoint : 'http://127.0.0.1:8000/broadcasting/auth?someData=123'? – Hallucinate

@IslamElshobokshy Well, it would, as well as sending the data as a custom header, but that's not very clean. 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 – Allamerican

Can you try sending the data using a data rather than your 'form-data' ? Try also things like formData or data: {'formData' : { ... }} – Hallucinate

I tried all versions to no avail :( I probably should have said about that in the question... – Allamerican

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'
    }
}
...

Allamerican

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..

Nowadays

That's exactly what I pointed out above. I'm afraid your answer doesn't address the actual question regarding dataForm topic – Allamerican

Shoot, I though he was looking something like this, now i saw the it :( Well looking for this i never saw an option for an extra dataForm attribute in code tho. Maybe creating a pull request on this topic would work? – Nowadays

By digging deeper into the code, I now understand that the formData I see in the requests has nothing to do with Laravel Echo. Laravel is using pusher-js which in turn is adding the formData properties to the requests. So by default Laravel Echo doesn't have any means to add any formData parameters to the request. I wrongly assumed there is an elegant way to achieve that – Allamerican

Well yea i also couldn't find out anything related with formData but extending the laravel-echo would do the trick i'm guessing. Could you be able to try Edit 1? I'm really wondering if it's working in this way :) – Nowadays

Unfortunately, it's not working. Form Data stays unchanged and I can't see foo in the request at all. Probably the easiest way is to go and manipulate pusher itself. Something like window.Echo.connector.pusher.... But for that, I would have to create another question as we would deviate from the topic here. I guess this question is doomed :( – Allamerican

Oh sad. Yea after all i'm guessing it needs to be on pusher's config.. Sorry couldn't help out :( – Nowadays