我如何在 Flutter web 中使用套接字

Question

我正在尝试在使用socketio 以 Python 编写的套接字服务器与使用 Flutter Web 制作的客户端之间建立连接。

我测试了各种套接字包，例如 adhara_socket_io 和 flutter_socket_io，但没有任何效果。我在 Android 上尝试了相同的代码 sn-ps，但它们也不起作用。

我一直在寻找，我找到了这个代码 sn-p。它使用 dart.io 包中的 Socket 类。

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();

这个连接到 Python 服务器并从 Android 发送数据，但是当我从 Web 测试它时我没有连接。

我需要添加一些额外的东西才能让它在 Web 上运行吗？

或者在最坏的情况下，是否有另一种方法可以做我想做的事，我的目标是在网站上显示视频提要。该视频实际上是从 Python 获取的一堆图像，将对它们执行一些机器学习，我想通过套接字发送它们，并且每个图像在收到后立即显示，因此它看起来像一个视频源。 （使用 React 完成了类似的事情）

Answer 1

dart.io 包与 Flutter Web 不兼容。我想正如 pskink 建议的那样，websockets 是要走的路。您可以使用web_socket_channel 包中的HtmlWebSocketChannel，如文档中的here 所述。我已经使用过这个包，并且可以确认它在 Flutter Web 中运行良好。

在你的情况下应该使用如下的东西。

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

但请注意，这不能与常规 Flutter 应用程序互操作。如果您的目标是同时针对 android 和 flutter web，那么您应该根据您正在为其构建的目标有条件地处理此通道创建，并在 HtmlWebSocketChannel 或 IOWebSocketChannel 之间决定创建连接。如果您有兴趣，可以使用post* 中建议的基于条件存根的实现。

* 注意：这是我的帖子。 :)