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

Question

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

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

我一直在搜索，我找到了这个代码片段。它使用 Socket 包中的 dart.io 类。

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，那么你应该根据你正在构建的目标有条件地处理这个 channel 的创建，并决定在 HtmlWebSocketChannel 或 IOWebSocketChannel 之间创建连接。如果您有兴趣，可以使用此 post * 中建议的基于条件 stub 的实现。

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