Flutter 中如何使用 WebSocket？

推荐答案

在 Flutter 中使用 WebSocket 可以通过 web_socket_channel 包来实现。以下是一个简单的示例代码，展示了如何在 Flutter 中建立 WebSocket 连接并发送和接收消息：

// www.javascriptcn.com code example
import 'package:flutter/material.dart';
import 'package:web_socket_channel/web_socket_channel.dart';
import 'package:web_socket_channel/io.dart';

class WebSocketExample extends StatefulWidget {
  @override
  _WebSocketExampleState createState() => _WebSocketExampleState();
}

class _WebSocketExampleState extends State<WebSocketExample> {
  final TextEditingController _controller = TextEditingController();
  late WebSocketChannel _channel;

  @override
  void initState() {
    super.initState();
    _channel = IOWebSocketChannel.connect('ws://your-websocket-url');
  }

  @override
  void dispose() {
    _channel.sink.close();
    super.dispose();
  }

  void _sendMessage() {
    if (_controller.text.isNotEmpty) {
      _channel.sink.add(_controller.text);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebSocket Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Form(
              child: TextFormField(
                controller: _controller,
                decoration: InputDecoration(labelText: 'Send a message'),
              ),
            ),
            StreamBuilder(
              stream: _channel.stream,
              builder: (context, snapshot) {
                return Padding(
                  padding: const EdgeInsets.symmetric(vertical: 24.0),
                  child: Text(snapshot.hasData ? '${snapshot.data}' : ''),
                );
              },
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _sendMessage,
        tooltip: 'Send message',
        child: Icon(Icons.send),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: WebSocketExample(),
  ));
}

本题详细解读

1. 引入依赖

首先，你需要在 pubspec.yaml 文件中添加 web_socket_channel 依赖：

dependencies:
  flutter:
    sdk: flutter
  web_socket_channel: ^2.1.0

2. 创建 WebSocket 连接

在 Flutter 中，你可以使用 IOWebSocketChannel.connect 方法来创建一个 WebSocket 连接。这个方法需要一个 WebSocket 服务器的 URL 作为参数。

_channel = IOWebSocketChannel.connect('ws://your-websocket-url');

3. 发送消息

通过 _channel.sink.add 方法可以向 WebSocket 服务器发送消息。

void _sendMessage() {
  if (_controller.text.isNotEmpty) {
    _channel.sink.add(_controller.text);
  }
}

4. 接收消息

通过 StreamBuilder 监听 _channel.stream，可以实时接收来自 WebSocket 服务器的消息。

// www.javascriptcn.com code example
StreamBuilder(
  stream: _channel.stream,
  builder: (context, snapshot) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 24.0),
      child: Text(snapshot.hasData ? '${snapshot.data}' : ''),
    );
  },
)

5. 关闭连接

在 dispose 方法中，使用 _channel.sink.close() 来关闭 WebSocket 连接，以防止资源泄漏。

@override
void dispose() {
  _channel.sink.close();
  super.dispose();
}

6. 运行应用

最后，运行应用并测试 WebSocket 连接。你可以通过输入框发送消息，并在界面上看到从服务器返回的消息。

通过以上步骤，你可以在 Flutter 中轻松地使用 WebSocket 进行实时通信。