How can i use sockets with Flutter web

Question

I'm trying to make a connection between a socket server written in Python using socketio to a client made with Flutter Web.

I tested various socket packages like adhara_socket_io and flutter_socket_io and nothing worked. I tried the same code snippets on Android and they didn't work too.

I kept searching and i found this code snippet. It uses the Socket class from the dart.io package.

Socket socket = await Socket.connect('192.168.2.190', 7003);

    print('connected');

    // listen to the received data event stream
    socket.listen((List<int> event) {
      print(utf8.decode(event));
    });

    // send hello
    socket.add(utf8.encode('hello'));

    // wait 5 seconds
    await Future.delayed(Duration(seconds: 5));

    // .. and close the socket
    socket.close();

This one connected to the Python server and sent the data from Android but when i tested it from Web i didn't connect.

Is there some things extra i need to add for it to work on Web?

Or in the worst case, is there another way to do what i want to do, my goal is to display a video feed in a website. The video is actually a bunch of images taken from Python, there is some machine learning that will be performed on them and i want to send them over socket and each image is displaying as soon as it is received so it looks like a video feed. (Similar thing was done using React)

Answer 1

dart.io package is not compatible with flutter web. And I suppose As pskink suggested websockets is the way to go. You can use HtmlWebSocketChannel from the web_socket_channel package as documented here. I have used this package and can confirm it works well in flutter web.

In your case should be using something as follows.

var channel = HtmlWebSocketChannel.connect("ws://192.168.2.190:7003");

But do note that this is not inter operable with regular flutter app. If you aim to target both android and flutter web, then you should handle this channel creation conditionally depending on target you are building it for and decide between HtmlWebSocketChannel or IOWebSocketChannel to create the connection. If you are interested you can use a conditional stub based implementation as suggested in this post*.

* Note: its my post. :)