使用 WebSockets 進行通訊
除了普通的 HTTP 請求，你還可以透過 WebSockets 來連線伺服器，
WebSockets 可以以非輪詢的方式與伺服器進行雙向通訊。
在這裡，你可以連線一個 由 Lob.com 贊助的測試伺服器。該服務器只會回傳你傳送的訊息。
這個教程裡包含以下步驟：
-
連線 WebSocket 伺服器
-
監聽來自伺服器的訊息
-
向伺服器傳送資料
-
關閉 WebSocket 連線
1. 連線 WebSocket 伺服器
web_socket_channel 這個 package 提供了連線 WebSocket 伺服器所需的一些工具。
該套件提供的 WebSocketChannel 不僅可以讓你監聽到來自伺服器的訊息還可以讓你向伺服器推送訊息。
在 Flutter 中，只用一行程式碼就可以建立一個連線到伺服器的 WebSocketChannel。
final channel = WebSocketChannel.connect(
Uri.parse('wss://echo.websocket.events'),
);2. 監聽來自伺服器的訊息
建立了連線之後，你就可以監聽來自伺服器的訊息了。
當你向測試伺服器傳送一條訊息之後，它會將同樣的訊息傳送回來。
在這個例子中，我們用 StreamBuilder 元件來監聽新訊息，並使用 Text 元件來展示它們。
StreamBuilder(
stream: channel.stream,
builder: (context, snapshot) {
return Text(snapshot.hasData ? '${snapshot.data}' : '');
},
)這樣為什麼可行？
WebSocketChannel 提供了一個來自伺服器的 Stream 類訊息。
這個 Stream 類是 dart:async 套件的基本組成部分，它提供了一個從資料來源監聽非同步事件的方法。和 Future 不一樣的是，Future 只能回傳一個單獨的非同步回應，而 Stream 類可以隨著時間的推移傳遞很多事件。
StreamBuilder widget 會和 Stream 建立起連線，並且每當它接收到一個使用給定 builder() 函式的事件時，就會通知 Flutter 去 rebuild。
3. 向伺服器傳送資料
要向伺服器傳送資料，可以使用 WebSocketChannel 提供的 sink 下的 add() 方法來發送信息。
channel.sink.add('Hello!');這又是如何工作的呢
WebSocketChannel 提供了一個 StreamSink 來向伺服器推送訊息。
這個 StreamSink 類提供了一個可以向資料來源新增同步或者非同步事件的通用方法。
4. 關閉 WebSocket 連線
當你使用完 WebSocket 之後，記得關閉這個連線。要關閉這個 WebSocket 連線，只需要關閉 sink。
channel.sink.close();完整範例
import 'package:flutter/material.dart';
import 'package:web_socket_channel/web_socket_channel.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const title = 'WebSocket Demo';
return const MaterialApp(
title: title,
home: MyHomePage(
title: title,
),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
super.key,
required this.title,
});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final TextEditingController _controller = TextEditingController();
final _channel = WebSocketChannel.connect(
Uri.parse('wss://echo.websocket.events'),
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Form(
child: TextFormField(
controller: _controller,
decoration: const InputDecoration(labelText: 'Send a message'),
),
),
const SizedBox(height: 24),
StreamBuilder(
stream: _channel.stream,
builder: (context, snapshot) {
return Text(snapshot.hasData ? '${snapshot.data}' : '');
},
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _sendMessage,
tooltip: 'Send message',
child: const Icon(Icons.send),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
void _sendMessage() {
if (_controller.text.isNotEmpty) {
_channel.sink.add(_controller.text);
}
}
@override
void dispose() {
_channel.sink.close();
_controller.dispose();
super.dispose();
}
}