Flutter 中的 Socket 通信：构建实时应用程序

本文将探索使用 Flutter 强大的套接字编程功能构建实时应用程序的复杂性。揭开客户端之间无缝数据交换背后的秘密，并了解如何创建动态、响应式应用程序，以实现实时更新和同步体验。

什么是 Socket ？

Socket 是用于在两台计算机或设备之间通过网络建立连接的通信端点。Socket 可促进双向数据流，允许不同机器上的进程交换信息。Socket 为运行在不同设备上的进程提供了一种标准的通信机制，与底层硬件、操作系统或编程语言无关。

有两种Socket：

Server Socket：服务器Socket等待来自客户端的传入连接。它在特定端口上监听，当客户端尝试连接时，它会与该客户端建立通信通道。

Client Socket：客户端Socket会启动与服务器套接字的连接。它指定要连接的服务器的 IP 地址和端口。连接建立后，客户端和服务器就可以交换数据。

Socket通常用于各种Web应用，包括网页浏览、电子邮件通信、文件传输以及在线游戏和即时聊天等实时应用。

在 Flutter 中，通过不同的软件包可以建立Socket连接，其中 web_socket_channel 软件包成为开发人员的首选。Flutter 中的 web_socket_channel 包是将 WebSocket 连接纳入应用程序的重要工具。该包提供 StreamChannel 封装器，确保跨平台兼容性。它提供了统一的 WebSocketChannel API，这是一种通过基础 StreamChannel 进行通信的通用实现。此外，它还包括 dart:io WebSocket 类和 dart:html WebSocket 类的封装程序，便于服务器端和客户端 WebSocket 通信的无缝集成。

用途

以下是一些证明 web_socket_channel 有益的应用场景：

1. 实时通信： WebSocket 通道的主要优势之一是其促进实时通信的能力。传统的 HTTP 请求采用请求-响应模式，即客户端向服务器发送请求并等待响应。相比之下，WebSocket 通道可实现连续、双向的数据流，非常适合需要即时更新和响应的应用程序。

2. 持久连接： HTTP 依赖于多次请求-响应循环，而 WebSocket 通道则不同，它能保持持久连接。连接一旦建立，就会保持开放状态，从而在客户端和服务器之间实现无缝、高效的数据传输。这种持久连接最大限度地减少了延迟，并降低了重复建立新连接所带来的开销。

3. 双向数据流：WebSocket 通道支持双向数据流，这意味着客户端和服务器都能独立发送数据。这种双向通信对于需要实时更新或即时通知的应用（如聊天应用、实时馈送和协作工具）来说非常重要。

4. 使用 web_socket_channel 实现：在 Flutter 中，web_socket_channel 包简化了将 WebSocket 通道集成到应用程序中的过程。它为创建 WebSocket 通道、发送和接收消息以及处理连接事件提供了高级 API。通过使用 IOWebSocketChannel 或 HtmlWebSocketChannel，开发人员可以将 WebSocket 功能无缝集成到移动和 Web 应用程序中。

5. 使用 StreamBuilder 处理消息： Flutter 开发人员经常利用该工具来有效管理来自 WebSocket 通道的传入数据。该部件允许根据数据流动态更新 UI，确保应用程序的界面反映实时变化。通过结合 WebSocket 通道 StreamBuilder，开发人员可以创建反应灵敏的交互式用户体验。这就是我们将在下面的演示项目中使用的内容。

6. 安全考虑：虽然 WebSocket 通道提供了强大的功能，但开发人员必须注意安全问题。通过适当加密实现安全的 WebSocket 连接（wss://）有助于保护敏感数据免受潜在威胁。此外，确保服务器端 WebSocket 实现符合最佳安全实践对于保护整个应用程序至关重要。

项目演示

让我们进一步来看一个简单的演示项目，它将帮助你更容易地理解 Websocket 通道。

1. 安装

将web_socket_channel软件包添加到pubspec.yaml文件中：

dependencies:
  web_socket_channel: ^2.4.1

2. 代码实现

以下是该项目的 main.dart 文件：

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(
        channel: IOWebSocketChannel.connect("ws://echo.websocket.org"),
      ),
    );
  }
}

正如观察到的那样，我们一开始就初始化了 WebSocket 通道。我们使用了一个方便的测试终端服务器，它可以免费用于轻松测试 WebSocket 和服务器发送事件（SSE）客户端。

该服务器专为测试 HTTP 代理和客户端而设计，可将 HTTP 请求头和请求体的详细信息回传至客户端。它支持 WebSockets 和服务器发送事件，简化了使用这些技术的过程。

端点是 https://echo.websocket.org/

以下是我们通过通道主动传输实时数据的代码片段：

StreamBuilder(
           stream: widget.channel.stream,
           builder: (context, snapshot) {
                    return Padding(
                        padding: const EdgeInsets.all(20.0),
                        child: Center(
                          child: Stack(
                            children: [
                              BubbleWidget(
                                key: _bubbleKey,
                                text: snapshot.data ?? '',
                              ),
                            ],
                          ),
                    ));
                  },
            )

WebSocket 通道可实现实时数据交换，非常适合需要即时更新的应用程序，如聊天应用程序、实时通知和协作编辑。有了 Flutter 中的 web_socket_channel，开发人员就可以轻松实现 WebSocket 通信，确保应用程序中客户端和服务器之间高效、灵敏的数据传输。这正是我们将在本项目中看到的。

在这里，有一个函数负责将信息分派到 WebSocket 通道的服务器

  void _sendMessage() {
    if (textController.text.isNotEmpty) {
      try {
        widget.channel.sink.add(textController.text);
      } catch (e) {
        print("Error: $e");
      }
      setState(() {});
      textController.clear();
    }
  }

我们利用 TextEditingController 从文本字段中捕捉用户信息。然后，这些信息将通过 WebSocket 通道发送到我们的服务器。

现在我们的项目完成了，让我们来看看最终输出。