如何在Flutter Web中使用套接字。

Question

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

我尝试了各种套接字包，例如adhara_socket_io和flutter_socket_io，但都没有起作用。我在Android上尝试了相同的代码片段，也没有起作用。

我继续搜索，找到了这个代码片段。它使用了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获取的一堆图像，对其进行了一些机器学习处理，然后通过Socket发送每个图像，并在接收到图像时立即将其显示，这样看起来就像是视频流。（类似的事情使用React完成）

- Jrawat

---

为什么不使用WebSockets？ - pskink

Answer 1

dart.io 包不兼容 Flutter Web。如 pskink 所建议的，使用 WebSockets 是可行的方式。您可以使用 web_socket_channel 包中的 HtmlWebSocketChannel，详见此处的文档。我已经使用过这个包，并确认在 Flutter Web 中运作良好。

在你的情况下，应该使用以下代码：

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

请注意，这不可与常规的Flutter应用程序进行互操作。如果您的目标是同时针对Android和Flutter Web，则应根据您正在构建的目标有条件地处理此通道创建，并在HtmlWebSocketChannel或IOWebSocketChannel之间做出选择以创建连接。如果您感兴趣，可以使用基于条件存根的实现，如此帖子中所建议的。

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

- Abhilash Chandran

---

不再需要使用任何条件。您只需跨平台使用WebSocketChannel类即可。 - xerotolerant

@xerotolerant 不好意思，网页上还是无法运行。 - Shivam Chhetri