Flutter開発入門25 FlutterでWebSocketを使ったリアルタイム通信を実現する方法

techgrowup — Tue, 17 Sep 2024 21:18:27 +0000

はじめに

　Flutterでリアルタイムなデータ通信を行いたいとき、WebSocketを利用することが一般的です。WebSocketは、クライアントとサーバー間での双方向通信を可能にするプロトコルであり、リアルタイムなチャットアプリ、通知システム、ストリーミングデータなどに最適です。本記事では、FlutterでWebSocketを使ってリアルタイム通信を実現する方法について、具体的なコード例とともに解説します。

WebSocketとは

　WebSocketは、クライアント（ブラウザやアプリケーション）とサーバー間の双方向通信を可能にするプロトコルです。従来のHTTP通信はクライアントがリクエストを送信し、その結果をサーバーから受け取るという一方通行のモデルですが、WebSocketではクライアントとサーバーの間でデータをリアルタイムにやりとりすることができます。

　例えば、チャットアプリではユーザーがメッセージを送信した瞬間に、他のユーザーにもリアルタイムでそのメッセージを表示する必要があります。このような場合に、WebSocketが非常に有効です。

FlutterでWebSocketを使うための基本手順

　Flutterには、dart:ioライブラリが組み込まれており、このライブラリを使ってWebSocket通信を簡単に実装できます。以下に、WebSocketの基本的な使用方法を示します。

WebSocketの接続を開く

　まずは、WebSocket接続を確立します。dart:ioライブラリのWebSocket.connect()を使ってサーバーと通信を開始します。

import 'dart:io';

void main() async {
  // WebSocketサーバーに接続
  final socket = await WebSocket.connect('ws://echo.websocket.org');

  print('WebSocket connected');

  // メッセージを送信
  socket.add('Hello from Flutter WebSocket!');
  
  // サーバーからのメッセージを受信
  await for (var message in socket) {
    print('Message from server: $message');
  }
}

　実行する場合は、以下コマンドを実行します。(ファイル名はmain.dartとしています）

dart run main.dart

　この例では、WebSocket.connectを使ってサーバーに接続し、メッセージの送受信を行っています。

WebSocketでデータを送信する

　WebSocketを使ってサーバーにデータを送信するには、WebSocket.add()メソッドを使います。これにより、クライアントからサーバーへデータを簡単に送信できます。

socket.add('Hello, WebSocket server!');

　送信したデータはサーバー側で処理され、必要に応じてクライアントに応答が返されます。

WebSocketでデータを受信する

　WebSocketは、サーバーから送信されたデータを受け取ることもできます。Dartでは、await forを使ってサーバーからのメッセージをリアルタイムに受信し処理することができます。

await for (var message in socket) {
  print('Received: $message');
}

　このコードでは、サーバーから送信されたメッセージをリアルタイムに受信して処理しています。

WebSocketの接続を閉じる

　通信が終わったら、WebSocket.close()を使ってWebSocket接続を閉じます。これにより、リソースが解放されます。

socket.close();

完成したWebSocketの例

　次に、Flutterアプリ内でWebSocketを使ったリアルタイム通信の基本的な流れをまとめたコードを紹介します。

import 'dart:io';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebSocket Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WebSocketDemo(),
    );
  }
}

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

class _WebSocketDemoState extends State<WebSocketDemo> {
  late WebSocket _socket;
  String _message = '';
  bool _isConnected = false;

  @override
  void initState() {
    super.initState();
    _connectWebSocket();
  }

  Future<void> _connectWebSocket() async {
    _socket = await WebSocket.connect('ws://echo.websocket.org');
    setState(() {
      _isConnected = true;
    });

    _socket.listen((data) {
      setState(() {
        _message = data;
      });
    });
  }

  void _sendMessage(String message) {
    if (_isConnected) {
      _socket.add(message);
    }
  }

  @override
  void dispose() {
    _socket.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter WebSocket Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Received message: $_message'),
            TextField(
              onSubmitted: (text) {
                _sendMessage(text);
              },
              decoration: InputDecoration(
                labelText: 'Send a message',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

　この例では、ユーザーが入力したメッセージをWebSocketサーバーに送信し、その応答をリアルタイムに受信する簡単なチャットのような機能を実装しています。TextFieldを使ってメッセージを入力し、それがサーバーに送信され、サーバーからの応答がリアルタイムで表示される仕組みです。

WebSocketの活用例

WebSocketはリアルタイム性が求められるアプリケーションで非常に有効です。具体的な活用例として、以下のようなシーンが挙げられます。

リアルタイムチャットアプリ: ユーザー同士がリアルタイムでメッセージをやりとりできるアプリケーション。
通知システム: 新しい通知がリアルタイムでクライアントに送信され、即座に表示される仕組み。
オンラインゲーム: プレイヤー間のリアルタイムのデータ送受信を実現。
ライブデータのストリーミング: 株価や天気情報などのリアルタイムデータをアプリに配信。

まとめ

　FlutterでWebSocketを使うことで、リアルタイム通信を簡単に実装できます。dart:ioライブラリを利用して、WebSocketの接続、メッセージの送受信、接続のクローズまで一連の操作をシンプルに行えます。リアルタイムアプリの開発には欠かせない技術なので、ぜひこのWebSocketの使い方をマスターし、自分のプロジェクトに活用してみてください。