3

How to access form data sent to Flask using web sockets? I receive invalid frame header in google chrome developer tools->console.

Extract from my javascript code:

var form_data = new FormData($('#my_form')[0]); 

socket.emit('handle_form',{data:form_data});

How would I access, say 'title' field in my_form from flask ?

request.form throws the same error "Invalid frame header"

One more question, is it good to use web sockets for form submission and as an entire replacement for ajax ?

ItsMe
  • 395
  • 2
  • 13
Raj Kishan AV
  • 33
  • 6
  • so when uploading images how to save the file in flask ? not able to do request.files.getlist(). Any solution for this ? – Raj Kishan AV Apr 17 '16 at 13:22

2 Answers2

2

Instead of sending a FormData object, which is a client-side only construct, you should build a plain dictionary and send that, as all the data that is transferred back and forth in Socket.IO is serialized to JSON.

Then on the server, you will have a dict that is sent as an argument to your socket callback function. See this example for ideas on how to send form data to the server.

Miguel Grinberg
  • 65,299
  • 14
  • 133
  • 152
  • How about adding the file to be uploaded to javascript so that it can be accessed using flask file object? – Raj Kishan AV Apr 17 '16 at 17:10
  • Once again, don't think in terms of form submission, that is an HTTP thing that does not exist when you work with WebSocket or SocketIO. If you want to send a file, just send the data in an `emit` call. – Miguel Grinberg Apr 17 '16 at 17:23
  • Same thing, sorry i am beginner but not able to figure out how to send file in emit! Because when using ajax I used formData of javascript. – Raj Kishan AV Apr 17 '16 at 17:29
  • The browser does a lot of the work when sending files via HTTP. For WebSocket, however, all you get is a communication channel where you write data. If you want to send a file, you need to read the file in javascript, then include those contents in a payload that you send in an emit. Why don't you just use an ajax call for sending your file? Unless you have to do it very often there isn't really a benefit in using Socket.IO for that. – Miguel Grinberg Apr 17 '16 at 17:34
  • Haven't thought of using ajax and socketio together. Thanks again :) what in context of real time chat with letting users share images too? Separate ajax call to upload image and emit for text in chat? Thats my case. – Raj Kishan AV Apr 17 '16 at 17:39
  • If you can separate the file upload and do it over HTTP that is going to be easier. Or else, search for socket.io file upload, there are lots of examples on how to do it, but be aware it isn't trivial. – Miguel Grinberg Apr 17 '16 at 18:12
0

It is not like Flask-SocketIO works.

When you socket.emit something, you handle it with a callback.

@socketio.on('handle_form')
def handle_form_callback(data):
    print('received message: ' + data)

You don't have a request.form in this case.

It works as a form submission replacement, but I don't think it is a good replacement. Websockets are not stateless, they are difficulty to scale and are essentially bound to a server. Of course it has some workarounds, but it is not like the very well documented HTTP server scaling.

iurisilvio
  • 4,868
  • 1
  • 30
  • 36
  • so when uploading images how to save the file in flask ? not able to do request.files.getlist(). Any solution for this ? – Raj Kishan AV Apr 17 '16 at 13:22
  • It is possible to send data as a binary string through websocket, but I don't recommend it. It does not support things like multipart upload. Do it with plain HTTP POST. – iurisilvio Apr 17 '16 at 19:42