Flask-socketio: WTForm and SocketIO

[valentin-ballester]

Hello, Im triyng to get arround using WTF and Sockets. I have seen the example where you use multiple forms and send the data, but you dont use WTF.

Heres the example to send data from a form:

$('form#emit').submit(function(event) {
socket.emit('my_event', {data: $('#emit_data').val()});
return false;
});

I dont have acces to the code right now (im not in home) but basically :

-I have a route that renders a wtform and now, i added socket to that route template and everything works and i even configured rooms and namespaces.

The thing is that every time i press the submit button to the form i have in the template (using a code almost identical to your example) was able to send the data of 1 input back using sockets.

.My three main questions are:

1) How would i generate and send a new token ? Would it be useful to use a CSRF token with sockets ?

2) How would i get arround using validate on submit () ? What alternatives i have ?

3)How would i send all the data ? Should i extend your example with all my inputs ?

Sorry for the little of code but really im desperate and i will be back at home on monday and i want to have this worked out, i forget to git the files before this trip.

My actual idea is to use it in the same way that i would do if i use ajax , serializing the form and the only problem would be using the CSRFToken injected, like in the tutorial of the link because... Socket doesnt have any header to put the token. How could i solve that ?

https://medium.com/@doobeh/posting-a-wtform-via-ajax-with-flask-b977782edeee

[valentin-ballester]

My main goal is to be able to reuse the form so that is why i want to validate and then send a new token

[miguelgrinberg]

As long as you include the form.hidden_tag() in your template, you would have a CSRF token in your form. So really all you need to do is extend the submit handler to send a dictionary with all the fields in your form (including the CSRF token), not just one value as I did in my example.

Then in the server, your Socket.IO event handler can create the form object and feed the values:

@socketio.on('my_form_post')
def on_my_form_post(form_data)
    form = MyForm(form_data)
    if form.validate():
        # ...
    else:
        # ...

[valentin-ballester]

Yeah, even easier that i thought. Amazing, Thanks a lot. Is there a way i can donate to you a tip for the help? You have help me a lot with your tutorials and extensions.

[miguelgrinberg]

@valentin-ballester You are welcome. Couple of ideas: You can buy my Flask course: https://courses.miguelgrinberg.com, or else you can tip me directly at https://paypal.me/miguelgrinberg.

[valentin-ballester]

It works like a charm, the only detail, i have to pass the dict like this :

From werkzeug import MultiDict

form = MyForm(MultiDict(data))

[valentin-ballester]

Also is worth noticing for other devs trying to implement it, checkbox buttons wont work if you pass .val() you must use

"Checkbox" : $('#checkbox').prop('checked')

That way it will detect the state of the checkbox