【自学Flutter】37 WebSockets的使用_flutter webview socket如何使用

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("发送"),
              )
            ],
          ),
        ),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

2.引用

  web_socket_channel: ^1.0.13
1

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("发送"),
              )
            ],
          ),
        ),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

4.效果图