FlutterでWebSocket通信をする方法とユースケースを初心者向けにやさしく解説
生徒
「Flutterでリアルタイム通信ってできますか？チャットアプリを作ってみたくて…」
先生
「できますよ。FlutterではWebSocketを使ってリアルタイム通信が可能です。チャットや株価表示、オンラインゲームなんかにも使われていますね。」
生徒
「WebSocketってなんですか？どうやってFlutterに組み込むんですか？」
先生
「それではFlutterでWebSocket通信を実装する方法や使い方、活用例を順番に説明していきましょう。」
1. WebSocketとは？Flutterでできること
WebSocketとは、サーバーとクライアント（この場合はFlutterアプリ）が双方向でリアルタイム通信できる仕組みです。HTTPと違い、リクエストを毎回送らずに常時接続を維持するため、チャットや通知などリアルタイム性が求められるアプリに適しています。
Flutterでは、WebSocket通信を簡単に実装できるweb_socket_channelというパッケージがよく使われます。
2. FlutterでWebSocket通信を行うための準備
まずはpubspec.yamlにWebSocket用のパッケージを追加しましょう。
dependencies:
flutter:
sdk: flutter
web_socket_channel: ^2.4.0
追加後はflutter pub getでパッケージをインストールします。
3. FlutterでWebSocket通信する基本コード
以下はWebSocketを使って簡単な送受信を行うFlutterコードの例です。今回はEchoサーバー（送った内容がそのまま返ってくる）を利用します。
import 'package:flutter/material.dart';
import 'package:web_socket_channel/web_socket_channel.dart';
class WebSocketDemo extends StatefulWidget {
@override
_WebSocketDemoState createState() => _WebSocketDemoState();
}
class _WebSocketDemoState extends State<WebSocketDemo> {
final _channel = WebSocketChannel.connect(
Uri.parse('wss://echo.websocket.events'),
);
final _controller = TextEditingController();
String _response = '';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('WebSocket 通信デモ')),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
TextField(
controller: _controller,
decoration: InputDecoration(labelText: '送信するメッセージ'),
),
ElevatedButton(
onPressed: () {
_channel.sink.add(_controller.text);
},
child: Text('送信'),
),
StreamBuilder(
stream: _channel.stream,
builder: (context, snapshot) {
if (snapshot.hasData) {
_response = snapshot.data.toString();
}
return Text('受信: $_response');
},
),
],
),
),
);
}
@override
void dispose() {
_channel.sink.close();
_controller.dispose();
super.dispose();
}
}
このサンプルでは、入力欄に文字を入力して「送信」ボタンを押すと、WebSocketサーバーにデータが送られ、それが即座に返ってくる流れを体験できます。
Flutterを「実務レベル」で使えるようになりたい人や、 iPhone / Android両対応アプリ開発の流れをまとめて学びたい人には、 定番の実践書がこちらです。
Flutter実践開発をAmazonで見る※ Amazon広告リンク
4. FlutterでのWebSocket活用ユースケース
WebSocketは、以下のようなFlutterアプリにおいてリアルタイム通信が求められる場面で活躍します。
- チャットアプリ（双方向通信）
- リアルタイム通知（プッシュ通知とは別）
- オンライン対戦型ゲーム
- 株価・仮想通貨などの価格情報アプリ
- センサーやIoTのデータ監視ダッシュボード
WebSocketを使えば、ユーザーとサーバーが常に接続された状態になるため、スピード感のあるデータ更新が可能になります。
5. FlutterのWebSocketで気をつけるポイント
FlutterでWebSocket通信を行う際には、いくつかの注意点もあります。
- 常時接続が前提なので、disposeで接続を適切に切ること
- ネットワーク切断時の
try-catchやonErrorでのハンドリングが必要 - バックグラウンド時の動作は制限される可能性がある
- 本番環境では認証トークンを含めたセキュリティ対策が必要
Flutterではstreamを活用してリアルタイムのデータ更新を行うため、StreamBuilderとの相性が非常に良いのも特徴です。
6. 本格的なWebSocket活用のために
FlutterでのWebSocket活用を本格的に行うには、以下のような高度な対応も考慮しておくと良いでしょう。
- WebSocketの再接続処理（切断後の自動再接続）
- 接続維持のためのPing/Pong処理
- 通信ログやメッセージIDの管理
- バックエンドとのトークン認証との統合
このような工夫を加えることで、Flutterアプリの通信品質をより高めることができます。
この記事を読んだ人からの質問
