flutter如何实现websocket通信

在Flutter中如何实现WebSocket通信？我需要在应用中建立实时连接，但不太清楚具体该怎么做。能否提供一个简单的示例代码，说明如何连接WebSocket服务器、发送和接收数据？另外，如何处理连接断开和重连的情况？最好能兼容Android和iOS平台。谢谢！

2 回复

Flutter 使用 web_socket_channel 包实现 WebSocket 通信。步骤如下：

  1. 添加依赖：
dependencies:
  web_socket_channel: ^2.4.0
  1. 建立连接：
final channel = WebSocketChannel.connect(
  Uri.parse('ws://your-websocket-url'),
);
  1. 发送消息：
channel.sink.add('Hello WebSocket');
  1. 监听消息：
channel.stream.listen((message) {
  print('Received: $message');
});
  1. 关闭连接：
channel.sink.close();

使用 StreamBuilder 可实时更新 UI。

更多关于flutter如何实现websocket通信的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现WebSocket通信可以使用官方提供的web_socket_channel包。以下是具体实现方法：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  web_socket_channel: ^2.4.0

2. 基本使用示例

import 'package:flutter/material.dart';
import 'package:web_socket_channel/web_socket_channel.dart';
import 'package:web_socket_channel/io.dart';

class WebSocketDemo extends StatefulWidget {
  @override
  _WebSocketDemoState createState() => _WebSocketDemoState();
}

class _WebSocketDemoState extends State<WebSocketDemo> {
  final TextEditingController _controller = TextEditingController();
  late WebSocketChannel _channel;
  List<String> _messages = [];

  @override
  void initState() {
    super.initState();
    // 连接到WebSocket服务器
    _channel = IOWebSocketChannel.connect('ws://echo.websocket.org');
    
    // 监听服务器消息
    _channel.stream.listen(
      (message) {
        setState(() {
          _messages.add('服务器: $message');
        });
      },
      onError: (error) {
        print('WebSocket错误: $error');
      },
      onDone: () {
        print('WebSocket连接关闭');
      },
    );
  }

  void _sendMessage() {
    if (_controller.text.isNotEmpty) {
      _channel.sink.add(_controller.text);
      setState(() {
        _messages.add('我: ${_controller.text}');
      });
      _controller.clear();
    }
  }

  @override
  void dispose() {
    _channel.sink.close(); // 关闭连接
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('WebSocket示例')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: _messages.length,
                itemBuilder: (context, index) {
                  return ListTile(title: Text(_messages[index]));
                },
              ),
            ),
            Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(hintText: '输入消息'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: _sendMessage,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

3. 关键方法说明

  • 连接WebSocket：IOWebSocketChannel.connect('ws://your-server-url')
  • 发送消息：channel.sink.add('消息内容')
  • 接收消息：监听 channel.stream
  • 关闭连接：channel.sink.close()

4. 错误处理建议

// 添加连接状态检查
try {
  _channel = IOWebSocketChannel.connect('ws://your-server-url');
} catch (e) {
  print('连接失败: $e');
}

// 处理连接断开
_channel.stream.listen(
  (message) => handleMessage(message),
  onError: (error) => handleError(error),
  onDone: () => handleDisconnect(),
);

5. 注意事项

  • 确保服务器支持WebSocket协议
  • 处理网络权限（Android需要在AndroidManifest.xml中添加网络权限）
  • 及时关闭连接避免资源泄露
  • 考虑重连机制处理网络异常

这种实现方式简单高效，适合大多数WebSocket通信场景。

回到顶部