[flutter] 플러터 Riverpod를 사용하여 웹소켓 통신을 구현하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

이번 글에서는 Flutter 앱에서 Riverpod 상태 관리 패키지를 사용하여 웹소켓 통신을 구현하는 방법에 대해 알아보겠습니다.

Riverpod란?

Riverpod는 Flutter 앱에서 상태 관리를 위한 툴킷입니다. Provider 패턴을 기반으로 하며, 간단한 코드로 상태 관리를 할 수 있습니다.

웹소켓 통신 구현하기

먼저, web_socket_channel 패키지를 사용하여 웹소켓 통신을 구현해야 합니다. 이 패키지는 Flutter 앱에서 웹소켓에 접속하고 통신을 할 수 있는 기능을 제공합니다. 다음 명령을 사용하여 web_socket_channel 패키지를 설치할 수 있습니다:

dependencies:
  web_socket_channel: ^2.0.0

웹소켓 통신을 관리하기 위한 WebSocketManager 클래스를 만들어 보겠습니다. WebSocketManager 클래스는 Riverpod를 사용하여 상태 관리를 합니다.

import 'package:web_socket_channel/web_socket_channel.dart';

class WebSocketManager {
  final WebSocketChannel _channel;
  Stream<dynamic> _stream;
  StreamSink<dynamic> _sink;

  WebSocketManager(String url)
      : _channel = WebSocketChannel.connect(Uri.parse(url)) {
    _stream = _channel.stream;
    _sink = _channel.sink;
  }

  Stream<dynamic> get stream => _stream;

  StreamSink<dynamic> get sink => _sink;

  void close() {
    _channel.sink.close();
  }
}

이제, 위에서 만든 WebSocketManager 클래스를 사용하여 웹소켓 통신을 구현할 수 있습니다. Riverpod를 사용하여 WebSocketManager 인스턴스를 상태로 관리하고, 웹소켓으로부터 오는 데이터를 화면에 출력하도록 하겠습니다.

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

final webSocketManagerProvider = Provider<WebSocketManager>((ref) {
  return WebSocketManager('your_websocket_url');
});

class WebSocketScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final webSocketManager = watch(webSocketManagerProvider);
    final message = watch(messageProvider);

    webSocketManager.stream.listen((data) {
      // 웹소켓으로부터 오는 데이터 처리
      context.read(messageProvider).state = data;
    });

    return Scaffold(
      appBar: AppBar(
        title: Text('WebSocket Test'),
      ),
      body: Center(
        child: Text(message.state ?? 'No data'),
      ),
    );
  }
}

final messageProvider = StateProvider<String>((ref) => null);

위의 코드에서 your_websocket_url 부분에 원하는 웹소켓 서버의 URL을 입력하면 됩니다.

이제 WebSocketScreen 위젯을 앱에 추가하고 실행하면, 웹소켓으로부터 오는 데이터를 화면에 출력하는 것을 확인할 수 있습니다.

결론

이제 Riverpod를 사용하여 Flutter 앱에서 웹소켓 통신을 구현하는 방법에 대해 알아보았습니다. Riverpod는 상태 관리를 편리하게 할 수 있는 도구로서, 앱의 복잡도를 낮추고 효율적인 개발을 도와줍니다.