Connecting Flask Socket.IO Server and Flutter

Question

Basically, I have a socket io flask code:

import cv2
import numpy as np

from flask import Flask, render_template
from flask_socketio import SocketIO, emit
from threading import Lock,Timer as tmr
from engineio.payload import Payload
import base64 
from PIL import Image
import io


app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

@socketio.on('connect')
def connect():
    print("a client connected")

@socketio.on('disconnect')
def disconnect():
    print('Client disconnected')

@app.route('/')
def hello():
    return render_template('index.html')

if __name__ == '__main__':
    socketio.run(app,port=port,host= '0.0.0.0')

This code is working fine when I try to connect it to javascript

However in flutter I can not achieve that

I have stateful Widget that has a button in it And I am using this function to connect to my socket when the button is pressed

import 'package:socket_io_client/socket_io_client.dart' as IO;

IO.Socket socket;
  connectToSocket() {
  socket = IO.io("http://10.0.2.2:6400", <String, dynamic>{
    'transports': ['websocket', 'polling'],
  });
  socket.connect();
 }

I can not connect it please help me.

Solution

I know this is an older question but hopefully this answer will help someone down the road.

The issue may be caused by the lack of support for polling in flutter.

from: https://github.com/rikulo/socket.io-client-dart#usage-flutter

In Flutter env. it only works with dart:io websocket, not with dart:html websocket, so in this case you have to add 'transports': ['websocket'] when creates the socket instance.

IO.Socket socket = IO.io('http://localhost:3000', <String, dynamic>{
    'transports': ['websocket'],
    'extraHeaders': {'foo': 'bar'} // optional
});

The default Flask development server doesn't support websockets so you'll need to use another server. Thankfully it's simple to get eventlet working with Flask. All you should have to do is install the eventlet package using pip.

pip install eventlet

Once eventlet is installed socketio will detect and use it when running the server.

You can use chrome to double check what transport method is being used. Open your chrome dev tools Ctrl+Shift+I in Windows and go to the Network tab. On each network request you should see either transport=polling or transport=websocket

Comments

[tplusk]

How is it you are starting the flask server here? From the main or elsewhere?

[tplusk]

Also - where are you calling connectToSocket() ?

[isa türk]

Thank you sir. I am sure that it will help a lot of people including me :)

[Dhinakaran]

Thank you. After installing eventlet working fine

[Admin]

Hi, I am trying to run flask socketio app on localhost, but i can't run it. it says running on server http://[: : 1]/5000 when i give app.host='localhost', and flutter doesn't connect to flask socket too. I am trying since past 4 days now. I can't find a fix:/. Please help. I have eventlet installed