【自学Flutter】37 WebSockets的使用

37 WebSockets的使用

1.源代码

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  TextEditingController textEditingController = new TextEditingController();
  IOWebSocketChannel ioWebSocketChannel;
  String text = "";

  @override
  void initState() {
    ioWebSocketChannel = IOWebSocketChannel.connect('ws://echo.websocket.org');
  }

  void sendMessage() {
    if (textEditingController.text.isNotEmpty) {
      ioWebSocketChannel.sink.add(textEditingController.text);
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("WebSocket的使用"),
        ),
        body: Padding(
          padding: EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Form(
                child: TextFormField(
                  controller: textEditingController,
                  decoration: InputDecoration(labelText: '发送信息'),
                ),
              ),
              StreamBuilder(
                stream: ioWebSocketChannel.stream,
                builder: (context, snapshot) {
                  if (snapshot.hasError) {
                    text = "网络不通...";
                  } else if (snapshot.hasData) {
                    text = "返回获得的信息: "+snapshot.data;
                  }
                  return Padding(
                    padding: EdgeInsets.symmetric(vertical: 24.0),
                    child: Text(text),
                  );
                },
              ),
              RaisedButton(
                onPressed: sendMessage,
                child: Text("发送"),
              )
            ],
          ),
        ),
      ),
    );
  }
}

2.引用

  web_socket_channel: ^1.0.13

3.解释源代码

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  //声明 TextEditingController
  TextEditingController textEditingController = new TextEditingController();
  //创建 IOWebSocketChannel
  IOWebSocketChannel ioWebSocketChannel;
  //保存显示文本
  String text = "";

  //连接
  @override
  void initState() {
    ioWebSocketChannel = IOWebSocketChannel.connect('ws://echo.websocket.org');
  }

  //发送信息
  void sendMessage() {
    if (textEditingController.text.isNotEmpty) {
      ioWebSocketChannel.sink.add(textEditingController.text);
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("WebSocket的使用"),
        ),
        body: Padding(
          padding: EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Form(
                child: TextFormField(
                  controller: textEditingController,
                  decoration: InputDecoration(labelText: '发送信息'),
                ),
              ),
              StreamBuilder(
                stream: ioWebSocketChannel.stream,
                builder: (context, snapshot) {
                  if (snapshot.hasError) {
                    text = "网络不通...";
                  } else if (snapshot.hasData) {
                    text = "返回获得的信息: "+snapshot.data;
                  }
                  return Padding(
                    padding: EdgeInsets.symmetric(vertical: 24.0),
                    child: Text(text),
                  );
                },
              ),
              RaisedButton(
                onPressed: sendMessage,
                child: Text("发送"),
              )
            ],
          ),
        ),
      ),
    );
  }
}

4.效果图