Flutter WebSocketとは 使い方と注意点について

今回はFlutterにおけるWebSocketについて説明していきます。

WebSocketとは

FlutterでWebSocketを利用することで、リアルタイム通信を実現することができます。

FlutterにはWebSocket通信をサポートするための標準ライブラリであるweb_socket_channelが提供されています。このライブラリを使用することで、WebSocketサーバーとクライアント間の双方向通信を簡単に実装できます。

WebSocketの使い方

依存関係の追加

pubspec.yamlファイルにweb_socket_channelパッケージを追加します。

dependencies:
  flutter:
    sdk: flutter
  web_socket_channel: ^2.1.0

次に依存関係をインストールするために以下のコマンドを実行します。

flutter pub get

WebSocketクライアントの作成

WebSocketクライアントを作成し、メッセージを送受信できるようにします。

import 'package:flutter/material.dart';
import 'package:web_socket_channel/web_socket_channel.dart';
import 'package:web_socket_channel/status.dart' as status;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebSocketDemo(),
    );
  }
}

class WebSocketDemo extends StatefulWidget {
  @override
  _WebSocketDemoState createState() => _WebSocketDemoState();
}

class _WebSocketDemoState extends State<WebSocketDemo> {
  final TextEditingController _controller = TextEditingController();
  final WebSocketChannel channel = WebSocketChannel.connect(
    Uri.parse('wss://echo.websocket.org'), // WebSocketサーバーのURL
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebSocket Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Form(
              child: TextFormField(
                controller: _controller,
                decoration: InputDecoration(labelText: 'Send a message'),
              ),
            ),
            SizedBox(height: 24),
            StreamBuilder(
              stream: channel.stream,
              builder: (context, snapshot) {
                return Text(snapshot.hasData ? '${snapshot.data}' : '');
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _sendMessage,
        tooltip: 'Send message',
        child: Icon(Icons.send),
      ),
    );
  }

  void _sendMessage() {
    if (_controller.text.isNotEmpty) {
      channel.sink.add(_controller.text);
    }
  }

  @override
  void dispose() {
    channel.sink.close(status.goingAway);
    super.dispose();
  }
}

依存関係のインポート

web_socket_channelパッケージから必要なクラスをインポートします。

WebSocketチャネルの作成

WebSocketChannel.connectを使用して、WebSocketサーバーへの接続を確立します。この例では、wss://echo.websocket.orgというエコーサーバーを使用しています。

メッセージの送信

テキストフィールドに入力されたメッセージをWebSocketチャネルを通じてサーバーに送信します。

メッセージの受信

StreamBuilderを使用して、WebSocketチャネルからのメッセージをリアルタイムで受信し、画面に表示します。

リソースの解放

画面が破棄される際にWebSocketチャネルをクローズしてリソースを解放します。

WebSocketとはの注意点

エラー処理

WebSocket接続中にエラーが発生した場合の処理を適切に行う必要があります。
try-catchブロックやエラーハンドリングを追加することで、アプリの安定性を向上させます。

セキュリティ

WebSocket通信では暗号化（wss://）を使用することが推奨されます。特に機密データを扱う場合は、セキュリティに注意が必要です。

接続管理

接続の再試行やタイムアウトの管理を行うことで、ネットワークの不安定さに対処することが必要です。

Flutter/Dartをもっと詳しくなりたい方に

はじめてのFlutter

「はじめてのFlutter」はFlutterを使ったアプリ開発に初めて取り組む人向けの入門書です。
プログラミングにあまり馴染みがない方や、他のプログラミング言語からFlutterに移行しようと考えている開発者に特におすすめです。

はじめてのFlutter (I/O BOOKS)

Flutter モバイルアプリ開発バイブル

「Flutter モバイルアプリ開発バイブル」はFlutterを使ったモバイルアプリ開発に関する包括的に記しています。
基本的なウィジェットの使い方から、より複雑なアプリ構造の設計、パフォーマンス最適化まで、Flutter開発の全方位にわたる深い知識についてまでも収録しています。

Flutter　モバイルアプリ開発バイブル

Flutter学習のために筆者が実際に読んでおすすめしたい本をまとめています。