本記事はFlutterにおけるWebsocketの使い方について解説していきます。
これからチャットツールやオンライン会議システムといったWebsocketを活用したアプリケーションを作りたい方は是非参考ください。
【筆者のスペック】
本業はペイメント系データサイエンティスト
副業でFlutterを使ったアプリ開発（3年目）
Websocketとは？
Websocketは双方向通信を低コストで行うための仕組みです。
主に、チャットツールやオンライン会議システムといったリアルタイムにデータ通信を行いたい場合に活用されます。
【お役立ちリンク】
FlutterでWebsocketを実装する方法
FlutterでもWebsocketを扱うための機能が用意されています。
それが「 web_socket_channel 」というパッケージです。
こちらのパッケージはFlutterの公式ドキュメントでも紹介されており、FlutterでWebsocketを実装するのであれば、まず最初の選択肢となるでしょう。
今回はこのweb_socket_channel を使った実装方法についてご紹介します。
最終的には以下のようなチャットツールを作成していきます。
web_socket_channelを導入する
pubspec.yamlに以下を追記してください。
dependencies:
flutter:
sdk: flutter
io: ^0.3.4 #追加
html: ^0.14.0+4 #追加
web_socket_channel: ^2.2.0 #追加
main.dartを変更する
main.dartを以下のように変更してください。（こちらのソースは公式ドキュメントのソースコードを最新のFlutterのバージョンに合わせて書き換えています。）
import 'package:flutter/material.dart';
import 'package:web_socket_channel/web_socket_channel.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
const title = 'WebSocket Demo';
return const MaterialApp(
title: title,
home: MyHomePage(
title: title,
),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
Key? key,
required this.title,
}) : super(key: key);
final String title;
@override
_MyHomePageState 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.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Form(
child: TextFormField(
controller: _controller,
decoration: const InputDecoration(labelText: 'メッセージを送る'),
),
),
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),
),
);
}
void _sendMessage() {
if (_controller.text.isNotEmpty) {
_channel.sink.add(_controller.text);
}
}
@override
void dispose() {
_channel.sink.close();
_controller.dispose();
super.dispose();
}
}
以上で実装自体は終わりです！
web_socket_channelの使い方
ここからは上記ソースコードの解説をしながらweb_socket_channelの使い方を紹介します。
WebSocket serverへの接続
本来データを双方向でやり取りする際にはWebSocket サーバーを準備する必要があります。(今回の例ではLob.comが提供する無料のWebSocket サーバーを設定しています。)
final _channel = WebSocketChannel.connect(
Uri.parse('wss://echo.websocket.events'),
);そのため、もしWebSocket サーバーを自前で用意する場合こちらのURLを変更しましょう。
サーバーの情報をlistenする
サーバーとの接続が確立されたら常時、WebSocket サーバーを監視しつつ変更があれば取得できるようにします。
StreamBuilderを使ってText形式に変換し、画面に取得した内容を表示します。
StreamBuilder(
stream: _channel.stream,
builder: (context, snapshot) {
return Text(snapshot.hasData ? '${snapshot.data}' : '');
},
)サーバーへ情報を送る
WebSocket サーバーへ情報を送りたい場合は、channel.sink.add()を利用します。
今回の例ではボタンが押された際のファンクションとして設定しています。
void _sendMessage() {
if (_controller.text.isNotEmpty) {
_channel.sink.add(_controller.text);
}
}WebSocketサーバーとの通信を切断する
WebSocketサーバーとの通信を切断する場合は、channel.sink.close()でできます。
void dispose() {
_channel.sink.close();
_controller.dispose();
super.dispose();
}まとめ
なんだかとっつきにくいWebSocketですが、実装自体は非常に簡単です。
是非この機会に習得してみてください！
最新のFlutterの勉強方法 まとめ
Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。
