简单使用Flutter实现聊天

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:web_socket_channel/io.dart';
class ChatPage extends StatefulWidget {
  const ChatPage({Key? key}) : super(key: key);
  @override
  _ChatPageState createState() => _ChatPageState();
}
class _ChatPageState extends State<ChatPage> {
  TextEditingController _textController = TextEditingController();
  IOWebSocketChannel? _channel;
  List<String> _messages = [];
  @override
  void initState() {
    super.initState();
    _connect();
  }
  void _connect() {
    _channel = IOWebSocketChannel.connect('ws://localhost:3000');
    _channel?.stream.listen((message) {
      setState(() {
        _messages.add(message);
      });
    });
  }
  void _sendMessage(String text) {
    if (text.isNotEmpty) {
      _channel?.sink.add(jsonEncode({'message': text}));
      _textController.clear();
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Chat'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView.builder(
              itemCount: _messages.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: Text(_messages[index]),
                );
              },
            ),
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: TextField(
                    controller: _textController,
                    decoration:
                        const InputDecoration(hintText: 'Enter a message'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () {
                    _sendMessage(_textController.text);
                  },
                )
              ],
            ),
          )
        ],
      ),
    );
  }
  @override
  void dispose() {
    _channel?.sink.close();
    super.dispose();
  }
}